Shopify’s Liquid Templating Language stands out as a flexible and robust open-source template language. It plays a crucial role in Shopify themes rendering dynamic content on Shopify stores with utmost efficiency. Developers can use Liquid to build and modify how an online store looks and works without much trouble. This blog post talks about the techniques to design a custom store using Liquid Templating Language. We’ll cover everything from key objects and syntax to theme file structure and control flow.
Liquid Syntax
Liquid Syntax forms the foundation of Shopify themes. It has three main parts – tags, objects, and filters.
Tags
Enclosed within {% %}, Liquid Tags are used for logic and control flow. They allow you to implement various functionalities from loops and conditional elements to dynamic rendering of specific elements in templates.
Control flow tags (like if, else, elsif, unless) help you display content based on specific conditions. For example:
Code snippet
{% if product.available %}
<p>Product is available.</p>
{% else %}
<p>This product is out of stock.</p>
{% endif %} Iteration tags (like for) allow you to loop through collections of data, such as products in a collection.
Objects
The objects in Liquid Syntax signify the dynamic data present in a Shopify store. Objects, enclosed in {{ }}, enable you to access and view data, such as store settings, product collection, cart data, and product details.
{{ shop.name }} shows the store name.
{{ product.price }} displays the price of a productFilters
Filters modify the output of objects or variables. They are applied by adding a pipe (|) to an object. For example:
{{ "welcome" | upcase }} outputs WELCOME.
{{ product.price | money }} formats the product price as currencyCommon Liquid Objects
Liquid gives you several objects to fetch and show store data in a dynamic manner. Some key objects are:
- Global Objects: You can access these on all pages. They include things like shop, all_products, and settings.
- Product Objects: These offer you detailed product info. For example, product.title, product.variants, and product.options.
- Collection Objects: Thanks to these objects, you can easily manage and display the groups of products such as collection.products. You can list your items in a group by using a for loop, for instance:
Code snippet
{% for product in collection.products %}
<h2>{{ product.title }}</h2>
<p>{{ product.price | money }}</p>
{% endfor %}Control Flow and Logic
Liquid helps you show your content dynamically based on certain conditional elements using the control flow and logic tags.
- Conditional Logic: Conditional Logic refers to the use of if, else, and elsif statements for displaying specific content if the particular criteria are true.
Code snippet
{% if cart.item_count > 0 %}
<p>You've got some items in your cart.</p>
{% else %}
<p>Your cart is empty.</p>
{% endif %} - Unless Tag: The unless tag functions exactly opposite to if. It runs the code when something isn’t true.
Code snippet
{% unless product.available %}
<p>This product is out of stock.</p>
{% endunless %} Variables and Assignments
Highly helpful for preventing repetitive computations and organizing codes, Variables and Assignments, in Shopify Liquid, let developers save and reuse data dynamically.
- Assign: Create variables using the assign tag.
Code snippet
{% assign greeting = "Welcome to our store!" %}
<p>{{ greeting }}</p> - Capture: Save block content in a variable to use later using the capture tag.
Code snippet
{% capture message %}
Thanks for your visit to our store!
Code snippet
{% endcapture %}
<p>{{ message }}</p>Comments in Liquid
Liquid allows you to add comments to your code. These comments serve as notes or explanations, which are ignored by the renderer. These comments are not displayed in your webpage’s final output.
- Single-Line Comments:
Code snippet
{% comment %} This is a single-line comment. {% endcomment %}- Block Comments:
Code snippet
{% comment %}
This comment has
multiple lines.
{% endcomment %} File Structure in Shopify Themes
It’s critical to have a well-organized file structure to create a scalable and sustainable Shopify theme. We’ve explained the primary directories and files for you to have a better grasp.
- Layout: Includes files like theme.liquid that define the general structure of your theme. The theme.liquid file is used as the primary wrapper that encloses other sections and template files within your theme.
- Templates: The content and layout of specific pages are controlled by these. Here’s an example:index.liquid: Used for the homepage.
product.liquid: Defines individual product pages.- Sections: This contains reusable and customizable components that can be used to build dynamic sections that merchants can add, remove, or rearrange in the Shopify Theme Editor. Examples include:
header.liquid
footer.liquid
slideshow.liquid- Snippets: Stores small, reusable pieces of code, like forms, buttons, or specific UI components, used within templates or sections. Examples include product-card.liquid, price.liquid, social-icons.liquid.
product-card.liquid
price.liquid
social-icons.liquid.- Config: Config files enable you to customize and control the settings, structure, and layout of your Shopify stores. Located in the config directory, these files help in adjusting settings from the Shopify admin panel.
settings_schema.json: It defines the theme settings that are available and editable in the Shopify admin.
settings_data.json: It helps in storing the present theme settings picked by the merchant. - Assets: These host static files such as fonts, images, JavaScript, CSS, and SCSS. Files present in this directory can be accessed from the frontend of the store. Following are some examples:
theme.css: Primary stylesheet of the theme.
theme.js: JavaScript brings dynamic functionality.- Locales: Allowing switching language dynamically for the storefront text, Locales offer multi-language support through translation files included in .Json format. For example:
en.default.json: English translations.
fr.json: French translations.
Conclusion
For those who want to build dynamic and highly customizable online stores, Shopify’s Liquid Templating Language is one of the finest solutions out there. With a deeper understanding of the file structure, control flow, objects, syntax, etc., developers can build authentic and exceptional shopping experiences, adding to the aesthetics and scalability.
