If you run a Shopify site, you may not be aware of subtle little gotchas that may be impacting your user experience and search rankings.

Layout shift is one of those gotchas that can lurk in your Shopify theme or happen as a consequence of adding content or third party apps to your experience.

The good news is layout shift can be easy to fix so long as you catch it!

What is layout shift?

Layout shift means exactly what it sounds like – the movement of page elements as your page loads or visitors interact with your content.

When stuff on screen moves around unexpectedly it can really annoy your visitors. Sometimes layout shifts cause users to unwittingly tap the wrong thing, like open a modal window or even add an unwanted item to cart!

What causes layout shift on Shopify sites?

The most common reasons “shift happens” on Shopify sites include:

• Fonts that switch out as the page loads
• Images missing height and width attributes
• Cookie banners that slide in from the top
• Animated content using improper CSS
• Late-loading CSS code
• Late-injecting JavaScript and third party app content

Some shift can even be “invisible,” meaning you won’t notice it on the front end but Google can spot it in your code.

For example, a cookie banner or email widget that uses outdated CSS like “top” or “bottom” position attributes. This causes each animated frame to count as its own layout shift!

How does Cumulative Layout Shift (CLS) impact my Google ranking?

Google’s obsessed with user experience and wants to send its searchers to great sites. That’s why Cumulative Layout Shift is one of its 3 Core Web Vitals it uses as ranking factors in its search algorithm.

Each layout shift Google detects on your page is given a weight of severity, for example a banner image shift may score 0.02.

Cumulative Layout Shift sums up all the individual shifts on a given page. If they add up to more than 0.1, the URL falls out of the perfect “green” field for acceptable CLS.

It’s possible but not required to eliminate 100% of layout shifts as a page loads. As you can see above, you can still pass CLS with a minor shift or two.

How can I check for layout shift on my Shopify site?

There are several ways, but the simplest for non-technical users is through Google’s free Page Speed Insights tool. Just enter your URL and watch the diagnostics roll in.

You’ll see rolling data from real Chrome users across a broad range of devices and connection speeds reported as Core Web Vital metrics.

Scroll down to the “Avoid large layout shifts” tab and you’ll see details on each offender in question.

In this case, the only layout shift is the email pop up modal, but it adds up to >0.1 at 0.125, causing the page to fail this assessment.

For most assets Google flags for layout shift, you’ll find a status message that explains the issue.

If it’s CSS or JavaScript that caused the shift, you’ll see “A late network request adjusted the page layout.” Check the left side detail for clues if it’s JavaScript (.js) or CSS.

If it’s code from a 3rd party app, you may see “Injected iframe.”

You may also see “A late network request adjusted the page layout” for 3rd party apps that inject app block content, like star rating detail that appears with your Product Title.

If your cookie banner or other promo widget is not implemented well, you won’t get a status code but you’ll be able to detect it in the element preview. Look for keyword clues!

If any of your images are missing height and width attributes, you’ll see “Media element lacking an explicit size.”

If you have enough images missing these attributes, you’ll get a red triangle or orange square with the related tab:

Remember, your Core Web Vitals are calculated for individual URLs. If your particular URL doesn’t have a lot of Chrome visitors, Google may display your “Origin” metrics (average across your domain) instead.

Diagnosing issues on every single URL is time consuming, so you should start with your highest trafficked page. The good news is fixing template and app-related issues will help CLS score across all pages affected by the issue.

Can my Shopify theme cause layout shift?

Yes, your theme itself can be responsible for layout shift in a few ways.

If it’s an older theme, developers likely designed it for an older version of Shopify, older browsers and web standards that are no longer optimal.

For example, they may be using poor or outdated CSS, overusing JavaScript and JQuery, or have unoptimized font loading.

The beauty of modern Shopify themes is they’re highly customizable. You can place sections wherever you want, and add custom coded sections and app blocks into your theme to really make it yours.

Because theme developers can’t predict where you’ll ultimately use these sections in your layout (above or below the fold, and relative to other elements) it makes it difficult to universally code each section’s CSS.

However, even the best theme developers have a few challenges when it comes to setting up themes for broad merchant use.

Late-loading CSS

For example, many Shopify themes break up CSS into section-specific files which may be set to load “lazy” or “asynchronously” rather than early in the page render. Both patterns instruct browsers to load other more prioritized resources first.

This is good practice if your content is below the fold or otherwise not the most important on the page, but backfires on primary content.

Wacky loading fonts

If your theme doesn’t preload fonts, minimize font file size or stick to system fonts instead of custom fonts, you can get that jumpy behavior that triggers the “Web font loaded” status in your Core Web Vitals report.

Late-activated JavaScript

Shopify themes should minimize their use of JavaScript in general for fast site performance (that’s why Clean Canvas have eliminated it completely in Enterprise and Canopy). When it is used in a theme, it can cause layout shift by firing at the wrong time for the purpose.

Because your theme is ultimately tailored to you, even with a very good Shopify theme, you may need to make some adjustments to fine-tune for layout shift when it happens.

How can I fix layout shift in my Shopify theme?

If you have a Premium theme from a reputable theme partner and detect layout shift in PageSpeedInsights, reach out to their support team.

Be aware, layout shift can also come from your own use of the theme, custom code and third party apps. If you’re using a Clean Canvas premium Shopify theme, they’ll help you fix it or point you in the right direction, depending if the issue is in the theme itself or from something else.

Of course, if your theme is custom built by an agency, they’re your go-to for all things technical.

How can I prevent layout shift in my Shopify theme?

That’s the right question to ask!

Because stores are dynamic and you’re adding new content and functionality all the time, it’s a great idea to ensure your code is optimized to prevent Cumulative Layout Shift, and that you’re mindful about how “shift happens” in general.

Set placeholders for images

Make sure height and width attributes are set for your <img> tags within your CSS. Most commonly you’ll do this with 100% width (max-width) and auto height as a default setting or use the CSS aspect-ratio property.

Shopify’s Liquid image_tag will automatically add your image’s dimensions to your HTML, and you can override these dimensions manually for specific images (or videos) that need it.

Load CSS asynchronously only below the fold

Use Liquid’s new sections.index property to remove late-loading CSS on above the fold content, but keep it for everything below.

Set placeholders for JavaScript

JavaScript injections are most often coming from third party apps that are agnostic to your theme and layout, so they don’t save space in your theme for their incoming content – that’s on you.

Your developer can reserve space for this content with CSS height/width or <div> containers, for example, depending on the app block and where it lives on your page.

It’s always a good idea to use native functionality from your theme instead of apps when you can, involve your developer whenever you add new apps to your store, and check your Page Speed Insights after each new configuration.

Choose Shopify apps wisely

Not all Shopify apps use the updated app extension framework that supports app blocks and instead may be using outdated script APIs that make it harder to control when and how they fire, thus are harder to fix.

You may wish to remove such apps in favor of other options – just remember that older-style Shopify apps will likely leave code lying around after you uninstall.

So get your developer to do a thorough clean up after each app removal. (Apps on the new framework uninstall cleanly and won’t leave code gremlins behind).

How Clean Canvas premium themes minimize CLS

The developer team at Clean Canvas are obsessed with web performance and have taken special care to optimize its code for fast loading stores.

The Shopify Performance team tracks and publishes data for the top 100 themes in its official Theme Store, and Clean Canvas’ Enterprise theme ranks in the top 3 performing themes overall, with a 93.8% CLS score out of 100 (as well as stellar marks for the rest of the vitals).

Enterprise is the first of the Clean Canvas themes that’s been migrated to their new high-performance framework that’s optimized for front-end user experience, admin ease-of-use and Core Web Vitals.

Canopy also runs on this new framework, and Clean Canvas are in the process of moving the rest of their Premium Shopify themes to it as well, such as the best selling Symmetry theme, Alchemy and Boost.

Choosing a Shopify theme from a theme developer that prioritizes web performance is your safest long-term bet.

You want a theme built on best practices that minimizes the custom coding you’ll ever need to do, so you stay on a clean and reliable upgrade path.