A user is experiencing a high Cumulative Layout Shift (CLS) score of 0.15 on their Shopify store (using Dawn theme), caused by the Covet.pics Instagram gallery app loading delay.
Proposed Solutions:
CSS min-height approach: Add min-height: calc(33.33vw + 28px); to .covet-pics-shopify-section in the Covet app’s Custom CSS section. One respondent reports this reduced their CLS to 0 and included a screenshot as proof.
Fixed-height placeholder method: Create a CSS wrapper (.covet-gallery-placeholder) with a fixed min-height (e.g., 500px) in the theme’s stylesheet, then wrap the Covet.pics embed code within this div in the relevant theme template files.
Automated tool: Consider using the Website Speedy app, which automates CLS/LCP optimizations including image placeholders and lazy loading.
Current Status:
The original poster attempted the first solution but reported it didn’t work, asking for clarification on implementation. The discussion remains open with no confirmed resolution yet.
Hi everyone,
I’m trying to fix a high Cumulative Layout Shift (CLS) score of 0.15 on my website phenomestraps.com. I’m using Dawn theme. I’ve found that covet.pics instagram gallery app loading time causes the layout shift.
Can you help me, how can I fix it? How can I add a fixed height spaceholder, or something like that?
Thanks in advance!
I wonder why app does not do it. The solution is to add the following code to the “Custom CSS” of the covet app section:
.covet-pics-shopify-section {
min-height: calc(33.33vw + 28px );
}
(not that fixed px height value would not help as section height changes with window width)
In my browser it gives CLS of 0:
Can you help me how to do that?
where should it be added? I’ve tried adding to the custom CSS, but didn’t help
Hello @akosbalog , You’re right to focus on your CLS score — even a 0.15 shift is quite noticeable and can negatively affect both user experience and SEO performance. Here are some steps to improve CLS score
Add a Fixed-Height Placeholder
Go to Online Store > Themes > Edit Code
Under Assets, open base.css or your main stylesheet and add:
.covet-gallery-placeholder {
min-height: 500px; /* Adjust based on expected gallery height */
width: 100%;
position: relative;
overflow: hidden;
}
In your theme.liquid (like main-product.liquid main-collection-product-grid.liquid), wrap the embed code:
{{ content_for_covetpics }}
Alternatively, you can also try Website Speedy, a Shopify app that automates CLS and LCP optimizations, including image placeholders, lazy loading, and font handling. It takes 5 minutes to set up with 14 14-day free trial.
