Why is a Shopify section that only shows 4 images slowing down my whole site?
A homepage or collection section that only shows four product images can quietly loop through your entire catalog to build them. Here is how to find the loop and fix it.
What's going on
A merchant notices that one section of their homepage, usually something like a shop the look block, a you may also like row, or a small featured products grid that visually shows just four images, is taking far longer to load than it should or is dragging down their Shopify speed score. Digging into the theme code, or having a developer look, the cause turns out to be a loop over a collection or the full product catalog with no limit set. Even though the section only renders four images on screen, the theme still resolves every product in the referenced set to get there, and for a store with a few hundred or a few thousand products, that is a lot of unnecessary work happening on every page load.
This is a common leftover from theme customization: someone builds a small featured products block by copying a loop meant for a full collection listing and forgets to cap it, or a merchant points the block at a large collection where a small curated one was intended. The visible symptom, four images, hides the real cost, a full catalog scan, which is why it is easy to miss without checking the section's render time directly.
Why it happens
Shopify's theme templating resolves loops eagerly: a loop over a collection or the full catalog resolves every product object in that set before the section decides which ones to actually display. Without a limit in place, a loop meant to show four items still does the work of loading data for the whole set, including variants, tags, and metafields, even if only a title and image end up in the rendered page.
This usually happens because the section was adapted from a full collection listing template, or because it points at a large collection, or the entire catalog, instead of a small curated one. It is rarely visible on the storefront itself, since the page still only shows four images. It tends to show up as elevated render time for that section in a tool like Shopify's Theme Inspector, or as a slower page in Shopify's built-in speed report.
5 ways to fix it
Add a limit to the loop (fastest, no app needed)
Open the theme section file that builds the four-image block and find the loop that iterates over the collection or product list, for example a for loop over collection.products or all_products. Add a limit of 4 to that loop, or better, expose it as a number setting in the theme editor (default 4) so it can be adjusted without touching code. This stops Liquid from resolving every product in the referenced set just to display four images, and it is almost always the actual root cause rather than a rendering or JavaScript problem.
Point the loop at a small, curated source instead of the full catalog
If the section loops over a large collection or the whole catalog just to grab an image and a title, each iteration still resolves the full product object, including variants, tags, and metafields, even though only two fields are used. Where possible, point the block at a small dedicated collection or a short list of specific product handles sized to exactly four items, so Liquid never has a large set to iterate over in the first place. This is more of a code change than a quick toggle, so it is worth doing with a developer or an experienced theme customizer if you are not comfortable editing Liquid yourself.
Confirm images are lazy-loading and drop any leftover legacy scripts
Many current Online Store 2.0 themes, including Shopify's free Dawn theme, already lazy-load below-the-fold images automatically, without needing an app or extra JavaScript. Check the section's markup for an image forced to load eagerly, or an old data-src and scroll-listener script carried over from a previous theme; leftovers like that can fight with native lazy loading or force images to decode earlier than needed. Removing old lazy-load scripts and letting the theme handle it natively is free and can shave some load time on its own, though it will not fix the underlying over-fetch if the loop itself still processes the whole catalog.
Measure before and after so you know it actually helped
Use Shopify's Theme Inspector (a free Chrome extension) to see how long each section takes to render, and check the theme speed report in your Shopify admin under Online Store to confirm the change made a measurable difference. If one section consistently shows up as the slowest on the report, that confirms the loop is worth fixing rather than the slowdown being ordinary network variance.
Defer the whole section if it truly sits below the fold
If the four-image block appears well down the page and is not part of the initial view, you can defer loading the section itself, for instance by fetching its content only when it scrolls into view, rather than lazy-loading each image individually. This is a heavier change best handled by a developer, and it is only worth the extra complexity if the limit fix above does not fully resolve the slowdown on its own.
Bottom line
In nearly every case like this, the fix is one missing setting in the theme code: a limit on the loop that builds the section. Try that first, since it takes a developer or a confident merchant only minutes to add and usually resolves the slowdown completely. Reach for a performance-monitoring app only if you want ongoing visibility across many sections, not just a one-time fix to this one.
Browse the rest of the problem library, run a free storefront scan to catch issues like this automatically, or email us and we'll work out a custom solution for it.