Shopify Question posted in
The Shopify help center can be found here.

How to Solve Cumulative Layout Shift Caused by Announcement Bar? – Shopify

My eCommerce site (Shopify) has an announcement bar that pushes the rest of the page content down, causing CLS issues.

I’ve been searching through forums and articles for a while but all of the advice about solving CLS is super generic ("Make sure not to have pop-ups!") with a lack of guides for actual implementation.

The height of the announcement bar is a fixed 46 px on all devices, so this theoretically should be easy to fix by somehow assigning room for it in the theme files, but I can’t figure out how to do so.

Tags:

2

Answers


  1. 0

    This should do the trick! add it at the end of your css stylings.

    .announcement-bar{
  position: absolute !important;
  height: 25px;
  width: 100%;
  font-size: small;
}
.announcement-bar__message{
 padding:0 !important;
  
}
    Login or Signup to reply.
  2. 0

    Are you sure it’s the announcement bar? I had similar issue but it was the admin bar which only shows if you are logged in (I assume as admin) which was causing biggest CLS. When tested in a private browser, no issue

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search