How can I avoid CLS(Cumulative Layout Shift) (QAB)

NOTE: This is a general guide and may not be applicable to all themes. It is provided as a tool for merchants and their developers to try and overcome CLS issues.

You may have noticed that when the Quick Announcement Bar loads, it causes the page to shift down slightly to accommodate the space it needs to display.

The reason for this is due to the design Shopify has chosen to load pages. First, the core Shopify content loads, after that, the apps are loaded in the order they were installed. So it's only after the page has loaded that the QAB bar is inserted, causing the layout shift. 

If you are looking to avoid this shift, a possible solution is to insert the bar manually into your theme and include styling code to make space for the bar's contents.

Given that themes are all designed a little differently, it's difficult to create a step by step guide for all themes, but hopefully this guide for Dawn can get you pretty close.

Before we get into theme editing, be sure the bar is set to manual placement in the bar configurations:

To begin, you'll need to get into the code editing space. For that click on: 

1 ) Online Store

2) Themes

3) Then click the ellipses drop down(on the right side of the page)

4) Click 'Edit Code'

​​​​​​

From here, it depends if you want the bar to scroll with the page or not.

To keep the bar at the top (non-scrolling / non-sticky):

Click on theme.liquid found inside the Layout folder.

From here you need to find the top of the page. A line above the header or the announcement bar is usually a good place to begin.

In that area, paste this code:

<div id="qab_placeholder">&nbsp;</div> 
<style>
@media only screen and (max-width: 768px) {
#qab_placeholder{
height: 33.5px;
}
}
@media only screen and (min-width: 769px){
#qab_placeholder{
height: 44px;
}
}
</style>

Like so:

This sets up the theme to create a space that the bar will fill when it's loaded. If the bar is a little bigger or smaller, the space will adjust. But you can edit the sizes from 33.5 or 44 to whatever fits the bar that you've designed. 33.5 is for mobile view and 44 is for desktop.

Save the changes to the theme and preview it to see how it looks.

To keep the bar at the top (scrolling / sticky):

Inside the Sections folder you'll find the file header.liquid. Open that file.

Add some blank lines to the top of the file:

Then at the very top, paste in this code:

<div id="qab_placeholder">&nbsp;</div> 
<style>
@media only screen and (max-width: 768px) {
#qab_placeholder{
height: 33.5px;
}
}
@media only screen and (min-width: 769px){
#qab_placeholder{
height: 44px;
}
}
</style>

Like so:

This sets up the theme to create a space that the bar will fill when it's loaded. If the bar is a little bigger or smaller, the space will adjust. But you can edit the sizes from 33.5 or 44 to whatever fits the bar that you've designed. 33.5 is for mobile view and 44 is for desktop.

Save the changes to the theme and preview it to see how it looks.