Fixing Sticky Product Images on Shopify's Empire Theme (v13.0.0+): A Community-Driven CSS Guide

Hey there, fellow store owners! It's your Shopify expert here, diving into another common issue that popped up in the community forums. You know how crucial a slick product page is, right? Especially those awesome sticky images that keep your product in view as customers scroll through descriptions and reviews. They're a fantastic way to boost engagement and conversions.

But sometimes, a theme update, while bringing new features and security, can unintentionally break existing functionalities. That's exactly what happened to one store owner, @sales_2797, using the popular Empire Theme (version 13.0.0). Their once-functional sticky product images suddenly stopped working after a recent update, leaving their product pages feeling a little less dynamic. They shared a link to their product page, FP McCann Thin Leading Edge Roof Tile - Anthracite — Ashbrook Roofing Supplies LTD, hoping for a solution.

The Sticky Image Dilemma on Empire Theme

Sticky elements, like product images, use a CSS property called position: sticky;. This tells the browser to keep an element in a fixed position once it hits a certain scroll point. It's a fantastic feature for user experience, but it relies on precise CSS rules. When theme updates roll out, sometimes these rules get overwritten or conflicting styles are introduced, causing the sticky effect to vanish.

Thankfully, the Shopify community is always ready to lend a hand! @Laza_Binaery jumped in quickly with a solid CSS snippet to restore the sticky behavior.

Here's the initial code suggested:

@media (min-width: 720px) {
    product-gallery {
        position: sticky;
        top: 140px;
    }
}

This code targets the product-gallery element, setting its position to sticky and ensuring it sticks 140px from the top of the viewport once it starts scrolling. The @media (min-width: 720px) part is important; it means this sticky effect will only apply on wider screens (desktops and tablets), which is generally where you want this kind of behavior.

Where to Place Your Custom CSS (The Right Way!)

Now, this is where things can get a little tricky, and it's a common point of confusion for many store owners. @sales_2797 initially tried placing the code in Sections>static-product-liquid, which didn't work. This is a crucial learning point: while you can edit core liquid files, it's often best to use the theme editor's built-in "Custom CSS" fields for minor tweaks. This method is generally safer and less likely to be overwritten by future theme updates (though not immune).

@Laza_Binaery clarified the correct approach, even installing the Empire theme to test it out! Here’s how you can do it:

1. Navigate to Your Theme Editor: From your Shopify admin, go to Online Store > Themes. Find your Empire theme and click on Customize.
2. Select a Product Page Template: In the theme editor, use the dropdown menu at the top to select Products > Default product (or any specific product template you want to modify).
3. Locate the Product Information Section: On your product page preview, click directly on the product image gallery. This should highlight the relevant section in the left sidebar. It's usually called "Product information," "Main product," or something similar, as @Laza_Binaery pointed out. You'll see an icon in the top right of the section settings turn blue, indicating the active section.
   
4. Add Your Custom CSS: In the settings for that section, scroll down until you find a field labeled Custom CSS. This is where you'll paste the code.
   
5. Save Your Changes: Don't forget to click Save in the top right corner!
6. Repeat for Other Product Templates: If you have multiple product templates (as @sales_2797 mentioned), you'll need to repeat these steps for each template where you want the sticky images to appear.

And remember, if you previously put the code somewhere else (like in static-product-liquid), make sure to remove it from there to avoid conflicts!

Taking It Up a Notch: A More Flexible 'Top' Value

While top: 140px; works, it's a fixed value. What if your header height changes? Maybe you add a promo bar, or your header design adjusts for different screen sizes? A fixed value might cause the sticky image to either overlap the header or leave too much space.

This is where @tim_tairli, another helpful community member, offered a brilliant refinement. They suggested using a CSS variable for the top value, like this:

top: calc(var(--header-height, 120px) + 20px);

/* maybe also add this for smoother transitions */
transition: top 0.15s linear;

This is super clever! Many modern Shopify themes, including Empire, use JavaScript to calculate and update a CSS variable like --header-height. By using calc(var(--header-height, 120px) + 20px), you're telling the browser to dynamically adjust the sticky position based on the actual header height, plus an extra 20px padding for a nice visual separation. The 120px acts as a fallback if --header-height isn't defined, which is a thoughtful touch.

The added transition: top 0.15s linear; is a small but mighty detail! It ensures that when the sticky element's position adjusts (for instance, if the header height subtly changes, or if you're scrolling), it does so smoothly instead of abruptly snapping into place. It's those little touches that really elevate the user experience.

The Recommended Solution for Your Empire Theme

So, combining the best insights from the community, here's the full, robust CSS code you should use in the Custom CSS field of your Product information section:

@media (min-width: 720px) {
    product-gallery {
        position: sticky;
        top: calc(var(--header-height, 120px) + 20px);
        transition: top 0.15s linear;
    }
}

Remember to apply this to all relevant product templates where you want this sticky behavior. This approach ensures your sticky product images are not only restored but also more resilient to future header changes, providing a consistently smooth and engaging browsing experience for your customers. It's a great example of how a little bit of custom CSS, combined with the wisdom of the community, can make a big difference in your store's performance and user satisfaction!