How to fix cwv cls on Yotpo

Steps for Yotpo

1. Identify all Yotpo widgets on your storefront (Reviews Widget, Star Ratings, UGC/Visual Marketing gallery, Q&A widget) — these are the most common sources of CLS because they inject content after the initial page render.
2. For each Yotpo Reviews or Star Rating widget container in your theme templates (e.g. product.liquid or product-template.liquid), add an explicit min-height CSS rule that matches the rendered widget height — for example: `.yotpo.yotpo-main-widget { min-height: 600px; }` and `.yotpo-bottomline { min-height: 28px; }` — so the browser reserves space before the Yotpo script loads.
3. If you use the Yotpo Visual UGC / Shoppable Gallery widget, wrap its embed `<div>` in a fixed-aspect-ratio container (e.g. `aspect-ratio: 1/1` or a padding-top percentage trick) and set `overflow: hidden` so the gallery grid does not reflow when images lazy-load in.
4. In the Yotpo Admin (yotpo.com → Account Settings → Widgets), check whether 'Lazy Load' or deferred widget initialisation is enabled; if the widget script is deferred, ensure the placeholder `<div>` in your theme already carries the reserved dimensions before the script executes.
5. Load your product page in Chrome DevTools → Performance tab, record a page load, and confirm the Yotpo widget containers no longer cause layout shift events (LS rectangles) in the Experience section; adjust the min-height / aspect-ratio values if residual shifts remain.
6. Deploy the CSS changes via your theme editor (Online Store → Themes → Edit Code → assets/theme.css or your custom CSS file) and re-run a Core Web Vitals test (e.g. PageSpeed Insights) to verify the CLS score has improved.

What is cwv cls?

Cumulative Layout Shift (CLS) measures how much page content unexpectedly moves around while a visitor is looking at it. Every time an image pops in and shoves text down, a banner slides in from a cookie notice, or a font swap causes a paragraph to reflow, that counts as a layout shift. Google adds all those shifts together into a single score; anything above 0.1 is considered "needs improvement," and above 0.25 is "poor." A score of 1.35 (like the example above) means the page is shifting dramatically — visitors are misclicking, losing their place, and bouncing before they buy.

CLS is one of Google's three Core Web Vitals and is a direct ranking signal in Google Search — a poor score actively suppresses your position in search results, reducing organic traffic and revenue. On mobile, where most ecommerce shopping happens, layout shifts are especially jarring: a customer tapping "Add to Cart" can accidentally tap a shifted link instead, killing the conversion. High CLS also signals a low-quality page experience, which increases bounce rate and reduces the trust visitors place in your store. Google's own data shows that sites meeting Core Web Vitals thresholds see measurably better business outcomes than those that don't.

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