Helpful Code Snippets from Shopify Liquid Performance Academy Course

If you’re a Shopify store owner, you probably care about how fast your website loads and how smooth the shopping experience is. A slow store can lead to lost customers and fewer sales. Good news: Shopify’s Liquid Performance Academy course shared some helpful code techniques that can make your store faster and more efficient.

Now, you might not be the one doing the coding but understanding what these code snippets do can help you talk to your developer (or even spot issues yourself). Here are some of the most useful examples from the course:

Top Code Snippets from Shopify Liquid Performance Academy Course

1. Lazy Loading Images (Better Speed)

Lazy loading means images below the fold only load when someone scrolls down. This helps pages load faster.

Before (not recommended):

<img src="{{ product.image | img_url: 'large' }}">

After (better for performance):

<img
  src="{{ product.image | image_url: width: 533 }}"
  loading="lazy"
  alt="{{ product.image.alt | escape }}"
>

2. Responsive Images (Look Great on All Devices)

This helps your site serve smaller image sizes to mobile devices and larger ones to desktops, making load time quicker.

<img
  srcset="{{ image | image_url: width: 165 }} 165w,
          {{ image | image_url: width: 360 }} 360w,
          {{ image | image_url }} {{ image.width }}w"
  sizes="(min-width: 990px) 50vw, 100vw"
/>

3. Only Load CSS When Needed

Instead of loading every style for every page, your theme can load styles only when necessary.

{%- unless skip_styles -%}
  {{ 'component-rating.css' | asset_url | stylesheet_tag }}
  {{ 'component-price.css' | asset_url | stylesheet_tag }}
{%- endunless -%}

4. Faster Calculations Without Loops

Rather than looping through every review to get an average rating, Liquid can calculate it in one line.

Before:

{% assign total = 0 %}
{% for review in product.reviews %}
  {% assign total = total | plus: review.rating %}
{% endfor %}

After:

{% assign total = product.reviews | map: 'rating' | sum %}

5. Reuse Price Components Across the Site

Instead of writing the same code over and over, your developer can create one price snippet and reuse it everywhere.

{% render 'price',
  product: card_product,
  price_class: '',
  show_compare_at_price: true
%}

6. Turn Features On or Off Easily

This allows features like price blocks or review sections to show only when you want them to.

{% if settings.show_price %}
  {% render 'price', product: card_product %}
{% endif %}

7. Use Shopify’s CDN for Assets

Instead of pulling files (like scripts or fonts) from other websites, host them on Shopify to load them faster.

Bad (loads from an external site):

<script src="https://example.com/script.js"></script>

Better (loads from Shopify):

<script src="{{ 'script.js' | asset_url }}" defer></script>

8. Automatically Optimised Images with image_tag

This generates responsive images with lazy loading built in—less code, better results.

{{ product.featured_image | image_url: width: 1080 | image_tag }}

9. Defer JavaScript Loading

Defer non-essential JavaScript so your site doesn’t wait to finish loading everything before displaying the page.

<script src="{{ 'bundle.js' | asset_url }}" defer></script>

10. Use Local Fonts Instead of External Ones

Fonts from Google Fonts can slow things down. Hosting them on Shopify is quicker.

<link href="{{ 'roboto.css' | asset_url }}" rel="stylesheet">

Great question! As a Shopify store owner, you might not be hands-on with code every day—but understanding how code snippets are implemented will help you communicate better with your developer or make minor edits yourself if you’re comfortable.

Here’s a simple, non-technical breakdown of how to implement Liquid code snippets in Shopify:

Where to Add Liquid Code in Shopify

1. Access the Theme Code

1. Go to your Shopify Admin
2. Click Online Store → Themes
3. Next to your active theme, click Actions → Edit code

2. Common Files You Might Edit

• theme.liquid – controls your entire store layout (like header/footer)
• product.liquid or product.json – used on product pages
• collection.liquid or collection.json – used on collection pages
• snippets/ folder – reusable pieces of code (great for performance snippets)
• sections/ folder – larger parts like product descriptions or slideshows
• assets/ – where scripts and stylesheets live

How to Add a New Snippet

If the code is reusable (like a custom price block or script), it’s best to create a snippet:

1. Go to the Snippets folder
2. Click Add a new snippet
3. Name it something like lazy-image.liquid
4. Paste your Liquid code (e.g. for lazy loading)
5. Save

Then insert it where needed using:

{% render 'lazy-image', product: product %}

How to Add Script or CSS Files

For things like loading JS or CSS from Shopify’s CDN:

1. Upload the file to the Assets folder
2. Use this in the theme.liquid file, ideally just before </head>:

{{ 'your-script.js' | asset_url | script_tag }}

Or defer it:

<script src="{{ 'your-script.js' | asset_url }}" defer></script>

Final Thoughts

Shopify’s Liquid Performance Academy course is a great resource for Shopify store owners who want to learn the basics of coding. If you plan to implement changes yourself, make sure to back up your store beforehand.

Want help checking your store’s performance and improve it later? We’re here if you need a hand.