shopify theme from scratch

Chapter 2

Setup Vision

What is Vision?

Vision lets you to build Shopify themes from your own computer (no internet connection needed). If you try and make your theme online it will be slow and tedious.

Let's install vision

  1. Download Vision
  2. Unzip the .zip and open the vision folder
  3. To run Vision on Windows click on "Vision.exe" to run it on a Mac click on "Vision" Vision Macpc
  4. Your browser should have opened up to the Vision dashboard. If the dashboard did not automatically pop up or if you even need to access vision again go to 127.0.0.1 (windows) or localhost:3000 (mac) Vision Dashboard
  5. If you see a black and white text window don't worry. Vision is a server on your computer and the text in the window is what the server is doing.Vision Server

We are going to create a theme from scratch. Click on Create a new theme (in the far left box on the Vision dashboard). From a drop down pick any theme (I picked Vogue) and give your theme a name (I called mine Simple Theme).

Vision is going to redirect you to your new theme. (I am using a custom Vision database (you might see snowboards or cameras for the product images).

Newshop

If you ever need to switch themes or go back to the dashboard there is a nav bar at the bottom.

Vision Switchthemes

I recommend creating your theme in static HTML & CSS first before you even touch Vision. Especially if this is your first time working with Shopify.

Open up Vision in your OS again. Click on themes. You're going to see all of Visions default themes.

Vision Finder

Find and open the folder that is called Simple Theme (or whatever you named your theme). You will see some more folders:

  1. Assets: This is where your themes css/javascript/images are stored
  2. Layout: This contains theme.liquid (the "master" template)
  3. Templates: Where all your templates are

Since we want to create a theme from scratch: Go into Assets and delete all the files and replace them with all your custom theme's files. If you refresh your browser things will look something like this:

Theme Contentheader

The biggest difference between Vision and a regular .myshopify.com store is that Vision doesn't give you access to the shop's admin. Vision comes with a pre-made database of content.