10 Top Questions About Developing Shopify Themes Answered

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.

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.

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:

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?

Thanks for subscribing

About the Author

Levin is a self-taught designer and front-end developer whose passion for design combined with his thirst for continual learning inspired him to run his own conference: Go Beyond Pixels. He has worked for clients all over the world, such as Vox Media in NYC, and now works for Trello.