In early December of last year, we hosted our first Partner Session webinar. In the webinar, we covered the basics of designing themes for the Shopify platform. From theme structure to the basics of Liquid, attendees got the full picture of what it takes to develop a beautiful and functional Shopify theme.
At the end of the hour-long webinar, we opened the floor to a Q&A session where we answered several questions from our attendees. We noticed that many of these questions touched upon important aspects of the theme building process and had potential value for the partner community outside of the webinar — so we decided to share them.
With that being said, here are the top 10 questions from the webinar answered.
1. Are there any Liquid IDEs available for Macs and PCs?
There aren’t any specific IDEs created purely for Liquid. However, you can build Shopify themes through any modern browser using Shopify’s admin tool. You can also install the Shopify Theme Gem, which will allow you to work locally and have your changes synced to your development or live store in the background. Text editors including Atom and Sublime also have Liquid syntax highlighting packages available. You can also extend Atom's functionality with these Atom packages.
2. How can I add a logo from the assets folder within liquid?
Upload your logo image file to the assets folder and use the following Liquid code snippet:
{{ ‘name_of_your_file.jpg’ | asset_url | img_tag }}
3. What is the recommended way to create a “sandbox” for a production site? Can you “clone” an existing Shopify site and move into a development sandbox?
The first step is to create a free Shopify Development store through your Partner dashboard, get your free Partner account here. A Development store gives you access to all the features of a paid Shopify store for free, you even perform test transactions. On the live Shopify store export the current theme to a zip file which you can upload to your Development Store. To down a current theme navigate to: ‘online store’ > ‘Themes’ > click the ‘ … ‘ button, this will provide you with a dropdown > click ‘Download theme file’. Zip up the downloaded files and navigate to the themes page in your development store and click ‘Upload Theme’.
Furthermore, you can export the product detail and images from the live store as a CSV file and import them to your sandbox environment so you can work with your client’s products. Navigate to the products page in the Shopify admin and click ‘export’, download the CSV and import it in your sandbox environment.
4. Is it possible to set up custom product types to have 2 different kind of product templates?
Yes, this is possible. On the online theme editor inside the Shopify admin inside the Templates folder you will see a link to “Add a new template”. This will prompt you to create a new template. Select, product from the dropdown list and then provide you template with a unique name. You are then able to pick off the relevant product template you would like when editing an individual product in the admin.
5. How can we add classes or styling to the generated html, like the featured image?
You can add classes to a liquid img tag like so:
{{ image | img_tag: 'alternate text', 'css-class', 'small' }}
If you’re looking to add inline styles, I suggest using this alternative:
<img src="{{ 'hero.png' | asset_url }}" 100="" />
To learn more about the img tag please visit our documentation.
6. How do you know which objects are available in which templates? Is there a list of this somewhere in the documentation? e.g. {{product.name}} is available in which liquid files?
For a full list of available Liquid and Shopify tags available, variables, and properties available in the templates please visit this Shopify Cheat Sheet.
7. Are there statistics around theme sales? I’m deciding if it’s a smart business move to build themes. Perhaps there is an “average sales / theme / year” stat?
In 2014, $4,158,700 was paid to theme developers. If you're interested in building themes with Shopify, learn more by checking out our approval process for theme submission.
8. Is product_img_url -> srcset possible?
Yes, srcset is possible with the following code:
{{ product.featured_image }}
<img src="{{ product.featured_image | product_img_url: " small="" srcset="{{ product.featured_image | product_img_url: " medium="" 1000w="" product="" featured_image="" product_img_url:="" large="" 2000w="" alt="My Awesome Product" />
If you would like to learn more about srcset, you can learn more on CSS Tricks.
9. Shopify provides various global assets such as “shopify_common.js”, “option_selection.js”, etc. However, I have had difficulty finding what those global assets actually do and which pages they affect and should be included in. Could you give some insights or links to documentation for those?
Our in depth documentation has many details about our global theme assets including customers accounts and dependant variant selectors.
10. Are there any resources that you could recommend for royalty free images to use as example products in a theme?
Yes, and in fact we have a great post on our Web Design Blog with a list of 10 of our favourite stock photography websites.
Read more
- The Essential List of Resources for Shopify Theme Development
- Free Course] 10x Your Shopify Theme Development Skills with These Free Courses
- An Overview of Liquid: Shopify's Templating Language
- How to Manipulate Images with the img_url Filter
- How to Create Your First Shopify Theme Section
- How To Use Translation Keys To Create Internationalized Themes
- How the Routes and Page_Image Liquid Objects Can Help You Build More Robust Themes
- How to work with Metafields when building Shopify themes
- How to Personalize Shopify Themes with the customer Object
- Tips for an Efficient Shopify Theme Review Process
You might also like: 4 Advanced Shopify Theming Techniques to Add to Your Workflow