How to Freeze Product Item Details on Product Page from Scrolling?

Site URL: https://shopdearearth.com/woman/dolman-diagonal-top-black

Can anyone link me to where I can find source code on how to freeze the right side of the Product Description (the excerpts and product details) from scrolling?

I would like for the page to keep the excerpt up top while the stacked images on the left continue to scroll with the page. Similar to how Zara does it. 

Any ideas?

Add to Home > Design > Custom CSS

.tweak-product-item-details-alignment-left .ProductItem-details {
    position: sticky;
    position: -webkit-sticky;
    top: 50px;
}

8 hours ago, tuanphan said:

Add to Home > Design > Custom CSS

.tweak-product-item-details-alignment-left .ProductItem-details {
    position: sticky;
    position: -webkit-sticky;
    top: 50px;
}

 

This worked perfectly! Thank you so much! You can see the code changed in the site already. 🙂

Would it be possible to also "stick" the [ProductItem-details-title] as well?
 

On 12/2/2020 at 11:47 PM, baez said:

This worked perfectly! Thank you so much! You can see the code changed in the site already. 🙂

Would it be possible to also "stick" the [ProductItem-details-title] as well?
 

change 50 to 100px

@tuanphan is it possible to achieve the same effect the other way round? so fix the gallery on the left hand side and be able to scroll through the description on the right? 

4 hours ago, donforello said:

@tuanphan is it possible to achieve the same effect the other way round? so fix the gallery on the left hand side and be able to scroll through the description on the right? 

Can you share site url? We can check easier

@tuanphan thanks a lot: 

https://greyhound-alpaca-f863.squarespace.com/vintage-watches-store/p/enicarseapearl1

password: alpaca

@tuanphan actually, I think I was just able to solve it with the code below! 🙂

On another note: the summary of other products (recommendations) below the product always include the current product as first item.. is there a way to remove / hide the current product from the summary below?

Thanks

.tweak-product-basic-item-thumbnail-placement-below .ProductItem-gallery {
      position: sticky;
      top: 10px;
      align-self: flex-start;
      height: auto;
}

On 1/10/2021 at 7:23 PM, donforello said:

@tuanphan actually, I think I was just able to solve it with the code below! 🙂

On another note: the summary of other products (recommendations) below the product always include the current product as first item.. is there a way to remove / hide the current product from the summary below?

Thanks

.tweak-product-basic-item-thumbnail-placement-below .ProductItem-gallery {
      position: sticky;
      top: 10px;
      align-self: flex-start;
      height: auto;
}

Hi. I think no way to hide current product.

Site URL: https://joseanglada.com/

Can anyone link me to where I can find source code on how to freeze the right side of the Product Description (the excerpts and product details) from scrolling? THANKS!

I tried using this code it worked correct on the web but when the website is responsive specially on mobile it is not working. All my text is over the image as soon as I start to scroll.

@tuanphan could you please help me? ;) 

23 hours ago, Sayali said:

I tried using this code it worked correct on the web but when the website is responsive specially on mobile it is not working. All my text is over the image as soon as I start to scroll.

Thanks for the insights @Sayali. 
I know nothing about coding and I am afraid I will mess up. :/ 
On the other hand, there are some improvements I would love to achieve on the website and coding seems the only way! (what a dilema!)

@media screen and (min-width:641px) {
.tweak-product-basic-item-thumbnail-placement-below .ProductItem-gallery {
      position: sticky;
      top: 10px;
      align-self: flex-start;
      height: auto;
}
}

On 5/16/2021 at 8:26 AM, tuanphan said:

@media screen and (min-width:641px) {
.tweak-product-basic-item-thumbnail-placement-below .ProductItem-gallery {
      position: sticky;
      top: 10px;
      align-self: flex-start;
      height: auto;
}
}

 

Thanks alot this worked perfectly 

Hi @tuanphan, I'm trying to update my code to make it work on a new page.

As of now, here is what it looks like:@media screen and (min-width: 1024px) {
.page-section:first-child .sqs-col-4 {
    position: -webkit-sticky;
    position: sticky;
    top: 50px;
 }}

It works fine here:https://www.maisonmariet.fr/carnets
Now, I'm trying to update it for a new layout:http://maisonmariet.fr/porte-cartes-1-1

Can you please help me fix it?
Thanks in advance for your time.

On 12/18/2021 at 12:41 AM, nicolusse88 said:

Hi @tuanphan, I'm trying to update my code to make it work on a new page.

As of now, here is what it looks like:@media screen and (min-width: 1024px) {
.page-section:first-child .sqs-col-4 {
    position: -webkit-sticky;
    position: sticky;
    top: 50px;
 }}

It works fine here:https://www.maisonmariet.fr/carnets
Now, I'm trying to update it for a new layout:http://maisonmariet.fr/porte-cartes-1-1

Can you please help me fix it?
Thanks in advance for your time.

Use this code

@media screen and (min-width:768px) {
div#page-section-61bcb9715a66be3ec0bee371 .span-3 {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
}
}

@tuanphan,

Thanks for your help. It works with .span-4 and not .span-3 though. I've tried and somehow it worked!

@media screen and (min-width:768px) {
div#page-section-61bcb9715a66be3ec0bee371 .span-3 {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
}
}

Hey, have been triying for so long to get it but it just dosent seem to work @tuanphan I tried every css code in this thread. Is it maybe because i need to adjust the settings in the site styles? Here is the page:

HUMBLE WHITE HOODIE — HUMBLUX

I want the product description page to be fixed while the product image gallery is scrollable like this page:

Tinted notebooks — Maison Mariet

If you can help a friend out with this would be really helpful! Thanks man!

6 hours ago, ArtSpeaks said:

Hey, have been triying for so long to get it but it just dosent seem to work @tuanphan I tried every css code in this thread. Is it maybe because i need to adjust the settings in the site styles? Here is the page:

HUMBLE WHITE HOODIE — HUMBLUX

I want the product description page to be fixed while the product image gallery is scrollable like this page:

Tinted notebooks — Maison Mariet

If you can help a friend out with this would be really helpful! Thanks man!

It looks like you figured it out. I see it stickys here

@tuanphan Yea thank you so much i seen you answer someone else in another thread!

@tuanphan I used the first code you suggested to freeze the product details on the right side it worked thank you. How ever i would like to do the same for the mobile version but Cannot seem to find a code for that.I would like it the title of the image , price and add to cart button fixed on the screen while scrolling . For some reason i cannot  attach the image so I am attaching the link to the other website to show how would i like my website to be. Please check the mobile version for this product page.

https://www.jacquemus.com/product/le-pantalon-marino-navy-checks

On 4/20/2022 at 4:43 PM, Meghna said:

@tuanphan I used the first code you suggested to freeze the product details on the right side it worked thank you. How ever i would like to do the same for the mobile version but Cannot seem to find a code for that.I would like it the title of the image , price and add to cart button fixed on the screen while scrolling . For some reason i cannot  attach the image so I am attaching the link to the other website to show how would i like my website to be. Please check the mobile version for this product page.

https://www.jacquemus.com/product/le-pantalon-marino-navy-checks

Hi,

Fixed at bottom of screen? Can you share link to a product on your site, we can test code easier

Hi

Yes I want add to cart button fixed/ frozen at the bottom when scrolling just for the mobile view. 

Also if it is possible to show the price and title of the garment  as shown in the image below with it. 

Link to the website how i would like it to be. 

https://www.jacquemus.com

My website link - https://www.szabosihag.com

Please let me know if there is a way to achieve that.