How to Fix Layout Issues After Installing Shopify Apps (2026)

Key takeaways

• Apps that inject content can push other elements out of position, overlap navigation, or cause layout shift.
• Diagnose by disabling apps one by one and checking if the issue resolves.
• Common fixes: CSS z-index adjustments, margin overrides to offset sticky bars, and disabling conflicting app embeds.
• Fudge can identify and fix layout conflicts caused by app code without you writing CSS manually.

Installing a new Shopify app and discovering it broke your layout is a common frustration. Sticky announcement bars push content behind your header. Chat widgets overlap your add-to-cart button on mobile. An app’s popup Z-index puts it behind your navigation. These are fixable problems — you just need to know where to look.

How to fix cumulative layout shift?

Cumulative Layout Shift (CLS) is a specific type of layout problem where elements move after the page initially loads — because an app’s script loaded late and pushed content around. This hurts both user experience and your Google PageSpeed score.

The fix: Ensure app widgets have their space reserved in the page layout before they load. This is often done by setting min-height on app container elements.

Step 1 — Diagnose which app is causing the problem

Before fixing anything, confirm which app is responsible.

Method — Disable apps one at a time:

1. Go to Online Store → Themes → Customize → App Embeds
2. Toggle off one app at a time
3. Preview your storefront after each toggle
4. When the issue disappears, you’ve found the culprit

For apps that inject code via theme.liquid (rather than App Embeds), you’ll need to find and comment out their script tags to test.

Always test on a duplicate theme to avoid accidentally breaking your live store.

Common layout problems and fixes

Sticky announcement bar pushing page content down

Some apps inject a sticky bar at the top of the page. This can overlap with your theme’s header or push page content behind it.

Fix — offset your header with CSS:

.shopify-section-header-sticky,
.header-wrapper {
  top: 40px; /* height of the app's sticky bar */
}

Replace 40px with the actual height of the app bar. Measure it using browser Inspect tools.

Better fix: Check the app’s settings — most sticky bar apps let you configure the bar height and may have an option to integrate with your theme’s header positioning.

Widget overlapping navigation or buttons

Z-index conflicts cause elements to appear on top of each other when they shouldn’t.

Fix — adjust Z-index:

.your-nav-element {
  position: relative;
  z-index: 1000; /* Higher than the app's widget */
}

Find the conflicting app element’s class name (right-click → Inspect), check its computed z-index, and set your element’s z-index higher.

Chat widget covering mobile add-to-cart

Chat widgets (Gorgias, Tidio, Intercom) are notorious for overlapping sticky ATC bars on mobile.

Fix — move the chat widget:

Most chat apps have a positioning setting (bottom-left vs. bottom-right). If your ATC button is on the right, move the chat widget to the left.

Or offset the app’s widget with CSS:

@media (max-width: 767px) {
  /* Most chat apps have a predictable class or ID */
  #chat-widget-container {
    bottom: 80px !important; /* Clear of your ATC bar */
  }
}

The !important is unfortunately often necessary to override app-injected inline styles.

CLS from late-loading app content

If an app loads content late (after the page has rendered), it can cause elements to jump.

Fix — reserve space with min-height:

.app-widget-container {
  min-height: 200px; /* Approximate height of the widget */
}

This prevents the page jump by holding the space before the widget loads.

Alternative: Load the app’s script earlier, or use loading="eager" on critical app resources if the app supports it.

When CSS overrides aren’t enough

Some app conflicts require more than CSS to fix — the app’s JavaScript fundamentally conflicts with your theme’s JavaScript, or the app injects HTML into a position that breaks your theme’s structure.

Options:

• Contact the app developer with a specific bug report — they may have a fix or workaround
• Use a different app that doesn’t have the same conflict
• Remove the conflicting app and build the feature natively with Fudge

Describe the feature you need to Fudge:

“I was using [App Name] for a sticky announcement bar but it conflicts with my header. Build me a native sticky announcement bar that works correctly with my theme.”

Preventing layout issues when installing new apps

Read the installation instructions carefully. Apps that modify theme.liquid or require you to paste code into your theme are higher risk than apps that use App Embeds.

Test on a staging theme. Always duplicate your active theme, install the app on the duplicate, and test thoroughly before enabling on your live theme.

Check the app’s reviews for layout complaints. If other merchants report conflicts with common themes (Dawn, Craft, Sense), that’s a warning sign.

Minimize the total number of apps. Every app is a potential conflict. Each app adds scripts, styles, and HTML that wasn’t designed with your specific theme in mind. Native code built with Fudge avoids this entirely.