Conquering Shopify Design
I recently had a chance to implement a custom design for a Shopify storefront. This was my first time using the e-commerce site, but Shopify's known to be easy to customize and work with, so I was excited to dive in and take on the challenge. I was ready for Mount Everest or Iditarod levels of difficulty; Triathalon-hard at least. But luckily, Shopify makes customizing a shop's design very easy even for the less-than code savvy like myself, and its customizing tools make the process as painless as possible.
Shopify Made Easy
What makes Shopify extra easy (and fun) for designers to hit the ground running is Vision. Vision is an application that lets you edit and run a sample Shopify store locally on your computer. I just downloaded, installed, and within a few minutes I was editing free templates provided by Shopify and already seeing the storefront in action. There were sample products and pages already set up, so I could focus solely on the design. When I'd finished my masterpiece, I simply zipped up the files, uploaded it to Shopify, and Shopify did all the installing for me.
Vision: Create it, Modify It, and Export. Don't Get Much Easier.
Of course there's always changes and little edits to make to the design once it's up. Shopify lets you edit in your browser easily and automatically saves all past versions of your code, so you can quickly backtrack if something goes terribly awry. It saved me a time or two... dozen.
These easy editing tools, for working either online or off, make implementing a design for Shopify downright enjoyable.
Some General Tips
Shopify uses its very own templating language, Liquid, to create a store. It's pretty simple to get the hang of, but start by editing one of the free templates provided rather than writing the code from scratch, at least until you feel comfortable with Liquid.
There are a number of liquid templates that make up a storefront. The general layout formatting is mostly housed in theme.liquid, so you really only need to go into the other templates when changing what content wil be displayed, not how it'll be displayed.
For exact and easy control over which products show up where, categorize them by collections.
And One Anecdotal Tip That Few People Will Need, But Took Me Too Long to Acquire NOT To Share
Each product page automatically has a dropdown menu from which the user picks a version of the product. This is great if the store sells clothes in small, medium, or large sizes or in different colors. But if there are no variations of the product, there's not an automatic way to take out the dropdown menu. Hunting through the forums for a solution was harder than I'd imagined, since it seems like it's a fairly common issue. After finally finding it, I feel like I must share my hard-won code knowledge:
Getting Rid of the Variant Drop Down Menu If There Are No Variants on the Product Page:
{% if product.variants.size > 1 %} <select id="variants" name='id'> {% for variant in product.variants %} <option value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money }}</option> {% endfor %} </select> {% else %} <div id="no-var-price"><input type="hidden" name="id" value="{{ product.variants.first.id }}" /> {{ product.price | money }} </div> {% endif %} Links to Get You Started
Overall I found implementing a design on Shopify fun, with a quick learning curve. Anyone else work with Shopify before? How'd you like it? Got some good tips or suggestions for us beyond my most basic of offerings?
