Restore Your Shopify Horizon Theme's Classic Flyover Cart Drawer (No More Page Pushing!)

Hey there, fellow store owners! It's your Shopify migration expert here, diving into a really interesting (and common!) frustration I've seen bubbling up in the community discussions lately. We're talking about the Horizon theme's cart drawer – specifically, how it behaves on desktop. If you've noticed your entire page shifting sideways when a customer clicks to open their cart, you're definitely not alone. It's a subtle change, but one that can really impact your store's user experience (UX).

I recently stumbled upon a great thread titled "Horizon cart" where our community member, nedrelow_1, kicked things off by asking for the return of the "normal flyover cart." And honestly, it's a sentiment many of you probably share. The consensus among folks like rshrivastava63 and cuongnm_trooix was pretty clear: the older flyover style felt much smoother and more intuitive from a UX point of view. It seems Shopify's Horizon theme changed the desktop cart drawer behavior from a sleek, overlaying "flyover" to a "push" style, where the cart slides in and shoves the whole page over to make room. On mobile (screens under 990px), it still overlays, but for desktop users, it's a noticeable shift.

Understanding the Cart Drawer Change

The core of the issue is that on screens wider than 990 pixels, the Horizon theme's cart drawer now slides in and pushes your entire page to the side. The older, beloved behavior allowed the cart to simply float over the page, often dimming the background slightly, without disrupting the layout. This "push" behavior can feel a bit jarring to customers and, as rshrivastava63 mentioned, isn't quite as smooth.

The tricky part? There's no built-in theme setting to switch this back to the old flyover style. While you can choose between a "Page" cart (which takes the user to a separate cart page) and a "Drawer" cart (which slides out), the "Drawer" option in Horizon doesn't offer a sub-setting for overlay versus push-style behavior. So, if you're looking for that classic flyover, a small code customization is currently the way to go.

First Things First: A Quick Check of Your Cart Settings

Before we dive into any code, let's make sure your cart type is set correctly. This won't bring back the flyover, but it ensures you're on the right track for a drawer experience.

1. From your Shopify admin, go to Online Store, then Themes.
2. Next to your Horizon theme, click Customize.
3. In the theme editor, click on Theme settings (the gear icon on the left sidebar).
4. Select Cart.
5. Look for the Type setting. If it's set to Page, switch it to Drawer.

If it was already set to Drawer and your page still slides sideways, then you're ready for the fix!

The Solution: Bringing Back the Flyover Overlay on Desktop

Thankfully, Ploqo, one of our helpful community members, provided an excellent code snippet that restores the old flyover overlay behavior. This code adds a "scrim" (the dimmed overlay) and prevents the page from shifting. Here's how to implement it:

1. From your Shopify admin, go to Online Store, then Themes.

2. Next to your Horizon theme, click the three dots (...), then select Edit code.

3. In the file browser on the left, open layout/theme.liquid.

4. Scroll to the very bottom of the theme.liquid file. You're looking for the closing tag. You want to paste the following code right before this tag.

   

5. Paste this exact code snippet:

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

6. Click Save.

What This Code Does For Your Store

Once you've added this snippet and saved your changes, here's what you'll notice on your desktop store:

• No More Page Shifting: Your main page content will stay put when the cart drawer opens.
• Classic Flyover: The cart will slide in over your page, creating that familiar overlay effect.
• Dimmed Background: Everything behind the cart will be slightly dimmed, drawing focus to the cart itself.
• Easy Closing: Customers can click anywhere on the dimmed area, or press the Esc key, to close the cart.
• Desktop Only: This fix specifically targets desktop screens (over 990px), as mobile already uses the overlay style.

Customizing Your New Flyover Experience

Ploqo's solution is also flexible! You can tweak a couple of things to better match your brand:

• Adjust the Dimness: If you want the background to be darker or lighter when the cart opens, find rgba(0, 0, 0, 0.5) in the CSS. The 0.5 controls the opacity (0 is no dim, 1 is fully black). Change it to a value that feels right for your store.
• Remove the Dim or Click-to-Close: If you prefer no dimming or don't want the click-to-close functionality, you can simplify the code. Just keep the line .page-wrapper--drawer-open { margin-right: 0 !important; } in the