Learning a new programming language can be a complex journey, full of research and unpredictable experimentation. It can often be difficult to locate clear and concise examples of how a new language works in real-world scenarios. To help developers navigate this journey, we’ve created a new resource: Shopify Liquid Code Examples.
Simply put, Shopify Liquid Code Examples is a searchable library of code examples based around theme components. These examples help to inform how various Liquid objects, properties, and filters work together as part of components within a theme. They can be added directly into themes, to allow you to build and customize themes faster and more reliably.
View Shopify Liquid Code Examples
Learning through example
Often we learn through example, so seeing how to implement popular theme components is a great way to learn about how themes work. Shopify Liquid Code Examples is a resource designed to help developers who are new to Shopify understand common theme components, and learn best practices when approaching theme development. We’ve also kept accessibility at the forefront, ensuring that each code example is fully accessible and can be used in any theme.
When navigating Shopify Liquid Code Examples, you can search for an individual component, or filter by one of the seven categories covering all major theme components, such as global elements, products, and sections.
Shopify Liquid Code Examples complements the existing range of resources available for theme developers, especially the Liquid Cheat Sheet, by bridging the gap between individual Liquid elements and complete themes. Developers can speed up the learning and building process by using both of these resources as reference points when working on theme projects.
Shopify Liquid Code Examples is an invaluable resource for elevating the quality and consistency of your Shopify theming work—no matter if you’re building or customizing your first theme, or are an experienced developer looking to understand Liquid, theming, and Shopify theming best practices in a more concrete way.
Using Shopify Liquid Code Examples
Let’s say you wanted to learn how to display the SKU of a product or variant on the product page of your client’s store. Rather than starting from scratch, or trying to reverse-engineer an existing theme, you could search the Shopify Liquid Code Examples for Show Product SKU, and see how it works.
Each example displays a description of the component, as well as instructions on how to properly implement the code on your theme. With minimal styling, many of the examples can be easily implemented into any theme with a simple copy-and-paste, allowing you to personalize the component by adding your own styling.
In this case, the description explains what a SKU is used for, the instructions inform us where the code would be added within your theme, and we can see when it was last updated. Now you can simply click on Click to copy and paste the code into your theme.
In this case, the code for adding a SKU is relatively short and easy to understand:
{%- assign current_variant = product.selected_or_first_available_variant -%}
<span>{{ current_variant.sku }}</span>
This example demonstrates the interplay between Liquid tags and objects. In this case, the assign tag can be used to create a variable named current_variant
, which represents the currently selected or first available variant. The sku
attribute can now be applied to this variable in the same way that it would be applied to the variant object, which will then output the SKU for the selected variant.
Similarly, Shopify Liquid Code Examples can be used to examine different parts of Shopify pages, and solve real problems faced by developers when learning how Liquid works. Using and modifying these examples allows developers to easily add them to test stores, empowering developers to experiment with a robust starting point.
For the purpose of keeping these examples compatible with any theme, we have intentionally limited CSS, JavaScript, and translation strings. Where CSS does appear, it is included to assist with accessibility or rendering.
Find your new favorite Markdown editor in our roundup.
Elevate your craft
By using both Shopify Liquid Code Examples and the Liquid Cheat Sheet, you’ll be better equipped to learn about theming, and build better stores for your Shopify clients. Whether you’re new to Shopify, looking to improve your existing skills, or onboarding new team members, Shopify Liquid Code Examples will improve your experience with theme development and store customization.
Stay tuned—more components are planned for the Shopify Liquid Code Examples as updates to Liquid and new features are released on Shopify!
View Shopify Liquid Code Examples
Read more
- An Overview of Liquid: Shopify's Templating Language
- How to Build a Shopify App: The Complete Guide
- The 8 Best Free Shopify Resources and Tools for Front-End Developers
- How to Use Relative Pagination In Your Application
- How to Use Liquid to Create Custom Landing Page Templates
- Tips for Using Snippets in Your Shopify Theme Work
- Building an Accessible Breadcrumb Navigation with Liquid and Shopify
- How to Manipulate Images with the img_url Filter
- 11 Easy-to-Learn Tips For Using Liquid (Shopify's Template Language)
- Creating Useful CSS Hooks in Liquid
What do you think of Shopify Liquid Code Examples? We’d love to hear your feedback in the comments below.