Jump to content

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

Recommended Posts

Add to Home > Design > Custom CSS

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 3 months later...
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 comment
@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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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 comment
  • 6 months later...

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.

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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!

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 3 months later...


@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

Link to comment

HI

I was hoping is anyone could please help me with this.  I want add to cart button fixed/ frozen 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

image.png.a5549734243b7ca32137f37ed4b7434a.png

My website link 

https://www.szabosihag.com

 

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

 

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.