Shopify Horizon Theme Cart Fix: Restore Your Flyover Overlay Drawer on Desktop

Hey store owners! I've been seeing a bit of chatter in the Shopify community about a change in the Horizon theme that's affecting the cart drawer behavior on desktop. It's one of those subtle things that, once you notice it, you can't un-notice, and it can really impact your customers' experience. Our friend nedrelow_1 kicked off a thread asking if we could "bring back the option to have a normal flyover cart on Horizon," and it quickly became clear they weren't alone in feeling this way.

Understanding the Horizon Cart Shift

So, what's the big deal? If you're using the Horizon theme, you might have noticed that on wider screens (specifically, anything over 990px), when a customer adds something to their cart, the cart drawer slides in and actually pushes your entire page sideways. It's a bit jarring, isn't it? Previously, the cart would "fly over" the page, dimming the background and keeping the main content in place. Interestingly, as Ploqo pointed out in the discussion, on phones and smaller screens (under 990px), it still behaves like the old overlay, which is good!

Why the Push-Style Cart Can Be a UX Headscratcher

As rshrivastava63 rightly commented, the "older flyover style cart was much smoother from a UX point of view." When your entire page shifts, it can feel less polished and even a bit disorienting for the user. It breaks the flow, making it harder to quickly review the cart and decide whether to continue shopping or proceed to checkout. Many of us, myself included, prefer the subtle overlay that keeps the main content in focus, just dimmed slightly.

First Check: The "Cart Type" Setting

Before we dive into any code, both Ploqo and cuongnm_trooix highlighted a crucial first step. You need to make sure your theme is set to use a "Drawer" cart, not a "Page" cart. If it's set to "Page," clicking the cart icon will take your customers to a whole new page, which is a completely different experience.

• Go to Online Store, then Themes.
• Click Customize next to your Horizon theme.
• In the editor, click Theme settings (the gear icon on the left).
• Select Cart.
• Find the Type setting. If it's set to Page, switch it to Drawer.

Now, if it was set to "Page," changing it to "Drawer" will give you a slide-out cart. But here's the kicker: it will still likely be the push-style drawer on desktop, not the flyover overlay. As cuongnm_trooix confirmed, Horizon currently "does not expose a separate setting for overlay versus push-style drawer behavior." This means if you want that true flyover back, a little custom code is your best bet.

The Code Solution: Bringing Back the Flyover Cart

This is where Ploqo's excellent contribution comes in. They've provided a concise code snippet that restores the desired flyover behavior on desktop, complete with a dimmed background and the ability to close the cart by clicking outside it or pressing Esc. It's a small addition that makes a big difference in user experience.

Step-by-Step Instructions to Implement the Fix

A quick word of caution: Whenever you're editing theme code, it's always a good idea to duplicate your theme first. That way, if anything goes awry, you can easily revert to your previous version!

1. Go to Online Store, then Themes.
2. Next to your Horizon theme, click the three dots ..., then select Edit code.
3. In the left sidebar, open the layout/theme.liquid file.
4. Scroll to the very bottom of the file. You're looking for the closing tag.
5. Paste the following code snippet directly before the tag. Make sure it's not inside any other tags.

{%- comment -%}
Flyover cart drawer on desktop
{%- endcomment -%}

6. Click Save.

What You Get and How to Adjust It

Once you've added this code, you'll see some immediate improvements on desktop:

• Your page will stop shifting when the cart opens.
• The cart will float over the page, and everything behind it will dim, just like the old flyover.
• Customers can click the dimmed area or press the Esc key to close the cart.
• This change only applies to desktop, as mobile already uses the overlay style.

Ploqo also gave us some great options for adjusting this fix:

• Adjusting the darkness of the dim: In the CSS part of the code, find rgba(0, 0, 0, 0.5). The 0.5 controls the opacity. Change it to a number between 0 (no dim) and 1 (fully black).
• Don't want the dim or click-to-close? If you just want the page to stop shifting but don't need the background dim or the click-to-close feature, you can keep only the .page-wrapper--drawer-open { margin-right: 0 !important; } line in the