Sticky images on Product Page - Empire Theme Version 13.0.0

Store Design
,
1

Hello,

I did have the Sticky images on product pages from an earlier version but after previous recent updates and now the sticky images have stopped.

Here is a link to a product page ( FP McCann Thin Leading Edge Roof Tile - Anthracite — Ashbrook Roofing Supplies LTD ) if anyone can advise that would be great.

2

HI @sales_2797

Try to add following code to your main, product info section. One that have that gallery. Add it to setting under Custom CSS in your theme editor for that section.

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

@Laza_Binaery thankyou, where would i find the main product info section? We also have multiple different templates for products I would need a fix that will work across all current and future product pages.

4

Well, go to Edit theme, and on each product template, just click on the gallery; it should mark the section you are in. In the top right corner, this icon should be blue. But I think your section is called Main or Main product,

Screenshot 2026-07-16 145554
Screenshot 2026-07-16 1455541272×342 45.8 KB

5

Hello,

I have tried to place it there and unfortunately it has not worked.

I have placed it in Sections>static-product-liquid as this is where the editor took me to edit the code.

6

No, I did not tell you to add edit code in the code editor.

OK I installed Empire theme just for test, you should be using that one.

So in product page template selece Product information section, in section settings find Custom CSS setting, and in the field add code. And save. Also remove code where you placed it in static-product-liquid.

Screenshot 2026-07-16 151817
Screenshot 2026-07-16 1518171920×1070 292 KB

7

The code is fine, however I’d suggest to rather use a top value like this:

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

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

Using this CSS variable which is calculated and updated by theme JS would be more flexible when header height changes.

8

@tim_tairli

You are absolutely right; header height can change so using a CSS variable is spot on.

Thank you.