How can I make the product info wrapper sticky in DAWN 2.0?

Shopify Discussion
1

I have been experimenting on making the product info wrapper in my Shopify store sticky while scrolling, but I can’t seem to get it work. Below, I have added an image of the site that does what I am looking for.
I am using DAWN 2.0 as my theme.
The link to this website can be found here.
Thank you in advance!

example_website.png
example_website.png1316×787 162 KB

2

Hi @off-market_1

Please share your store link?

3

https://www.off-market-boutique.com/

4

Go to your Online store > Themes > Edit code > Assets > section-main-product.css, and add this code at the bottom of the

@media screen and (min-width: 750px) {
.product__column-sticky {
    display: block;
    position: sticky;
    top: 3rem;
    z-index: 2;
}
}

file

5

I did it, but it didn’t work.

6

Sorry, please update code to this

@media screen and (min-width: 750px) {
..product__info-container {
    display: block;
    position: sticky;
    top: 3rem;
    z-index: 2;
}
}
7

I assume the double “.” was a mistake! However, I did try it with double and single point but still no success.

8

I found the problem! In my section-main-product.css was a css called .product__column-sticky, I removed this one and added this code :

.product__info-container { 
display: block; 
position: sticky; 
top: 3rem; 
z-index: 2; 
}

And now it works exactly as expected! @Dan-From-Ryviu Thank you for your time and effort on this one.

9

You are very welcome