Reviving Sticky Product Images on Empire Theme 13.0.0: A Flexible CSS Solution from the Shopify Community

Hey fellow store owners! Ever had that sinking feeling when a beloved feature on your Shopify store suddenly disappears after a theme update? You’re not alone. It’s exactly what one of our community members, sales_2797, ran into recently with their Empire theme. They noticed that the 'sticky images' on their product pages, which were working beautifully before, had vanished after updating to Empire Theme Version 13.0.0.

Why Sticky Product Images Are a Must-Have

'Sticky images' keep your product photos visible on the side of the screen as customers scroll through descriptions, reviews, or specifications. This is a fantastic user experience (UX) feature because it keeps the product visually front-and-center, reducing the need for constant scrolling back up and making the shopping journey smoother and more engaging. Losing this was a clear step backward for sales_2797, especially for product pages like their FP McCann Thin Leading Edge Roof Tile.

The Community's Initial Fix & Crucial Placement

The Shopify community is always ready to help! Laza_Binaery quickly provided a solid starting point using CSS to make the product-gallery element sticky:

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

This targets the product gallery on wider screens (720px and up) and tells it to stick 140 pixels from the top. A key takeaway from this exchange was Laza_Binaery's guidance on *where* to place the code. sales_2797 initially tried editing a core theme file (Sections>static-product-liquid), but the correct, more robust method is to use the theme editor's built-in "Custom CSS" field within the specific section. This keeps your customizations safe from theme updates. Laza_Binaery even shared helpful visuals indicating where to find this setting:

The Expert Refinement: Dynamic Positioning with CSS Variables

While the initial code works, tim_tairli offered an even more flexible solution. Instead of a fixed top: 140px; value, which could cause issues if your header height changes, tim_tairli suggested using a CSS variable:

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

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

Laza_Binaery rightly called this "spot on!" This approach is superior because:

• var(--header-height, 120px): Modern Shopify themes often dynamically update a --header-height CSS variable. This ensures your sticky images adjust automatically if your header size changes (e.g., due to responsive design or announcement bars). 120px acts as a fallback.
• + 20px: Adds a small buffer below the header.
• transition: top 0.15s linear;: Creates a smoother, more polished gliding effect instead of an abrupt snap.

Bringing Sticky Images Back: Step-by-Step Guide

Ready to restore those essential sticky images? Here’s how to implement the most robust solution:

1. Access Your Theme Editor: From your Shopify admin, go to Online Store > Themes. Find your Empire theme and click Customize.
2. Navigate to a Product Page: In the theme editor preview, use the dropdown at the top to select Products > Default product (or any specific product template).
3. Locate the Product Information Section: In the left sidebar, find the section containing your product gallery. It's typically named "Product information" or "Main product." Click on it.
4. Find the Custom CSS Field: Within the settings sidebar for that section, locate the field labeled Custom CSS.
5. Paste the Refined Code: Copy and paste the complete, refined CSS code below into that Custom CSS field:

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

6. Save Your Changes: Crucially, click the Save button in the top right corner of the theme editor!
7. Test It Out: Visit a product page on your store and scroll down to confirm the sticky images are working as intended. Test on various screen sizes to see the media query in action.

This discussion is a fantastic example of the power of the Shopify community. When you encounter a challenge, chances are someone else has faced it, or an expert is ready to lend a hand with a clever solution. By leveraging these insights, you can keep your store running smoothly and enhance the shopping experience for your customers. Happy selling!