Restore the Classic Flyover Cart in Shopify's Horizon Theme for Better UX

Hey there, fellow store owners! It's your Shopify migration expert here at Shopping Cart Mover, 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 significantly impact your store's user experience (UX) and, ultimately, your conversion rates.

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 Horizon Theme's Cart Drawer Behavior

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. Imagine browsing a product, adding it to your cart, and then the entire page layout shifts – it can be disorienting and detract from a seamless shopping journey.

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. This means if you want that classic, smooth overlay, you'll need to roll up your sleeves for a bit of code customization.

The Solution: Restoring the Flyover Overlay Cart on Desktop

Before we dive into the code, let's do a quick check to ensure your cart type is set correctly. This fix specifically applies to the "Drawer" cart type.

Quick Cart Type Check:

• From your Shopify admin, go to Online Store > Themes.
• Next to your Horizon theme, click Customize.
• In the theme editor, go to Theme settings (usually the gear icon) > Cart.
• If Type is set to "Page," switch it to "Drawer."
• If it's already "Drawer" and the page still slides sideways on desktop, proceed with the code fix below.

Implementing the Code Fix (The "Flyover" Restoration):

This customization involves adding a small snippet of CSS and JavaScript to your theme. Always remember to duplicate your theme before making any code changes. This creates a backup, allowing you to revert easily if anything goes wrong.

1. From your Shopify admin, go to Online Store > Themes.
2. Next to your Horizon theme, click the three dots ..., then select Edit code.
3. In the file explorer on the left, open layout/theme.liquid.
4. Scroll down to the very bottom of the file. You'll need to paste the following code snippet right before the closing tag.
5. Paste the code and then click Save.

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

What This Code Does:

• CSS (