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 aset of product CSVs and imagesthat 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 ofShopify Tutorialson 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.
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:
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:
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 ourtop 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 outour documentation.
You might also like:The Essential List of Resources for Shopify Theme Development
Join us for our next Partner Session
Head over to our webinars page toregister for upcoming webinarsand to check out our previous Partner Sessions.
