The Liquid loop that's quietly slowing down your Shopify store

The most common cause of slow Liquid rendering is a loop inside a loop: a collection loop, a tags loop and a blocks loop multiply into thousands of iterations for one product grid. Do the expensive work once before the loop, look values up inside it, and use limit and break to stop early.

Most Shopify speed advice is about images and apps. Those matter. But some stores are slow before the browser gets anything, because the theme takes too long to render on Shopify's servers.

What does the slow pattern look like?

{%- for product in collection.products -%}
  {%- for tag in product.tags -%}
    {%- for block in section.blocks -%}
      {%- if block.settings.tag == tag -%}
        {% render 'badge', text: block.settings.label %}
      {%- endif -%}
    {%- endfor -%}
  {%- endfor -%}
{%- endfor -%}

Fifty products × ten tags × a dozen blocks is 6,000 iterations for one grid. It reads fine and works fine, and it's slow.

What should you write instead?

Do the expensive work once, outside the loop, then look things up inside it:

{%- liquid
  assign badge_tags = ''
  for block in section.blocks
    assign badge_tags = badge_tags | append: block.settings.tag | append: ','
  endfor
-%}

{%- for product in collection.products -%}
  {%- for tag in product.tags -%}
    {%- assign needle = tag | append: ',' -%}
    {%- if badge_tags contains needle -%}
      {% render 'badge', text: tag %}
      {%- break -%}
    {%- endif -%}
  {%- endfor -%}
{%- endfor -%}

Same result, a fraction of the work, and break stops as soon as there's a match.

Which other loop habits slow rendering?

• Filters inside loops. | where, | sort and | map on a large array inside a loop run every iteration. Run them once before the loop and assign the result.
• No limit. If a section shows 4 products, write for product in collection.products limit: 4.
• include instead of render. include is deprecated. render is isolated and easier for Shopify to optimise.
• Looping a whole collection to find one product. Use all_products['handle'] for a known handle instead.

Which Shopify limits should you know about?

Some slowness isn't a loop at all but a limit being hit quietly.

• all_products is capped at 20 lookups per page. After that, lookups return nothing. It's fine for a "featured product" block; it's the wrong tool for building a grid.
• collection.products is paginated. Without paginate, a collection loop only sees the first 50 products, and with paginate you can go up to 250 per page. If a section seems to be missing products, this is usually why.
• product.variants loops multiply fast. A grid of 50 products, each looping its variants to find a colour swatch, is 50 × (up to 100) iterations before anything is rendered. Look up what you need with product.selected_or_first_available_variant or a metafield instead.
• {% render %} inside a loop is a fresh file each time. Fine for a small badge; expensive for a snippet that itself loops over the product's tags or metafields.

A checklist before you ship a section

• Every loop that shows a fixed number of items has a limit.
• Filters (where, sort, map) run once, above the loop, into an assign.
• Nothing is looked up inside the loop that could have been looked up before it.
• A found match uses break.
• render, not include.
• The section's render time in Theme Inspector is measured before and after, so you know the change helped instead of hoping it did.

How do you find the slow part?

Install the Shopify Theme Inspector for Chrome extension. It shows a flame graph of how long each Liquid file and section takes to render, so you fix the slowest thing first instead of guessing.

If your store feels slow and you're not sure why, I do Shopify speed work.