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 add a spacer to your site and then to choose the overlapping placement option for the QAB. 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.
First, you'll need to place a spacer in your theme.
To do that, you'll need to get into the code editing space. For that click on:
1 ) Online Store
2) Themes
3) Then click Actions drop down(on the right side of the page) and click 'Edit Code'
Next click on theme.liquid
Scroll down to the opening <body> tag. You can do a cmd-F / ctrl-F to find it quickly.
Just inside the <body> section, place this code:
<div id="spacer"> </div>
Next, scroll up slightly to the closing of the </head> section.
Just inside that section, before it closes, paste this styling code:
<style>
#spacer{
height:44px;
background-color:#F5F5F5;
}
@media only screen and (max-width: 700px) {
#spacer{
height: 33px;
}
}
</style>
Like so:
The background-color can be adjusted to match your header's colour. The height can be adjusted to match the size of the bar created according to your font size and padding. 44px covers most bars.
Next, go into the QAB settings and set the placement to cover the top of the page (effectively covering the spacer that we've just created).
You can also select the option below that to have the bar stay on screen while scrolling.
What this has done is put space into the main Shopify content so that the space loads right away along with the rest of the page, and when the bar loads it will simply cover that space, avoiding the shift.
Test your site to see how it performs.
There are two issues that may arise:
1) Some themes, when in mobile view, place the spacer we've just created underneath the header:
2)Some themes have the header disappear when scrolling down but reappear when scrolling up. This results in the bar covering half the header in that case.
There is an adjustment to try if either of those cases happen. Remove <div id="spacer"> </div> from the theme.liquid file and instead paste in into the very top of the header.liquid file.
This might help fix the issue.
There are, however, some themes that will still place the spacer underneath the header in mobile view. A more unique fix would be needed for this than can be provided in a general guide.
If the message in your bar is long, it might need 1 line on some screens and 2 lines on others. If you find yourself in this situation, there are 2 things to consider. Consider placing <br> tags to break up your message into 2 lines. This will lessen the likelihood of this happening.
For instance a long line without breaks might present like this:
If your spacer was planned for one line but the bar takes up 2 lines, you'll end up using more space than was provided and cover your header. This can be avoided if you plan for 2 lines and prepare a spacer big enough for it.
By placing a <br>, we can choose to force the message to be two lines and choose where the break happens.
This would become:
By controlling where the break is, it'll be less likely that any shift will happen.
The other thing is to place this code into the custom code section of the app:
<script>
function getDetails(){
let barHeight = document.querySelector("#qab_bar").offsetHeight;
let spacer = document.querySelector("#spacer");
checkSize(barHeight);
}
function newSpace(h){
let str = ""
str += h;
str += "px";
spacer.style.height = str;
}
function checkSize(h){
if (h > document.querySelector("#spacer").offsetHeight + 5) {
newSpace(h);
}
}
window.onload = getDetails();
</script>
Like so:
What this does, is when the page loads, the spacer height will be compared with the bar height. If the bar ended up needing 2 lines, it will exceed the space provided by the spacer. This code will adjust the spacer height to provide enough space. This will affect the CLS, but the alternative is having the header be covered. The best fix is to avoid messages that take up multiple lines on some screens and not on others, using the <br> tags from option 1. This option can be seen as a backup plan that should only cause a shift if the bar was going to cover up the header.
Comments
0 comments
Article is closed for comments.