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.
Explore Shopify Liquid Code Examples
Visit our searchable library of Liquid code examples based around theme components. Learn how various Liquid objects, properties, and filters work together as part of components within a theme. Add them directly into themes to build and customize themes faster and more reliably.
Visit Shopify Liquid Code Examples1. 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 theShopify 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 theseAtom packages.
2. How can I add a logo from the assets folder within liquid?
上传你的商标资产文件夹的图像文件nd 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, getyour 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:
To learn more about the img tag please visitour 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 thisShopify 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 ourapproval process for theme submission.
8. Is product_img_url -> srcset possible?
Yes, srcset is possible with the following code:
{{ product.featured_image }}
If you would like to learn more about srcset, you can learn more onCSS 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 includingcustomers accountsanddependant 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 of10 of our favourite stock photography websites.
You might also like:4 Advanced Shopify Theming Techniques to Add to Your Workflow
