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?

Using icons on your site allows you to effectively communicate with your visitors by increasing readability, highlighting important content, re-enforcing functionality or features, and enhancing the design. We have compiled a great list resources where you can download free and premium icon packs to use in your existing and future projects.

Starting a new Shopify project for a client is very exciting. You’re itching to put your first design ideas in Sketch and get a working prototype ready for your client to review. The problem is that before you get to any of the fun stuff, you end up wasting a few hours on the web searching for quality product data like product images, names, descriptions, and prices.

Alternatively, deciding to use Lorem Ipsum generators or the same product image over and over again for your design may be a shortcut, but this approach will not showcase a meaningful and realistic concept of the final product. However, there’s good news. We have compiled quality product data, like beautiful product images, into JSON. This data can be imported into Sketch Data Populator, so you can start using realistic product info in three easy steps.

Why use realistic data? The makers of Sketch Data Populator, Precious Design Studio, believe designers should work with meaningful and realistic data as early as possible in the design process for the following reasons:

Step 2: Design your layout and name your layers

For this tutorial, we’ll populate a product grid and product detail layout with realistic product data using the presets in the plugin. Starting with the grid layout, we will want to display an image, product name, and price as a 3-row and 3-column layout. To do that, we’ll draw a rectangle shape to host our product image with two text fields, product name and price, in Sketch:

The names of the layers shown above reflect the named variables in our JSON file, but feel free to mix and match variables to create your own unique layouts in your own designs going forward. Here’s a sample of the JSON file with all of the variables listed:

Now we’ll design our product detail page layout with one large featured image, three thumbnail images, a product name, a price, and a description. The layers are named to match the JSON variables we saw above in the JSON snippet.

Step 3: Populate with real data

Now that we have designed our product layout and named our layers, it is time to populate them with real data from our plugin presets. Let’s start with our grid layout. Highlight the layers, go to Plugins > Sketch Shopify Data Populator > Populate with Preset. Make sure that ‘apparel’ is selected from the dropdown preset, check ‘Create Grid’, set your setting, and click Populate.

That’s it! Your product grid is now populated with meaningful and realistic products.

If you would like to cycle through the other products available in the data presets, go to Plugins, hover over Sketch Data Populator, and click Populate again. Alternatively, you can perform the following shortcut: Command + Shift + X

For our Product Detail page, we’ll use the same concepts as the grid above with a couple of new data variables to get dynamic thumbnails and full product descriptions:

Now we can select all of the layers: go to Plugins > Sketch Shopify Data Populator > Populate with Preset > Uncheck ‘Create Grid’ > Click ‘Populate’. When we populate again, our design will dynamically add thumbnails to the product, if thumbnails are available for that product.

Here’s a look at the final layout complete with product info and dynamic thumbnails:

Using Real Data for More Meaningful Prototypes

Clients sometimes have a hard time visualizing how a prototype will lead to a final product. Working with real data for your concepts will help you make better informed design decisions, and when you’re ready to present the concept to your client, you’ll be able to show them a prototype that reflects a realistic final product. Better yet, if your client already has a Shopify store or products, try to incorporate their actual product images and descriptions to really wow them when you present your final concept.

In this post, we saw how easy it can be to start using real data with the Sketch Shopify Data Populator and its built-in presets, so you can hit the ground running with your next project. Start using quality images and product data resources mentioned within this article next time you’re working in Sketch to build better informed and meaningful designs.

If you work with Shopify Themes, you know that developing a strong understanding of the basics of Liquid is just the start. There are countless tips, tricks, and hacks you can use to reinvigorate your theme design process and, ultimately, make you more efficient.

This article will provide you with an overview of four advanced theme development techniques that were covered in our most recent Partner Session webinar. I hope you find these code snippets and resources useful as you build your next store or theme on Shopify.

Setting up our store

The first thing we did in the Partner Session was import a set of products and create product collections to provide us with live product data to work with, like product variants and images. We recently published a set of product CSVs and images that you can start using for your own shops, designs, and mockups. To learn how you can use these product CSVs and images, check out our step-by-step guide!

Quick Liquid overview

In order to get started with advance theme building techniques, you’ll need a pretty solid understanding of Liquid concepts. If you’re new to Liquid or looking to learn a new language, check out our collection of Shopify Tutorials on the Shopify Web Design and Development Blog.

How Liquid output tags work

How Liquid filters work

Now that we’ve got a basic understanding of Liquid, let’s take a look at four advanced theming techniques you can add to your workflow.

Advanced Theme Technique 1: Dynamic Product Type Tags

Dynamic product type tags are a great way to improve the buying experience in your client’s store. Dynamic product type tags make it easy for buyers to click on a product type, such as jackets, and browse all similar product types. Buyers can also click on particular tags like brand, year, women, or men depending on the tags set up on the store. The following code snippet will create a clickable dynamic product type tag and will list all associated tags for that product which will also be clickable.

Show type:

Display and add links to all product tags:

Advanced Theme Technique 2: Customizable line properties

If you would like to request information from a buyer, such an engraving details, you can add a line item property to your product page to request that information. Just insert the following code snippet to add a line property to any product page:

Advanced Theme Technique 3: Snippets

Why use snippets? Snippets help us reuse and repurpose lines of code, and they also help us organize long templates into just a handful of snippets. For example, the following code snippet will return a list of 5 related products:

Advanced Theme Technique 4: Custom collection templates

In the partner session, we discussed how we can create an order form from a collection using a custom collection template. Your client may have buyers who buy products in bulk and an order form is a good way to improve that buying experience. The following code will create an order form for our collection. To learn more about the following code, check out our documentation.

Theming a shop for the holiday season is a clever way to turn casual browsers into buying customers. When your client’s shop is themed for the holidays, it will excite their visitors and get them into the holiday shopping spirit.

In this tutorial, I’ll go over four simple ways that you can theme a shop without a lot of effort, so you can give your client's store a quick holiday make-over just in time for the holiday rush. Plus: read to the bottom to find out how you can win the Christmas Mockup Scene Generator tool that I use in this tutorial!

We’ve all been there; the work is piling up and the deadlines are fast approaching. The last thing you have time for is your own website. But neglecting it can lead to a number of negative consequences.

Instead, consider these five easy ways to update your website (without a complete overhaul), to help it look fresh and ready for business.

Any moment of purchasing hesitation – even a short one – can have a big impact on conversion. One way to combat that hesitation is to add a sticky ‘add to cart’ button that follows the customer as they scroll through a product's description.

In this article, we'll go over a couple methods you can use to implement a sticky ‘add to cart’ button in every project you take on.

In this tutorial, we will show you how to implement Scalable Vector Graphic (SVG) icons on your site in a few easy steps, and we’ll explain how you can take your icons to the next level with animations.