Sticky Product Sections Not Sticking? How to Fix Horizon Theme Scrolling on Shopify

View original discussion by TCC_2025 on Shopify Community →

Hey there, fellow store owners! Navigating the ins and outs of Shopify themes can sometimes feel like a puzzle, especially when you're trying to achieve a specific look or functionality. That's why I love diving into the community forums – they're a goldmine of shared experiences and clever solutions. Recently, I stumbled upon a fantastic discussion that perfectly illustrates how a tiny piece of code can have a big impact on your store's user experience. It was all about getting those product page sections to act "sticky" on the popular Horizon theme.

The Sticky Situation: When Elements Just Won't Stick

The thread kicked off with TCC_2025, a store owner using the Horizon theme, facing a common but frustrating problem. They had customized their product page with some extra blocks, but the "details block" wasn't behaving as expected. Instead of the product image staying put (being "sticky") while the customer scrolled through the product details, everything was scrolling together. This is a classic example of a sticky element not sticking, which can really mess with the smooth, modern feel we all aim for on our product pages.

Think about it: when a customer lands on a product page, you want them to easily see the product while they browse through descriptions, specs, and reviews. A sticky image or product summary often enhances this experience, keeping the main product in view as they absorb more information. So, TCC_2025's desire to have that image sticky while the details scrolled separately was totally on point for good UX.

Unpacking the Root Cause: A Hidden Culprit

Thankfully, the Shopify community is full of sharp minds, and tim_tairli jumped in with a spot-on diagnosis. They pointed out that the issue likely stemmed from a specific CSS rule that had been added, either through the Theme settings' Custom CSS area or directly into the theme's code files:

      html,body {
        width: 100%;
        overflow-x: hidden;
      }

Now, this might look innocent enough, but that overflow-x: hidden; property is a known troublemaker for sticky positioning. When you set overflow: hidden; (or overflow-x: hidden;) on an ancestor element (like html or body), it essentially tells the browser, "Don't show anything that extends beyond this element's boundaries." While useful for preventing horizontal scrollbars, it also, unfortunately, interferes with how CSS position: sticky; calculates its sticking point. It essentially clips the content, preventing descendants from truly "sticking" within the viewport.

The Elegant Solution: overflow-x: clip; to the Rescue!

Here's where tim_tairli's expertise truly shone. The fix isn't to remove the overflow-x property entirely if you need to prevent horizontal scrolling, but to change its value. Instead of hidden, the magic word is clip.

Changing from overflow-x: hidden; to overflow-x: clip; is a quick and easy fix that resolves the issue without reintroducing unwanted horizontal scrollbars. The clip value, like hidden, prevents content from overflowing a container. However, critically, clip does not create a new scrolling context, which is what hidden sometimes inadvertently does, thereby breaking the position: sticky; functionality for child elements. It's a subtle but powerful distinction in how browsers render and interpret these CSS properties.

Step-by-Step: Implementing the Fix on Your Shopify Store

Ready to get your Horizon theme's product sections sticking properly? Here’s how you can implement this fix:

  1. Access Your Theme Code:
    • From your Shopify admin, go to Online Store > Themes.
    • Find your Horizon theme, click Actions > Edit code.
  2. Locate Your Custom CSS: This is where it can vary slightly.
    • Option A (Most Common): Theme Settings Custom CSS. Go back to Online Store > Themes > Customize. In the theme editor, look for "Theme settings" (usually a gear icon or a tab at the bottom left), then navigate to "Custom CSS" or "Advanced CSS." This is often the first place custom CSS rules are added.
    • Option B: Theme Files. If you can't find it in theme settings, it might be in a file like base.css, theme.liquid (often within