How can I avoid Cumulative Layout Shift (CLS) - 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 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 use manual placement. This may not work for all themes and it requires some familiarity with coding, but it's worth a shot if you are concerned about CLS. As always, it's recommended to duplicate your theme before making alterations.

Manual placement works by inserting placeholder code. The code for QAB is:

<div id="qab_placeholder"></div>​

So when that line of code is in the theme code and the bar is set to manual placement in the app configuration like so:

the app looks for that code and replaces it with the bar.

One thing we can do is add styling to the placeholder code so that it creates space that the bar will fill, even before it's loaded. This is what can eliminate or reduce the CLS.

Here's the same placeholder but with styling to create space:

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

Now comes the tricky part: where to place the placeholder. This varies depending on theme design.

In themes like Dawn, Debut, Sense, Express, Brooklyn and Supply, you can insert the placeholder code in the theme.liquid file above the header section.

Similar for Crave theme, but instead of {% section 'header' %} it has {{ content_for_header }}:

If, in the bar configuration, you opt to make the bar scroll with the page:

there may be some unintended results. For instance in the Dawn theme, when the header is set to sticky, it doesn't scroll with the page while scrolling down, but appears when scrolling up. If you place the placeholder code in theme.liquid, you'll see the bar cover the header. To fix this, you'll need to insert the placeholder code into the header.liquid file (in the Sections folder) instead of theme.liquid

Some themes are trickier to edit and you won't be able to do it from the theme.liquid file. You may have to go into the header.liquid file and paste the code at the top of the page as in the example just above. Unique theme designs vary too much to cover in a guide. But hopefully this can get you started down the right path.

If you have any further questions, please contact us for support.