GettingStartedWithVision
From Shopify Wiki
Contents |
What is Vision?
Vision is here to help solve the problem of developing data driven templates using traditional IDE's like Macromedia Dreamweaver. By itself, tools like that cannot help you see what your Shopify theme will look like. Without Vision you would have to upload your theme file and then preview it online to see what it would look like with real data in it. Developing templates in this manner is tedious and error prone.
Vision gives you a way to see what your Shopify theme looks like as you develop it without needing a server. You will still use your favorite HTML development tool to edit the template files as you always have. But as you make changes you can pop over to Vision and see your changes right away with sample data automatically populating the template page.
When Vision loads it will actually start up your default browser and take you to the Vision Dashboard.
First Steps
When you start up Vision you will have the choice of either using an existing template or creating your own. Let's enter a nice suitable name and create our own template!
customname
Now vision will create a new directory in the themes folder with the name of your template. Your template will live in a folder like this:
../vision/themes/customname
where _customname_ is the name of the new template.....
These are the files that are created for a new theme:
./README ./assets/shop.css ./assets/shop.js ./layout/theme.liquid ./templates ./templates/cart.liquid ./templates/index.liquid ./templates/collection.liquid ./templates/page.liquid ./templates/blog.liquid ./templates/product.liquid
Let's Take A Look
When creating your new template, Vision did not only create a new directory but also a bunch of files that you will need.
There are three parts that make up a shop template:
- assets
- layout
- templates
Each one can be found in a directory by the same name.
Assets (./assets)
This is the folder for *all* the files that are not _liquid_ files. In most cases this directory will contain:
- One or several stylesheet files (CSS)
- One or several javascript files (JS)
- Any graphic files that are being used for the shop frontend (except product pictures of course since they come directly from the database)
Layout (./layout)
In this directory you will only have one file called theme.liquid. This file contains the static content of your shop front, which includes:
- A header / Logo
- A navigation menu
- A search input field
- A Footer
In order to allow all the dynamic content to show up in your static layout file, you must include the following line where you want your dynamic content to show up:
{{ content_for_layout }}
another requirement is that every layout file includes
{{ content_for_header }}
in its html <head> section.
Templates (./templates)
In these liquid templates are the formulae for any dynamic content. Only one of these will be rendered at a time. There are five templates that are needed to run a shop:
