shopify for beginners (1)

Written on: 23/07/09: Filed under: tutorial :

Do the words Ruby, Rails, CSS, JAVA and e-commerce draw a learning curve so steep that it disappears into the clouds. Do you feel flabby and fearful as the 16 year olds stream past you wearing all the latest Web Kit toward the summit. This small tutorial might settle your nerves.

The sales pitch at the foot of the Shopify mountain is fairly seductive. Before you know it you've got the free account… and full of enthusiasm you hit your first brick wall. What the feck is this Vision thing? You watch the movie (with no sound!) but you're none the wiser. All that code looks off putting, worse still, everyone seems to know what they're talking about, except you!

It becomes obvious very quickly, there's still quite a sizable mountain to scale. But if you break it into small sections, pace yourself sensibly and try not to stay up with the 16 year olds then you'll get there.

Stage One: Rent out the shop space.
Set up a shop on Shopify with the name of your shop - go for the free option. Log in, click on the Assets tab in the far right corner, go to the Theme Gallery and select one of their ready made themes.

That's it, you've now decorated your shop. It's quite possible this may be all you need at this point, you have a full functioning shop, it might not look that unique, but it works. If you want to go about changing a few things then read on.

Stage 2: What's the difference between Shopify and Vision?
You'll not need to hire a brick layer, carpenter, electrician and plumber, all that stuff works fine - shopify looks after that bit. However, you'll probably want to change some things, you know, make it more homely, give it a lick of paint and move the furniture around a bit. The cosmetic stuff.

Vision is the application that lets you move the furniture about and give it a lick of paint. It mimics what happens on Shopify's server when someone visits your shop. You can create your own theme on your own computer, work with your favorite applications/tools rather than using the limited set available to you over at the Shopify Admin panel.

When I visited the Vision site, it looked simple enough. Then I watched the video (with no sound!). The panic set in when I started seeing bits of code flash in front of me. I tried the help section but found it a bit intimidating. The info's all there but the presentation isn't great, I think it's written by the 16 year olds. Sometimes all I want is a simple diagram and someone speaking English, I'm a bit of a dunce like that, so here's my take.

A sucessful shop you needs:
Staff to run the shop, Stock in the shop, Decor & Layout to make the shop look pretty and 4 walls and a roof to store everything in.

Staff use the Admin panel to place products/stock in the store room.
The Stock is held in the main Database (like a big store room) waiting to get hung on the rails.
The paint, pictures, mirrors and stylish Decor & Layout is held in the CSS.
Once a customer clicks on you web site/opens your front door, the HTML and Liquid/Ruby Tags pulls all these elements together under 1 roof to create your shop. The Liquid/Ruby Tags are a bit like the shop rails. If you want dresses to appear in your shop then you use the appropriate {{ DRESSES }} Tag to pull the dresses out of the store room (database).

The Shopify Environment
This is a very basic diagram of what happens on your Shopify website (online).

Step 3: Download & Install Vision
Vision doesn't really do that much. It doesn't have any editing or graphic tools. It's essentially a development environment that serves up your shop pages and mimics how shopify works on-line. This means you can work with your favourite text editor to change the code, use Photoshop, Illustrator, or my favourite FREHAND!!!! to create graphics such as shopping carts, purchase buttons and edit the CSS using CSS Edit. All this can be done on your computer, speeding up the process.
It has a few drawbacks that become apparent very quickly. Vision comes with a very, very, very small, sample database with a few products, descriptions and images. It won't allow you to create the products for your shop. It only lets you create/modify the Decor & Layout (theme). You can't, for example, change the navigation links or upload your product images. I repeat, it just lets you create the CSS/decor and place Tags within the HTML to allow you to pull bits of content from the database into specific areas of the page.

The Vision Environment
This is a very basic diagram of what happens using Vision (offline). You don't have an admin panel and you have a very small data base to help you visualise the end result.

Part 2 will explain how to create a new Theme, amend it and maybe even change parts the vision database to suit your theme!