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

[flaminmoe]

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...

[BiDeal-Discount · Accepted solution]

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:

[flaminmoe]

IT WORKED

[devcoders]

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));
}
}

[flaminmoe]

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

[flaminmoe]

NVM IT WORKED!!

[flaminmoe]

IT WORKED!