Customizing Your Shopify Theme Using Liquid

Learn to customize your Shopify theme with Liquid, from basic edits to advanced features like dynamic content, and more.

medhavi

Published: December 4, 2024

Key takeaways

Understand the basics of Liquid, including objects, tags, and filters to dynamically customize your Shopify store.
Learn how to create reusable code snippets and optimize your theme for better performance.
Implement advanced customizations like conditional content, product loops, and personalized cart pages.

Overview of Shopify and Liquid

Shopify is an e-commerce platform that allows the user to build company webstores. With the many prebuilt theme varieties in Shopify, being able to customize your own theme will make a store unique and further personalize your brand. Such customizations have their key in Liquid-Shopify’s templating language. Liquid will enable shop owners and developers to create dynamic content, manipulate data, and control how it is to be shown in a Shopify theme.

In this blog, we will start with the basics of Shopify theme customization using Liquid by taking you through the main concepts supported by code snippets and real examples. Whether you’re a developer or a Shopify merchant looking to give an individual look to your online store, with the help of this guide, you’ll learn how you can customize your Shopify theme using Liquid.

1. Understanding Liquid

Liquid is an open-source templating language created by Shopify. It’s the glue between the data in your store and the HTML that presents that data, making it possible to render dynamic content with ease. Syntax in Liquid is comprised of HTML and CSS with a little bit of logic; thus, it is pretty easy to learn if you know any front-end web development.

Liquid includes:

Objects: These are variables that hold the contents of your store. Examples include products, collections and customer information. An example would be {{ product.title }} which returns the title of a product.
Tags: Tags control the logic of the flow in your templates. Conditions, loops, and filters can be used along with tags in Liquid. Example: {% if customer %}Hello, {{ customer.name }}{% endif %} prints out a greeting message to customers who are logged in.
Filters: Filters modify the output of objects. Given example, {{ product.price | money }} will format the product’s price and display it with a currency symbol.

2. Setup Up for Customization

Before going into the discussion about customization, you need to be fitted with how setup of theme files in Shopify and code editor which you will use. The very basic Shopify theme structure is composed of

Templates: These can be found in the folder called “Templates”. In this folder, a series of page-specific files define the layout. For instance, (e.g., product.liquid, index.liquid)
Sections: These are blocks of reusable content and are kept in the “Sections” folder. They come in very handy when you want to dynamically change a number of edits on other pages. (e.g., header.liquid, footer.liquid).
Snippets: Small, reusable code files stored in the “Snippets” folder. You can include snippets within other Liquid files using the {% include ‘snippet-name’ %} tag.
Assets: This includes stylesheets, JavaScripts, and images for your theme.

To edit a Shopify theme, you can either use the online Code Editor available in the Shopify admin or download theme files and use a local development environment with the Shopify CLI installation.

3. Making Basic Customizations with Liquid

Ok. Let’s get moving with a couple of basic customizations, just to get your store customized with your personal touch.

a. Adjust the Layout of the Front Page

You may want to customize your front page to show specific products, collections, or even promotion banners. For simplicity, now, let’s assume a basic example to show a featured product on your front page.

Open the index.liquid file of your theme and insert the next code so that you can have a featured product show up:

{% assign featured_product = all_products['your-product-handle'] %}

<div class="featured-product">
  <h2>Featured Product: {{ featured_product.title }}</h2>
  <img src="{{ featured_product.featured_image | img_url: 'large' }}" alt="{{ featured_product.title }}">
  <p>{{ featured_product.description }}</p>
  <a href="{{ featured_product.url }}">Shop Now</a>
</div>

{% assign featured_product = all_products['your-product-handle'] %}

<h2>Featured Product: {{ featured_product.title }}</h2>

<p>{{ featured_product.description }}</p>

</div>

The code above will assign the variable featured_product with a particular product from your store and then return its title, image, description, and a link to the product page. You need to replace ‘your-product-handle’ with the actual product handle of the product in your store.

b. Show Product Information

Liquid allows you to output a range of product information in your Shopify theme. By editing the product.liquidemplate you are able to change exactly how and where product information is shown.

Using the following code you can, for example, output the product information for title, price and variants:

<h1>{{ product.title }}</h1>
<p>{{ product.description }}</p>
<p>Price: {{ product.price | money }}</p>

{% for variant in product.variants %}
  <p>{{ variant.title }}: {{ variant.price | money }}</p>
{% endfor %}

<h1>{{ product.title }}</h1>

<p>{{ product.description }}</p>

<p>Price: {{ product.price | money }}</p>

{% for variant in product.variants %}

<p>{{ variant.title }}: {{ variant.price | money }}</p>

{% endfor %}

The above code will loop through all the available variants of the product and print its respective title and price.

4. Advanced Customizations Using Liquid

a. Conditionals for Selective Customizing

Conditionals in Liquid is how you dynamically show – or not show – certain blocks of content based on certain conditions. Suppose you want to customize your product page to show some message when a product is out of stock:

{% if product.available %}
  <p>This product is in stock and ready to ship!</p>
{% else %}
  <p>Sorry, this product is currently out of stock.</p>
{% endif %}

{% if product.available %}

<p>This product is in stock and ready to ship!</p>

{% else %}

<p>Sorry, this product is currently out of stock.</p>

{% endif %}

Similarly, you can apply conditionals on discounting or showing messages to only a certain group of customers; for example, wholesale customers.

b. Looping Through Collections and Products

With Liquid loops, you are able to show many products or collections dynamically within your Shopify store. Suppose you want to show some products from one particular collection; you can use the following code for it:

A single collection can be iterated with like so:

{% assign collection = collections['your-collection-handle'] %}

<h2>{{ collection.title }}</h2>
<ul>
  {% for product in collection.products %}
    <li>
      <a href="{{ product.url }}">{{ product.title }}</a> - {{ product.price | money }}
    </li>
  {% endfor %}
</ul>

{% assign collection = collections['your-collection-handle'] %}

<h2>{{ collection.title }}</h2>

<ul>

{% for product in collection.products %}

<li>

<a href="{{ product.url }}">{{ product.title }}</a> - {{ product.price | money }}

</li>

{% endfor %}

</ul>

This will output all products within the defined collection in a listed format. This would replace ‘your-collection-handle’with the handle of whatever collection you want.

c. Customizing the Cart Page

The cart page is a very important part of the customer journey – and Liquid can refresh it. You may want to display your own messages, or upsell suggestions if there are certain items in the cart.

{% if cart.item_count > 0 %}
  <p>You have {{ cart.item_count }} items in your cart.</p>
  <p>Subtotal: {{ cart.total_price | money }}</p>
  
  <h3>You might also like:</h3>
  <ul>
    {% for product in collections['related-products'].products %}
      <li>
        <a href="{{ product.url }}">{{ product.title }}</a> - {{ product.price | money }}
      </li>
    {% endfor %}
  </ul>
{% else %}
  <p>Your cart is empty.</p>
{% endif %}

{% if cart.item_count > 0 %}

<p>You have {{ cart.item_count }} items in your cart.</p>

<p>Subtotal: {{ cart.total_price | money }}</p>

<h3>You might also like:</h3>

<ul>

{% for product in collections['related-products'].products %}

<li>

<a href="{{ product.url }}">{{ product.title }}</a> - {{ product.price | money }}

</li>

{% endfor %}

</ul>

{% else %}

<p>Your cart is empty.</p>

{% endif %}

It would have shown the total number of items in the cart, the cart sub-total, and some upsell product suggestions from a certain collection named ‘related-products’.

5. Creating Reusable Code with Snippets

Liquid eliminates duplicated code because you can declare code snippets which you can reuse. For example, you can declare a snippet that renders a product card, then include that snippet in several templates.Create a new file in the Snippets folder like product-card.liquid, and paste the following code in:

<div class="product-card">
  <h3>{{ product.title }}</h3>
  <img src="{{ product.featured_image | img_url: 'medium' }}" alt="{{ product.title }}">
  <p>{{ product.price | money }}</p>
  <a href="{{ product.url }}">View Product</a>
</div>

<h3>{{ product.title }}</h3>

<p>{{ product.price | money }}</p>

<a href="{{ product.url }}">View Product</a>

</div>

You can now include this snippet throughout multiple templates, like your collection or homepage template, with:

{% for product in collection.products %}
  {% include 'product-card' %}
{% endfor %}

{% for product in collection.products %}

{% include 'product-card' %}

{% endfor %}

This helps you to keep cleaner and more organized code and will save you a lot of hassle when the time to update your theme comes.

6. Optimizing Your Shopify Theme for Performance

While working on Shopify theme customization, one should never forget about performance optimization of a theme. By using Liquid, caching, or image load optimizations, it’s possible to cut down the page load time.

For example, the img_url filter fetches the image of the right size for the device:

<img src="{{ product.featured_image | img_url: 'small' }}" alt="{{ product.title }}">

1	<img src="{{ product.featured_image \| img_url: 'small' }}" alt="{{ product.title }}">

Also, you can use the {% include %} tag but you should do so rarely because it may slow down page rendering considerably.

7. Debugging and Testing Your Liquid Code

When you work with Liquid, debugging is a must. Shopify has a few built-in utilities such as “theme preview” that allows you to test changes before going live. You can also use {{ debug }} for debugging Liquid variables.

Example

Let’s say you want to see what’s inside this variable. You’ll use

{{ product | json }}

1	{{ product \| json }}

This would output the product object in JSON and can be used for debugging when customizing.

Final Tips:

Always backup your theme before making significant changes.
Test new customizations on a duplicate theme to avoid breaking your live store.
Explore the Shopify Liquid documentation for more advanced use cases.

Conclusion

Liquid allows the Shopify store owner or developer to extend the functionality of a theme using dynamic and fully customized content. Learning to manipulate the Liquid objects, tags, and filters allows you to hone the Shopify store’s look and feel to your business’ specific needs.

It also allows Liquid to do everything from simple customizations-like changing the layout of the homepage-to more advanced techniques that show related products or customize the cart page. The more comfortable you get, the more advanced features you will know: show customer-specific content, filter products, and keep your store flexible and scalable.

This will be a good way to learn the Liquid language, which Shopify uses and, in turn, build that truly personalized ecommerce experience where functions and user experiences are better delivered.

To learn more about Shopify and its capabilities, check out their official website here.
For additional insightful articles and information, please reach out to us.

Get a Fast Estimate on Your Software
Development Project

Overview of Shopify and Liquid
1. Understanding Liquid
2. Setup Up for Customization
3. Making Basic Customizations with Liquid
a. Adjust the Layout of the Front Page
b. Show Product Information
4. Advanced Customizations Using Liquid
a. Conditionals for Selective Customizing
b. Looping Through Collections and Products
c. Customizing the Cart Page
5. Creating Reusable Code with Snippets
6. Optimizing Your Shopify Theme for Performance
7. Debugging and Testing Your Liquid Code
Final Tips:
Conclusion

See how efficient your engineering team really is?

Calculate For Free

Related Blogs

Maximizing E-Commerce Success with Shopify and Nosto

Delivering a personalized buying experience is a necessity for companies in the competitive landscape of e-commerce. Shopify with Nosto Integration enables…

View Article