FREEZE PRODUCT IMAGE (LEFT) WHILST SCROLLING DESCRIPTION (ON RIGHT)

Store Design
, , , , , , ,

Topic summary

A user wanted to implement a sticky product image gallery on their Shopify store’s desktop view. When scrolling through product descriptions, their images disappeared leaving white space, unlike an inspiration site where images remained fixed until the description ended.

Solution Provided:
Two community members offered identical CSS code snippets to resolve the issue:

  • Target: theme.css file in Shopify’s theme editor
  • Code uses position: sticky on .product-gallery with calculated top offset
  • Applied only to desktop views via @media screen and (min-width: 1000px)

Outcome:
The user initially asked for clarification on where to paste the code, but quickly confirmed the solution worked successfully (confirmed three times). The issue is now resolved with the product images staying fixed while scrolling through descriptions on desktop.

Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.
1

See a product on my store here:
https://www.maison-gstaad.ch/products/sophia-button-down-short-sleeve-dress

See store i am inspired by:
https://klarisse-stkilda.com/collections/bestsellers/products/ava-boho-dress-1

See on the inspiration store, the image freezes at the bottom of the image whilst scrolling until reaching the end of the description section on the right?

On my store, the image disappears right away and it becomes all white space on the left side, which looks crappy.

How do i make my store the same as the inspiration? Only for desktop view, my mobile view is fine!

Thanks…

1 Like
2

Hi @flaminmoe

let try to add custom css code below:

@media screen and (min-width: 1000px) {
    .product-gallery {
        position: sticky;
        top: calc(var(--header-height) + var(--announcement-bar-height));
    }
}

then result:

BiDealDiscount_0-1746714506297.png
BiDealDiscount_0-1746714506297.png1004×880 207 KB

1 Like
3

Hello @flaminmoe

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > theme.css and paste this at the bottom of the file:
@media screen and (min-width: 1000px) {
.product-gallery {
position: sticky;
top: calc(var(--header-height) + var(--announcement-bar-height));
}
}

devcoders_0-1746722479107.png
devcoders_0-1746722479107.png1365×626 103 KB

1 Like
4

Hello! Where in the theme code do i paste!? Product page???

5

NVM IT WORKED!!

6

IT WORKED!

7

IT WORKED