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.

To fix layout issues after installing a Shopify app, find the app causing it by turning off app embeds one at a time in the theme editor. Then fix the conflict with CSS (header offsets, z-index, a min-height placeholder) or the app’s own position settings.

Typical problems: sticky announcement bars push content behind your header, chat widgets overlap your add-to-cart button on mobile, and an app’s popup sits behind your navigation.

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: 749px) {
    /* 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. This is Cumulative Layout Shift (CLS), and it hurts both the shopping experience and your PageSpeed score.

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: ask the app developer whether the widget can render a placeholder of fixed height.

To find scripts that apps leave behind, see how to remove unused code in Shopify.

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

Fudge, the AI operator for Shopify stores, rebuilds the feature as part of your theme. Describe what you need:

“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.”

You preview the native version next to the old one before anything changes for shoppers. Once you uninstall the app, Fudge can find the code it left in your theme and draft a clean-up for you to approve.

To clean up by hand after you uninstall an app, see how to remove leftover app code from Shopify.

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 duplicate theme. Apps install store-wide, but you can turn on the app’s embed or blocks only in a duplicate theme, preview it, then enable it on the 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, because it’s written for your theme and loads only where it’s used.

FAQ