Fixing Shopify Popups: The Ultimate Scroll & Close Button Solution for Horizon Theme (and Beyond!)

Hey everyone! As a Shopify migration expert and someone who spends a lot of time digging through the community forums, I often see recurring themes (pun intended!). One common head-scratcher that pops up (again, pun intended!) is when those crucial informational popups just… won’t scroll. You know the ones – maybe it’s a detailed product spec, a terms and conditions modal, or even a newsletter signup. When they refuse to budge, it’s not just annoying; it’s a real barrier for your customers.

Just recently, a store owner named jopmoreira on the Shopify community forum ran into this exact problem with their store, built on the Horizon theme. Their product page popup link, which you can check out at vintseis.com (password: 1234), was completely unscrollable on both desktop browsers and mobile devices. This is a classic user experience killer, right? If your customers can’t access all the information, they’re likely to bounce.

Understanding the Problem: Why Popups Get Stuck

So, why does this happen? Often, it boils down to how the theme’s CSS is handling the popup’s container. If the container isn’t set to allow scrolling when its content overflows, or if certain pointer-events are blocked, your users are stuck. It’s like trying to read a scroll that only shows the top half!

Community to the Rescue: Initial Insights

Our community members quickly jumped in to help diagnose and solve the issue. First, devcoders asked for screenshots, which is always a great first step to visualize the problem. Then, shopplaza_team offered a solution that started us on the right path. They suggested adding a specific CSS snippet to the theme’s stylesheet:

dialog.popup-link__content.dialog-modal {
    pointer-events: auto !important;
}

This snippet is super important because pointer-events: auto essentially tells the browser, "Hey, this element should respond to mouse and touch events!" Sometimes, themes might inadvertently set pointer-events: none on overlays or dialogs, which makes them unclickable or unscrollable.

shopplaza_team provided clear instructions on how to add this:

1. Open the Code Editor
   • Go to Online Store > Themes.
   • Click the three dots (…) next to your theme and select Edit code.
2. Find the Asset
   • In the left sidebar, scroll down to the Assets folder.
   • Click on base.css (or main.css / theme.css depending on your theme).
3. Add Code
   Scroll to the very bottom of the file. Paste the source code provided above.
4. Save
   Click Save in the top right corner. Refresh your store to see the changes.

jopmoreira confirmed that this helped, allowing them to close the popup by clicking outside of it, which is great progress! However, the scrolling issue, particularly on desktop, and the close button itself, still needed a little love.

The Full-Fledged Fix: Scrolling & Fixed Close Button

This is where tim_1 stepped in with a more comprehensive solution that tackles both the scrolling and ensures the close button remains visible and functional. As tim_1 rightly pointed out, "It’s better to keep the close button fixed+visible." Absolutely! No one wants a close button that disappears when you scroll.

Here’s the code tim_1 recommended:

.popup-link__inner {
  max-height: 100%;
  overflow: auto;
  pointer-events: auto;
}

dialog.popup-link__content {
  height: 100%;
}

Let’s break down what this does:

• .popup-link__inner { max-height: 100%; overflow: auto; pointer-events: auto; }: This targets the inner content area of your popup. max-height: 100% ensures it won’t exceed the available height of its parent container. overflow: auto is the magic touch here – it tells the browser to add scrollbars automatically if the content inside is taller than the container. And pointer-events: auto ensures you can actually interact with the content, like scrolling!
• dialog.popup-link__content { height: 100%; }: This makes sure the main dialog content takes up the full available height, working in tandem with the inner element to correctly calculate scrollable space.

Implementing the Complete Solution

You can add this code snippet in one of two places, depending on your comfort level and theme setup:

1. Using Theme Settings (Recommended for most users):
   • From your Shopify admin, go to Online Store > Themes.
   • Find your current theme and click Customize.
   • In the theme editor, look for Theme Settings (usually a gear icon or a tab on the left sidebar).
   • Scroll down to find a section like Custom CSS or Advanced CSS.
   • Paste the code provided by tim_1 into this box.
   • Click Save.
2. Directly in your base.css file (for those comfortable with code):
   • Go to Online Store > Themes.
   • Click the three dots (…) next to your theme and select Edit code.
   • In the left sidebar, navigate to the Assets folder.
   • Open base.css (or main.css / theme.css if your theme uses a different primary stylesheet).
   • Scroll to the very bottom of the file and paste the tim_1’s code.
   • Click Save.

After applying tim_1's amended code, jopmoreira confirmed that it worked perfectly on desktop too, fixing both the scrolling and allowing for an outside click to close the popup. While the specific close button functionality might still need a quick check depending on your theme's JavaScript, this CSS ensures the button area is interactive and the popup itself is scrollable.

It’s these kinds of collaborative efforts in the Shopify community that make it such a powerful resource for store owners. Small CSS tweaks can make a huge difference in user experience, and knowing where to look – and who to ask – can save you a ton of headache. So, if you’re facing a similar popup scrolling dilemma, give these solutions a try. It’s a common issue, and with a little CSS magic, you can get your popups working seamlessly for all your customers, whether they're on a phone or a desktop!