"Pairs well with" section causes layout to shift (high CLS)

Technical Q&A
, , , ,

Topic summary

Issue: The “Pairs well with” (complementary products) block in a Shopify theme loads via JavaScript after initial page render, causing a noticeable delay (~1s) and a significant layout shift, which harms Core Web Vitals (CWV), specifically Cumulative Layout Shift (CLS).

Context: The problem occurs even in Shopify’s Dawn theme, indicating it’s not theme-specific. Google Search Console flags the CLS as an SEO issue.

Requests:

  • A method to prevent or minimize CLS, ideally by reserving space or using a placeholder/skeleton.
  • A way to detect in advance whether complementary products exist for the current product so a placeholder can be rendered while the request completes.

Status: No solution provided yet; the thread is seeking workarounds or fixes and remains open.

Summarized with AI on December 13. AI used: gpt-5.
2

Hi! I have the same issue. The complimentary block will be populated by JS after page load, which results in a huge CLS shift. Google shows this as an issue in the search console. Anybody knows how to solve this?