Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

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


Recommended Posts

  • Replies 14
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Popular Posts

Add to Home > Design > Custom CSS .tweak-product-item-details-alignment-left .ProductItem-details { position: sticky; position: -webkit-sticky; top: 50px; }  

@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 produc

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.

Add to Home > Design > Custom CSS

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

 

Link to post
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?
 

Link to post
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

Link to post
  • 1 month later...
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

Link to post

@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;
}
Link to post
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.

Link to post
  • 3 months later...

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!

Link to post

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.

Link to post
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!)

Link to post
@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;
}
}

 

Link to post
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 

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...