Re: Announcement bar shifting (Dawn Theme)

Announcement bar shifting (Dawn Theme)

Blossomsloft
Tourist
9 0 2

Hello,

Can someone please help?

The announcement bar is causing Cumulative Layout Shift (CLS) Issues. With every page change the announcement bar messages all shows up at once for a few seconds causing a shift. This is occurring in both the website and mobile. 

Https://blossomsloft.com/

 

Thanks in advance

 

 

Replies 3 (3)

rajimulislamjoy
Shopify Partner
388 39 69
Fix the Cumulative Layout Shift (CLS) issue caused by the announcement bar on your Shopify site, try setting a fixed height for the announcement bar in your CSS. This will prevent the layout from shifting when the messages load. Here's a quick CSS snippet you can add
 
.announcement-bar {
height: 50px; /* Adjust this value based on your design */
overflow: hidden;
}
Please don't forget to Like & Mark Solution to the post that helped you. Thanks!
If you'd like to support me, you can Buy Me a Coffee
Need a Shopify Designer or Dropshipping Expert ?
Hire us at WhatsApp! For Shopify Design | Shopify Customize | Dropshipping
Blossomsloft
Tourist
9 0 2

Thanks for your response, but that did not fix the issue.

 

 

nicolasdm
Shopify Partner
2 0 0

Hi! I fixed this by editing the file snippets/cart-drawer.liquid line 15 adding the position:fixed property because the absence of it pushes the ads bar down and then up as the sections are progressively loaded.

Find this line in cart-drawer.liquid

.drawer { visibility: hidden; }

and replace it with

.drawer { visibility: hidden; position:fixed}