Advanced Techniques to Create Custom Store Designs With Shopify’s Liquid Templating Language

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. Collaborating with a Shopify Plus official partner can streamline the customization process and ensure optimal use of Liquid’s capabilities. 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 product

Filters

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 currency

Common 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.

1. 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. 

2. 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.

3. 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

4. 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.

5. 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 current theme settings picked by the merchant.

6. 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.

7. Locales

Allowing dynamic language switching for 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.