How to fix cwv cls on Shopify

Steps for Shopify

1. Images: In Online Store > Themes > Edit Code, open the Liquid template(s) for your sections (e.g. sections/image-banner.liquid, snippets/product-image.liquid). Find every <img> tag and ensure width='{{ image.width }}' height='{{ image.height }}' attributes are set. Dawn and other modern Shopify themes include these by default — verify yours does too.
2. Responsive aspect ratio: In your theme's CSS file (assets/theme.css or base.css), add .media { aspect-ratio: var(--ratio-width) / var(--ratio-height); overflow: hidden; } and make sure image wrappers use this class.
3. Announcement bar: In the Theme Customizer (Customize > Announcement Bar section), the bar is rendered server-side and reserves space by default in modern themes. If you added a third-party announcement bar via a Script Tag or app, replace it with a theme section so the height is pre-reserved.
4. Fonts: In Online Store > Themes > Edit Code > assets/base.css (or theme.css), find @font-face rules and add font-display: swap;. If using Google Fonts loaded via a <link> tag, add &display=swap to the Google Fonts URL in theme.liquid.
5. Third-party widgets and chat: Go to Online Store > Themes > Edit Code > layout/theme.liquid. Move any injected widget <script> tags to just before </body> so they load last and cannot shift above-the-fold content. Wrap each widget's mount point in a min-height container.
6. Cookie/consent banners: If using a Shopify app for GDPR consent, check the app's settings for 'banner position' and set it to a bottom-fixed bar. Apps like Pandectes GDPR or Consentmo have this option in their app dashboard.

<img
  src="product-photo.jpg"
  alt="Red running shoes"
  width="800"
  height="800"
  style="aspect-ratio: 1/1; width: 100%; height: auto;"
>

/* CSS: reserve space for an ad slot before it loads */
.ad-container {
  min-height: 90px;   /* match your largest ad unit height */
  width: 100%;
}

/* CSS: prevent font-swap layout shift */
@font-face {
  font-family: 'MyFont';
  src: url('/fonts/myfont.woff2') format('woff2');
  font-display: swap;
}

What is cwv cls?

Cumulative Layout Shift (CLS) measures how much the visible content on your page unexpectedly moves while it is loading. Every time an image pops in and pushes a button out of reach, a font swaps and reflowing text, or a banner ad shoves your product description down the page, that counts as a layout shift. Google's "good" threshold is a CLS score below 0.1; a score of 1.05 — as in the example above — means content is shifting dramatically, which is easily noticeable to shoppers. The most common causes are images and videos without explicit width/height attributes, web fonts that change character sizes when they load, third-party widgets (chat bubbles, review carousels, cookie banners, email pop-ups) injected above existing content, and dynamically inserted banners or promotional bars.

CLS is one of Google's three Core Web Vitals, which are a direct ranking signal in Google Search — a poor score can push you below competitors even if your content is better. Beyond rankings, layout shift is a serious conversion killer: a shopper who taps "Add to Cart" while the page is still loading can accidentally hit the wrong element, leading to frustration and cart abandonment. Google's own research links poor page experience scores to higher bounce rates and lower revenue per session. On mobile devices — where Google indexes first — layout shift is even more pronounced because screens are small and a single banner inserting itself at the top can move everything else off screen.

See the complete Cwv cls guide for every platform and the full background.