Vision
From Shopify Wiki
Vision is currently unsupported by Shopify. We recommend using Meeech's Textmate Bundle in the meantime.
Vision is a stand-alone application that lets you create themes for Shopify stores on your local machine without having to setup a database.
Contents |
Getting started with Vision
To learn how to install vision watch this screencast on Vision
Using Vision
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 theme!
customname
Now vision will create a new directory in the themes folder with the name of your theme. Your theme will live in a folder like this:
../vision/themes/customname
where _customname_ is the name of the new theme.....
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 theme, 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 theme:
- 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 six templates that are needed to run a shop:
Vision Troubleshooting
- Currently Vision does not support any theme that contains a config folder, and .css.liquid stylesheets. What this means is that it currently does not support the themes available on the Theme Gallery page in your shop admin, as they make use of these new assets. All the themes available in our Theme store are not supported either by Vision.
- It does not support alternate layouts, alternate templates, nor snippets.
- The implementation of Liquid in Vision differs slightly from the one used on live shops. The differences are for the most part minor, but a few are significant. Use caution when developing under Vision.
- Vision works with a 'hard-coded' static cart. It also works with dummy content. It won't allow you to test any add to cart or checkout functionality. It will not allow you to preview your theme with real products, real collections, real pages, or real navigation link lists.
- Vision is a tool that is provided "as-is" and is not supported by Shopify Support. It is hosted on github. You are free to clone and fork the project.
- Having a blank character in your theme name results in an error "No README" upon export via Vision(.exe) dashboard. FIX: As with all file names never use a space in the file name always use an underscore or a dash to indicate a break.
- Something to be aware of from the start: Shopify's structure for Assets is flat. Hence, the Assets folder cannot contain sub-folders, like '/assets/images' or '/assets/css', etc. Don't use folders in the Assets folder of your theme.
Supported platforms
Vision runs on Windows and OS X. On Linux you can just use your favorite package manager to get Ruby and run: ruby ./vision.rb.