Fix Your Shopify Cart Drawer: How to Add a Dimmed Overlay & Freeze the Page on Desktop (Horizon Theme)

Hey everyone! As a Shopify migration expert and someone who spends a lot of time digging through community discussions, I often see recurring questions that, once solved, can make a huge difference in your store's user experience. Today, I want to talk about a common cart drawer quirk, especially for those of you using the Horizon theme, and how a couple of community members brilliantly tackled it.

The Cart Drawer Conundrum: What's the Problem?

Recently, a store owner named saintmessi posted in the Shopify community about an issue with their cart drawer on the Horizon 4.2.0 theme. When customers clicked to open the cart, the page behind it remained fully scrollable, and there was no dimmed background overlay. This meant shoppers could still interact with the main store page while the cart was open, which isn't ideal for a focused checkout process.

Here's how saintmessi described it:

When I click on the cart, the left side of the page is still scrollable, and the background doesn’t freeze. There is also no background overlay, and the scrollbar on the left side is still movable.
I’m using Horizon theme 4.2.0

I’ve attached screenshots showing the issue Screenshot by Lightshot

password - yahtai
Can someone please help me fix this?

This is a fantastic example of how a small detail can impact the perceived professionalism and user-friendliness of your store. Luckily, the community came through with some stellar advice!

Unpacking Horizon Theme's Default Behavior

The first crucial insight came from jowel-66, who dug into the Horizon 4.2.0 code. It turns out, this behavior isn't a bug; it's by design!

• If your browser window is 990px wide or more (desktop), the cart opens as a side panel that pushes the page over. It doesn't cover it, so there's no dark overlay, and the page remains scrollable. This is meant to let shoppers keep browsing. The drawer also stays open if they navigate to another page.
• If your window is under 990px (mobile, tablet, or a narrow desktop window), the drawer opens as an overlay, with a dimmed background and the page behind it locked.

So, saintmessi wanted the mobile experience on desktop, which isn't a standard theme setting. But with a little code magic, it's totally achievable!

The Full Fix: Getting That Mobile Overlay Experience on Desktop

To get the cart drawer to behave like an overlay on all screen sizes – freezing the background, adding a dim, and closing when clicked outside – you'll need to make a couple of small code edits, as outlined by jowel-66. Don't worry, it's straightforward!

1. Always Back Up Your Theme! Before making any code changes, it's absolutely essential to duplicate your theme. Go to Online Store > Themes, click the three-dot menu next to your Horizon theme, and select Duplicate. This way, you have a safe version to revert to if anything goes awry.
2. Dive into the Code Editor: On your working theme (the one you want to change), click the three-dot menu again and select Edit code.
3. Edit assets/theme-drawer.js:
   • Open the assets/theme-drawer.js file.
   • Near the top (around line 7), you'll find this line:
     

     const MODAL_BREAKPOINT = 990;

   • Change 990 to a very large number, like 99999. This effectively tells the theme to always treat the screen as 'mobile' for the cart drawer's behavior.
     

     const MODAL_BREAKPOINT = 99999;

4. Edit snippets/theme-drawer.liquid:
   • Open the snippets/theme-drawer.liquid file.
   • Search for (min-width: 990px). This phrase appears twice (around lines 33 and 86).
   • Change both instances to (min-width: 99999px).
5. Save and Refresh: Click Save for both files, then hard-refresh your store's page (Ctrl+F5 or Cmd+R) to see the changes.

After these steps, your cart drawer should now open like it does on mobile at every screen size: with a dimmed background, the page frozen behind it, and it will close when you click outside or press Esc. It also won't stay open when you move to another page, which improves the flow of a typical shopping experience.

Enhancing the Visuals: Customizing Your Cart Overlay Darkness

Once you've got the page freezing and the overlay appearing, you might want to adjust how dark that overlay is. The built-in one is quite light (around 15% opacity). This is where Ploqo's tip comes in handy, providing a simple CSS snippet to customize the dimming effect.

First, here's a look at the difference Ploqo demonstrated:

Before

After

Here are the steps to add custom CSS:

1. Go to Online Store.
2. Click Edit theme on your current theme (Horizon).

3. Click the Theme settings icon on the left.

4. Scroll down and click Custom CSS.

5. Paste this code in the box:

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

6. Click Save.

For a lighter overlay, simply change 0.5 to 0.3 in the code snippet. You can experiment with different values between 0 and 1 to find the perfect level of dimming for your store.

Important Notes & What to Watch Out For

jowel-66 also shared some vital considerations:

• Theme Updates: Keep in mind that theme updates often overwrite code edits. If you update your Horizon theme in the future, you might need to re-apply these changes.
• Chat Drawer: If you use Shopify's built-in chat drawer, it shares the same drawer code. So, it will also open as an overlay with a dimmed background after these modifications.

It's always awesome to see how the Shopify community comes together to solve these kinds of nuanced challenges. Both jowel-66 and Ploqo provided excellent, actionable advice that directly addressed saintmessi's issue, leading to a much smoother user experience.

This is just one example of how a small tweak can make a big difference for your customers. Building a robust online store often involves these kinds of thoughtful adjustments, and if you're looking to start or grow your e-commerce journey, Shopify provides a powerful and flexible platform to make it happen. Happy customizing!