Shopify Horizon Theme Cart Drawer: Fixing Missing Overlay & Page Scroll Issues

Hey fellow store owners!

Ever found yourself clicking that 'Add to Cart' button, the cart drawer slides in, but the rest of your beautiful store page just sits there, still fully scrollable and not dimmed out? It can feel a little jarring, right? Like the cart isn't quite taking center stage.

That's exactly what one of our community members, saintmessi, ran into recently with their Shopify store running the Horizon theme 4.2.0. They posted in the forums, asking for help because when their cart drawer opened, the background didn't freeze, there was no overlay, and the page behind it remained scrollable. They even shared a couple of screenshots to show what was happening, which you can imagine, wasn't the polished experience they wanted for their customers.

Understanding the Horizon Theme's Cart Drawer Behavior

What's interesting here, and something jowel-66 from the community pointed out, is that this behavior isn't necessarily a 'bug' in the Horizon theme. It's actually how the theme is designed to work on desktop (for browser windows 990px wide or more). On larger screens, the cart is intended to open as a side panel, pushing the main page content over, allowing shoppers to continue browsing if they wish. There's no dark overlay, and the page remains scrollable.

However, when you narrow that browser window, or if a customer is on a phone or tablet (under 990px), the same drawer *should* open as a full overlay, with a dimmed background and the page behind it locked. So, if you're seeing no overlay on mobile, that's a different issue!

But many of us prefer that dimmed, frozen background experience on desktop too, as it really focuses the customer's attention on their cart. Luckily, the community came through with a couple of excellent solutions.

Quick Fix: Adding a Dark Overlay with Custom CSS

The simplest and quickest way to get that background overlay, as suggested by Ploqo (and confirmed to work by saintmessi!), is to add a small snippet of Custom CSS to your theme. This is great if you just want the dimming effect without changing the cart's full desktop behavior (like keeping the page scrollable or the drawer staying open on navigation).

Before & After Visuals

Here’s a quick look at the impact this small change can make:

After:

Steps to Add Custom CSS

1. Go to your Shopify admin and navigate to Online Store.
2. On your current theme (Horizon), click the three-dot menu (...) and then Edit theme.

3. On the left sidebar, click the Theme settings icon (it looks like a cogwheel).

4. Scroll down until you find and click on Custom CSS.

5. In the Custom CSS box, paste the following code:

.theme-drawer__dialog::backdrop { background: rgb(0 0 0 / 0.5); }


6. Click Save.

Pro Tip: If the 0.5 (50% opacity) is too dark or too light for your brand, you can easily adjust it! Change 0.5 to 0.3 for a lighter overlay, or 0.7 for a darker one. Experiment to find what looks best with your store's aesthetic.

Forcing Full Mobile Cart Drawer Behavior on Desktop

What if you want the full mobile experience on desktop? That means not only a dimmed background but also the page freezing behind the cart, and the cart closing if a customer clicks outside it or navigates to another page. This requires a few more code edits, as detailed by jowel-66.

Important: Whenever you're editing theme code, it's always a good practice to duplicate your theme first. This creates a backup you can easily revert to if anything goes wrong.

Steps for Advanced Code Edits

1. In your Shopify admin, go to Online Store.
2. Next to your Horizon theme, click the three-dot menu (...) and select Duplicate. This creates a backup.
3. Once duplicated, on the theme you want to change (the original or the duplicated one, if you prefer to work on a copy), click the three-dot menu (...) again and choose Edit code.
4. Open the file assets/theme-drawer.js. Near the top (around line 7), find this line:

   const MODAL_BREAKPOINT = 990;

   Change it to:

   const MODAL_BREAKPOINT = 99999;

5. Open the file snippets/theme-drawer.liquid. Search for (min-width: 990px). This phrase appears twice (typically around lines 33 and 86). Change both instances to:

   (min-width: 99999px)

6. Save both files (theme-drawer.js and theme-drawer.liquid).
7. Hard-refresh your store's front end to see the changes.

After these edits, your cart drawer will behave like it does on mobile at every screen size: dimmed background, page frozen behind it, and it will close when you click outside or press Esc. It also won't stay open if you navigate to another page.

Optional: Darker Overlay for Code-Edited Drawer

The built-in overlay that comes with this mobile-like behavior is quite light (around 15% opacity). If you want a darker one, you can still add custom CSS. Go to Theme settings > Custom CSS (just like in the first solution) and add this code:

#cart-drawer .theme-drawer__dialog::backdrop {
background: rgb(0 0 0 / 0.4);
}

Again, adjust 0.4 to your preferred opacity.

Things to Keep in Mind

• Shopify Chat Drawer: If you use Shopify's built-in chat drawer, it shares the same underlying drawer code. So, if you apply the advanced code edits, your chat drawer will also open as an overlay with a frozen page.
• Theme Updates: Any direct code edits you make to your theme files (like in the second solution) will likely be overwritten when you update your Horizon theme. So, you might need to re-apply these changes after a theme update. The Custom CSS method (Solution 1) is generally more resilient to theme updates, though it's always good to double-check after any major changes.

For those just starting their journey building an amazing online store on Shopify, remember that little details like this can make a big difference in customer experience. If you haven't yet, you can start your own Shopify store here and dive into customizing your perfect theme.

Ultimately, whether you opt for the quick CSS overlay or the full mobile drawer experience on desktop, these tweaks help ensure a more focused and professional shopping experience. It's great to see the community coming together to share these kinds of practical solutions, making Shopify an even better place for all of us to build and grow our businesses!