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
// Liquid | |
<h1>{{ product.title }}</h1> | |
<p>{{ product.description }}</p> | |
// HTML returned | |
<h1>Snowboard Product Title</h1> | |
<p>The snowboard product description.</p> |
How Liquid filters work
{{ 'logo.png' | asset_url }} | |
{{ product.vendor | url_for_vendor }} | |
{{ "Shop winter boots" | link_to_tag: 'Boots' }} | |
//cdn.shopify.com/s/files/1/0087/0462/t/394/assets/logo.png?34423/collections/vendors?q=Burton | |
<a title="Show products matching tag Boots" href="/collections/frontpage/boots">Shop winter boots</a> |
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.
You might also like: An Overview of Liquid: Shopify's Templating Language
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:
<p>Type: {{ product.type | link_to_type }}</p> |
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:
<div class="product-form__item product-form__item--lip"> | |
<label for="Engraving">Engraving</label> | |
<input type="text" id="engraving" name="properties[Engraving]"> | |
</div> |
You might also like: The Power of Link Lists
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:
If you’re looking for more information about incorporating these into your workflow, check out our top tips for using snippets.
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.
{% comment %} | |
Source: https://gist.github.com/carolineschnapp/9122054 | |
If you are not on a collection page, do define which collection to use in the order form. | |
Use the following assign statement, replace 'your-collection-handle-here' with your collection handle. | |
{% assign collection = collections.your-collection-handle-here %} | |
Use the assign statement outside of this comment block at the top of your template. | |
{% endcomment %} | |
{% paginate collection.products by 100 %} | |
{% if collection.products_count > 0 %} | |
<div> | |
<h1>{% if template contains 'page' %}{{ page.title }}{% else %}{{ collection.title }}{% endif %}</h1> | |
<input type="submit" value="Add to the cart" /> | |
</div> | |
{% else %} | |
<h1>{% if template contains 'page' %}{{ page.title }}{% else %}{{ collection.title }}{% endif %}</h1> | |
{% endif %} | |
{% if template contains 'page' and page.content.size > 0 %} | |
<div class="rte"> | |
{{ page.content }} | |
</div> | |
{% elsif collection.description.size > 0 %} | |
<div class="rte"> | |
{{ collection.description }} | |
</div> | |
{% endif %} | |
{% if collection.products_count > 0 %} | |
<table> | |
<tbody> | |
{% for product in collection.products %} | |
{% if product.available %} | |
{% for variant in product.variants %} | |
{% if variant.available %} | |
<tr class="{% cycle 'pure-table-odd', '' %}"> | |
<td> | |
<a href="{{ variant.url | collection }}"> | |
<img src="{{ variant.image | default: product.featured_image | img_url: 'small' }}" alt="{{ variant.title | escape }}" /> | |
</a> | |
</td> | |
<td> | |
<a href="{{ variant.url | collection }}"> | |
{{ product.title }}{% unless variant.title contains 'Default' %} - {{ variant.title }}{% endunless %}{% unless variant.sku == blank %} - {{ variant.sku }}{% endunless %} | |
</a> | |
</td> | |
<td> | |
{{ variant.price | money }} | |
</td> | |
<td style="text-align:right;"> | |
<input name="updates[{{ variant.id }}]" onfocus="this.select()" class="quantity field" min="0" {% unless variant.inventory_management == blank or variant.inventory_policy == 'continue' %} max="{{ variant.inventory_quantity }}" {% endunless %} type="text" value="0" tabindex="1" /> | |
</td> | |
</tr> | |
{% endif %} | |
{% endfor %} | |
{% endif %} | |
{% endfor %} | |
</tbody> | |
</table> | |
<div> | |
<input type="submit" value="Add to the cart" /> | |
</div> | |
{% else %} | |
<p>There are no products in this view.</p> | |
{% endif %} | |
{% endpaginate %} | |
{% if collection.products_count > 0 %} | |
<script> | |
jQuery(function($) { | |
$('table .quantity:first').focus(); | |
$('[max]').change(function() { | |
var max = parseInt($(this).attr('max'), 10); | |
var value = parseInt($(this).val(), 10) || 0; | |
if (value > max) { | |
alert('We only have ' + max + ' of this item in stock'); | |
$(this).val(max); | |
} | |
}); | |
}); | |
</script> | |
{% endif %} | |
<style> | |
.action-bar { margin: 15px 0; } | |
.action-bar.top { margin: 30px 0 0; } | |
.action-bar h1 { margin:0; padding: 0; line-height:1 } | |
.left { float: left; } | |
.right { float: right; } | |
.clearfix:before, .clearfix:after { content: ""; display: table; } | |
.clearfix:after { clear: both; } | |
.clearfix { zoom: 1; } | |
/* Additional styles for table */ | |
table.pure-table { margin: 15px 0; width: 100%; } | |
table.pure-table tr td:first-child, table.pure-table tr th:first-child { padding-left: 12px; } | |
table.pure-table tr td:last-child, table.pure-table tr th:last-child { padding-right: 12px; } | |
table.pure-table img { float:left; padding: 5px 0; } | |
table.pure-table td { vertical-align: middle; } | |
.quantity { text-align: center; width: 60px !important; margin: 0 !important; } | |
</style> |
You might also like: The Essential List of Resources for Shopify Theme Development
Read more
- Creating Useful CSS Hooks in Liquid
- Shopify Tutorial: The product.liquid template
- How to Make a Brands or Trends Page in an Ecommerce Store Using Link Lists
- How to Improve Custom Search in Your Clients' Storefronts
- How to Use Liquid to Create Custom Landing Page Templates
- Building an Accessible Breadcrumb Navigation with Liquid and Shopify
- How to Manipulate Images with the img_url Filter
- How to Use all_products in a Shopify Theme
- Understanding Date Formats in Liquid and Shopify
Join us for our next Partner Session
Head over to our webinars page to register for upcoming webinars and to check out our previous Partner Sessions.