Optimizing Shopify Storefronts with Custom Liquid Filters

Optimizing Shopify Storefronts with Custom Liquid Filters

Fazle Rahman's photo
Fazle Rahman
·

4 min read

In this article, we’ll dive into how to optimize your Shopify storefront by creating custom Liquid filters. While Shopify offers a wide array of built-in filters, there are scenarios where custom filters can dramatically improve performance and flexibility, especially when handling complex data structures or making optimizations for large-scale stores.

Why Use Custom Liquid Filters?

Custom Liquid filters allow you to:

  • Create reusable logic to handle specific data manipulation tasks.

  • Reduce the complexity of your Liquid templates.

  • Improve page speed by handling data directly in Liquid instead of relying on JavaScript manipulations.

Prerequisites

  • Familiarity with Liquid templating language.

  • Experience working with a Shopify store’s theme.

  • A Shopify Partner account or a development store for testing.

Let’s get started by exploring how to build a custom filter that formats and optimizes product price data.

Step 1: Create a Basic Custom Filter

We'll start by creating a simple custom filter that formats product prices with custom logic. In Shopify, Liquid comes with built-in filters like money, but we can enhance this functionality.

To create a custom filter, you'll need to edit your theme’s theme.liquid or create a new filter file in the snippets folder.

Code Example: Basic Price Formatter

Let’s say we want a custom filter to format prices in a more user-friendly way, including a “.00” suffix for integer prices.

  1. Add Custom Filter in Theme's snippets/custom-filters.liquid:
{% comment %}
  Custom filter to format product prices
{% endcomment %}

{% assign custom_filters = {} %}

{% capture custom_price_formatter %}
  {{ price | divided_by: 100 | money_without_trailing_zeros }}
{% endcapture %}

{% assign custom_filters['format_price'] = custom_price_formatter %}
  1. Use the Custom Filter in Your Product Template:
<div class="product-price">
  {{ product.price | format_price }}
</div>

In this example, we’re ensuring that all product prices are formatted with a specific format that strips off any trailing decimals for even prices.

Step 2: Creating a Complex Filter for Bulk Product Data

In more advanced use cases, you may want to manipulate bulk product data, such as generating summaries of large product collections or performing complex calculations on pricing.

Let’s build a custom Liquid filter that calculates the discount percentage for a product based on its compare-at price and sale price.

Code Example: Discount Percentage Filter

  1. Create the Filter Logic in snippets/custom-filters.liquid:
{% comment %}
  Custom filter to calculate discount percentage
{% endcomment %}

{% capture custom_discount_calculator %}
  {% if product.compare_at_price > product.price %}
    {{ (product.compare_at_price - product.price) | divided_by: product.compare_at_price | times: 100 | round }}%
  {% else %}
    0%
  {% endif %}
{% endcapture %}

{% assign custom_filters['calculate_discount'] = custom_discount_calculator %}
  1. Use the Discount Filter in a Product Grid Template:
<div class="product-grid-item">
  <h2>{{ product.title }}</h2>
  <p>Original Price: {{ product.compare_at_price | money }}</p>
  <p>Sale Price: {{ product.price | money }}</p>
  <p>Discount: {{ product | calculate_discount }}</p>
</div>

With this custom filter, you can dynamically calculate and display discount percentages for products. This is especially useful for stores running frequent promotions or sales.

Step 3: Performance Optimization

Now that we have custom filters in place, it’s essential to focus on performance. Shopify’s Liquid rendering happens server-side, so the logic you implement can impact your store’s speed. Here are a few tips to ensure that your custom filters are optimized:

  • Avoid nested logic inside custom filters. Keep calculations simple and reusable.

  • Cache frequently used data using Shopify’s assign or capture tags to minimize redundant calculations.

  • Test on a large product catalog to ensure that your filters scale well under heavy loads.

Code Example: Optimized Filter with Caching

{% capture discount_value %}
  {{ product.compare_at_price | minus: product.price | divided_by: product.compare_at_price | times: 100 | round }}%
{% endcapture %}

{% assign cached_discount = discount_value %}

<p>Discount: {{ cached_discount }}</p>

By caching the result of the discount calculation, we avoid recalculating the same value multiple times, which can be a performance bottleneck for stores with large catalogs.

Conclusion

Custom Liquid filters allow you to extend the functionality of your Shopify storefront, creating a more optimized and personalized experience for your customers. Whether you're handling bulk data or formatting prices, Liquid filters provide the flexibility and performance necessary for large-scale stores.

By using caching techniques and keeping your filters efficient, you can ensure that your store performs well, even under high traffic.

Ready to enhance your storefront with custom Liquid filters? Dive into your theme and start experimenting!

liquid filtersshopify