In this section of our guide, we focus on Liquid, the templating language developed by Shopify. Liquid is a crucial component for theme customization as it integrates static HTML with dynamic content pulled from your Shopify store's database. Let's explore its syntax, basic constructs, and how it's used in Shopify themes.
What is Liquid?
Liquid is an open-source template language created by Shopify. It is written in Ruby and is used extensively in Shopify themes to load dynamic content. It uses placeholders to display data from the backend (like product information, customer details, etc.) and supports logical operations and flow control.
Liquid Syntax
Liquid syntax is straightforward and consists of:
Output tags (
{{ }}): These tags output data from an object. For example,{{ product.title }}would display a product's title.Tag blocks (
{% %}): These are used for logic and control flow, like loops and conditions. For example,{% if user_logged_in %}could be used to check if a user is logged in.
Basic Constructs in Liquid
Objects
Objects contain attributes that show data from your store. They are accessed using double curly braces. For instance:
{{ product.title }} // Displays the product's title
{{ cart.total_price }} // Shows the total price of items in the cart
Tags
Tags create logic and control flow in Liquid. They are encompassed within curly braces and percent signs. Common tags include:
if & elsestatements for conditions.
{% if customer %}
Welcome back, {{ customer.first_name }}!
{% else %}
Welcome to our store!
{% endif %}
{% endif %}serves as a closing tag for the entire conditional structure, encompassing anyif,elsif, andelsestatements within it.
forloops to iterate over arrays. For example:
{% for product in collection.products %}
{{ product.title }}
{% endfor %}
Filters
Filters are simple methods used to modify the output of numbers, strings, objects, and arrays. For example, to convert a string to uppercase:
{{ 'hello world' | upcase }} // Outputs: HELLO WORLD
Using Liquid in Shopify Themes
Liquid's Role in Shopify:
Integrates with HTML/CSS: In Shopify themes, Liquid templates contain HTML to structure the web page and CSS for styling. Liquid tags are embedded within the HTML to dynamically load content.
Shopify Objects: Liquid interacts with Shopify's objects (like products, collections, and carts) to display their properties (like titles, prices, images) on the web page.
Customization: Liquid allows developers and store owners to customize the storefront. By using Liquid, one can create personalized and unique shopping experiences for customers.
Understanding theme.liquid in Shopify Themes
In Shopify, theme.liquid is a core file that acts as the main layout template for your entire online store. Think of it as the foundation or the skeleton of your website, where all the common elements of your site are defined. It's like a template that gets used on every page of your store to maintain consistency in design and structure.
Key Points of theme.liquid:
Master Template:
theme.liquidserves as the master layout for your store. Every page on your Shopify site will load within this template. It includes elements that are common across all pages, such as the header, footer, and main navigation.Reusable Sections: The file typically contains calls to other snippets or sections of the website. For instance, your header and footer are usually defined as separate snippets (
header.liquidandfooter.liquid) and are included intheme.liquid. This modular approach makes it easier to maintain and update your site's layout.Placeholders for Page Content: Within
theme.liquid, you'll find the{{ content_for_layout }}placeholder. This is where the content of your specific templates (like product pages, collection pages, etc.) gets injected. So, whiletheme.liquidprovides the overall layout, the individual page content changes dynamically based on what the user is viewing.
Example:
Consider a basic example of how theme.liquid might look:
<!DOCTYPE html>
<html>
<head>
<!-- Head elements like title, meta tags, and CSS links go here -->
</head>
<body>
{% include 'header' %}
<!-- This includes the header snippet into your layout -->
{{ content_for_layout }}
<!-- This is where the specific content of each page is loaded -->
{% include 'footer' %}
<!-- This includes the footer snippet into your layout -->
</body>
</html>
In this structure:
The
{% include 'header' %}and{% include 'footer' %}tags pull in your site's header and footer, respectively.The
{{ content_for_layout }}is a placeholder where the content of individual pages (like a specific product page or the homepage) gets loaded dynamically.
Sections in Shopify Themes
Sections in Shopify are modular, customizable components used to build and structure the layout of your theme. They are particularly versatile on your store's homepage, where you can use them to feature products, display testimonials, and more, all with the capability of being adjusted directly in the Shopify theme editor.
Example of a Section:
<!-- File: sections/testimonial.liquid -->
<div class="testimonial-section">
<h2>{{ section.settings.title }}</h2>
<p>{{ section.settings.description }}</p>
</div>
Schema Tag for Sections
The schema tag within a section is crucial as it defines the customizable settings for that section, such as text inputs, color choices, or image selections. These settings are user-adjustable through the Shopify theme editor.
Example of a Schema Tag:
{% schema %}
{
"name": "Testimonial Section",
"settings": [
{
"type": "text",
"id": "title",
"label": "Title",
"default": "Customer Testimonials"
},
{
"type": "text",
"id": "description",
"label": "Description"
},
{
"type": "color",
"id": "background_color",
"label": "Background Color",
"default": "#ffffff"
}
]
}
{% endschema %}
Style Tag for Custom CSS
The style tag allows you to include custom CSS styles directly within your Liquid files. It's a convenient way to apply specific styles to your sections or other parts of the theme without needing an external CSS file.
Example of a Style Tag:
<style>
.testimonial-section {
background-color: {{ section.settings.background_color }};
padding: 20px;
}
</style>
By integrating these three elements in one file, we create a dynamic section where store owners can easily modify content and styling through the Shopify theme editor, without needing to edit the code directly. This approach enhances the flexibility and user-friendliness of your Shopify theme, making it adaptable to various needs and preferences.
Example custom-section.liquid file:
<!-- Section with integrated schema and style -->
<div class="custom-section">
<h2>{{ section.settings.title }}</h2>
<p>{{ section.settings.description }}</p>
</div>
{% schema %}
{
"name": "Custom Section",
"settings": [
{
"type": "text",
"id": "title",
"label": "Title",
"default": "Your Title Here"
},
{
"type": "text",
"id": "description",
"label": "Description",
"default": "Your description here."
},
{
"type": "color",
"id": "background_color",
"label": "Background Color",
"default": "#ffffff"
}
]
}
{% endschema %}
<style>
.custom-section {
background-color: {{ section.settings.background_color }};
padding: 20px;
}
</style>
In this example, the customizable title, description, and background color are defined in the schema and directly used in the HTML and CSS of the section. This integration allows for a flexible and user-friendly design experience in our Shopify store.
Conclusion
Remember, the key to success in Shopify theme development lies in understanding how these different elements work together to create a cohesive and functional user experience. Experiment with the examples, tweak them to fit your style, and don't be afraid to push the boundaries of what you can create with Shopify's flexible platform.
Thank you for joining me in this learning adventure. I hope these insights and code examples have illuminated the path to mastering Shopify theme customization. Stay curious, keep experimenting, and I look forward to seeing you in the next learning article, where we'll continue to explore and unravel the exciting world of Shopify development!