Fixing Layout Shift on a Shopify Store

Where Shopify stores usually shift

Shopify pages are rendered from Liquid templates on Shopify's servers, so the first HTML is usually complete. The shifts come from what arrives afterwards: images, fonts, app scripts and sections fetched by the theme's JavaScript. Test at least one page of each template type, because they shift for different reasons.

Basket drawers and "added to cart" notifications that push content are covered in the cart and notification banner guide, so this guide concentrates on the rest.

Testing safely and isolating apps

Never experiment on the published theme. In the admin, go to Online Store, then Themes, and duplicate the live theme. Preview the copy and share its preview link with anyone helping you. All the changes below can be tested there first.

1. Run the CLS Debugger on a representative home, collection and product page and note the moved elements and their scores.
2. Record a throttled load in Chrome DevTools' Performance panel on a phone-sized viewport, with the cache disabled, and scroll the whole page. Product pages often shift further down, where reviews and recommendations load.
3. Switch off app embeds in the duplicate theme. In the theme editor, open the App embeds panel and turn them off one at a time, re-testing after each. If CLS drops when a particular embed is off, that app is involved.
4. Look for leftover app code. Older apps, and some that have since been uninstalled, added snippets directly into theme.liquid or product templates. Search the theme code for {% render %} tags and script tags that reference apps you no longer use.

For real-visitor data, use the Core Web Vitals report in Search Console, which groups similar URLs, and the web performance reports in the Shopify admin analytics section, which show how the store performs for real sessions. Both lag behind changes by some weeks.

Product images and galleries

Let the image_tag filter do the work

Current Shopify themes output images with the image_tag filter, which writes width and height attributes from the image's real dimensions automatically. Older themes, and custom sections copied from tutorials, often build the tag by hand with only a src. Replace those with the filter:

{{ product.featured_image
   | image_url: width: 900
   | image_tag:
       loading: 'lazy',
       widths: '360, 540, 720, 900',
       sizes: '(min-width: 990px) 25vw, 50vw',
       alt: product.featured_image.alt }}

If you must write the tag by hand, add width="{{ image.width }}" and height="{{ image.height }}" and let CSS set height: auto. Do not lazy-load the first large image on the page; that helps LCP and does not affect CLS either way once dimensions are present.

Product cards with photos of different shapes

If one product is photographed square and the next is portrait, the cards in a collection grid are different heights and rows can reflow as images load. Many themes have an image ratio setting for product cards, with options such as adapt to image, portrait or square. A fixed ratio makes every card the same height before any image arrives, with images cropped or letterboxed to fit. "Adapt to image" follows each photo's own shape, which is only stable if all your photos share one.

Galleries that change height

On product pages, a gallery that sizes itself to the current image grows or shrinks when the shopper swipes or picks a variant with a differently shaped photo. The change right after a tap is exempt from CLS, but if the new image loads slowly and the gallery resizes more than half a second later, it counts. Give the main media frame a fixed aspect ratio in the theme's CSS and use object-fit: contain so every image fits the same box. Better still, photograph products at one consistent ratio.

Apps, app blocks and payment buttons

Apps add content to a store in three main ways, and each needs a slightly different fix.

• App blocks are placed by you in the theme editor, inside a section. The block's position is known, so you can reserve its space.
• App embeds are switched on in the App embeds panel and inject content through a script, often in positions the app chooses.
• Legacy code is added to theme files by an app or its support team, or loaded as a script tag. It is the hardest to control and often outlives the app.

Review stars on product cards, buy-now-pay-later messages, trust badges, stock counters, size guide links and "frequently bought together" boxes all appear after the page has painted. Each one pushes the content below it by its own height. Wrap app blocks in a container with a min-height equal to the loaded widget, using the Custom CSS option that many current themes offer in section settings, or your theme's stylesheet:

/* In the product information section's Custom CSS, or assets/base.css */
.product__info-container .shopify-app-block { min-height: 24px; }
.card__information .rating-wrapper { min-height: 20px; }   /* stars on cards */

Class names differ by theme and app; inspect the loaded widget in DevTools to find the right selector and its real height on mobile and desktop.

Accelerated checkout and payment messages

The accelerated checkout buttons output by {{ form | payment_button }} are drawn by a Shopify script after load, and which wallets appear depends on the shopper's device and region. Instalment messaging from {{ form | payment_terms }} also loads asynchronously. Give their containers a minimum height in the theme CSS so the add-to-cart area does not jump. Check the loaded height on an iPhone and an Android phone, as the buttons shown can differ.

Sections the theme loads later

Some sections are not in the first HTML. Product recommendations are the classic case: themes such as Dawn render an empty container, wait until it is near the screen, then fetch the finished section from Shopify and insert it. Complementary products, recently viewed items and some predictive search panels work the same way. When the content arrives, anything below it, often the footer or a newsletter block, moves.

Because the section only loads when the shopper scrolls near it, the shift happens mid-scroll, which still counts. Reserve its height:

product-recommendations { display: block; min-height: 420px; }
@media (max-width: 749px) {
  product-recommendations { min-height: 760px; }
}

Measure the loaded section at each breakpoint and use those numbers. If a product sometimes has no recommendations, the theme may remove the section, which leaves a gap closing; hiding the section with a CSS rule when empty is fine as long as that happens before it scrolls into view. Changing the recommendations to render in Liquid rather than through a fetch removes the shift entirely, at the cost of slightly slower first HTML.

Theme fonts

Fonts chosen in Theme settings, under Typography, come from Shopify's font library and are usually written into the page in layout/theme.liquid with the font_face filter:

{{ settings.type_body_font | font_face: font_display: 'swap' }}

With swap, text is drawn in a system font and redrawn when the theme font arrives, which reflows headings and paragraphs if the two fonts differ in size. You have three practical options:

• Change font_display to optional for the body font, so a font that is not ready almost immediately is kept for the next page view rather than swapped in.
• Preload the body font so it is more likely to arrive before first paint: <link rel="preload" as="font" type="font/woff2" href="{{ settings.type_body_font | font_url }}" crossorigin> in the head, for one or two faces only.
• Use a system font for body text. The theme font picker includes system options that need no download at all, which removes the problem entirely.

Each extra weight you enable, such as bold body text or a separate heading weight, is another file. Keep the number low. The web fonts guide explains how to tune a fallback font so the swap barely moves anything.

The fix, step by step

Keeping the store stable

• Test every new app on a duplicate theme with the CLS Debugger before enabling it on the live theme.
• Record your custom CSS changes. Theme updates can overwrite edited files. Keep a note of each reserved height and where it lives, or keep them in a separate stylesheet you add back after updating.
• Agree an image standard for new products: one ratio and a minimum size, so cards and galleries stay uniform.
• Review app embeds occasionally and switch off any the store no longer uses.

Store-wide speed beyond layout shift is covered in Core Web Vitals on Shopify.