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

Sticky excerpt to product description pages on Skye


Recommended Posts

Hi I am using the Indigo template for my new website and do not have a URL yet, I am looking to make the product descriptions, add to cart etc, for each item "sticky" because currently when I am scrolling down the page to look at additional items the whole section just stays at the top. Would really appreciate some help have been looking at this all day and I cant find out how to do it anywhere! I have attached two images, one of the top of the page and then another of a scroll down which shows where the product description is missing. Thank you x

 

 

Screenshot 2020-11-16 at 18.25.34.png

Screenshot 2020-11-16 at 18.24.34.png

Link to comment
9 hours ago, Clarilou said:

Hi I am using the Indigo template for my new website and do not have a URL yet, I am looking to make the product descriptions, add to cart etc, for each item "sticky" because currently when I am scrolling down the page to look at additional items the whole section just stays at the top. Would really appreciate some help have been looking at this all day and I cant find out how to do it anywhere! I have attached two images, one of the top of the page and then another of a scroll down which shows where the product description is missing. Thank you x

 

 

Screenshot 2020-11-16 at 18.25.34.png

Screenshot 2020-11-16 at 18.24.34.png

You can set up site wide password so we can check your site and give suggestion accordingly

Site-wide passwords – Squarespace Help

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for Squarespace
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

With Indigo Template, add this to Home > Design > Custom CSS

section.ProductItem-details {
    position: sticky;
    position: -webkit-sticky;
    top: 20px;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • Susana_SQSP changed the title to Sticky excerpt to product description pages on Skye
  • 10 months later...
On 11/17/2020 at 1:23 AM, tuanphan said:

With Indigo Template, add this to Home > Design > Custom CSS

section.ProductItem-details {
    position: sticky;
    position: -webkit-sticky;
    top: 20px;
}

 

Sorry to bother you again, but I tried this and don't think it was working. I want to swap the product page to stacked format, but I want to do 2 columns instead of 1 single and would like to make one side sticky to scroll through photos/description. 

Here is a link to an example page: https://www.madigancashmere.com/shop-all/houndstooth-scarf

And I have attached a photo of the result I was looking to achieve if it is possible? Thanks so much!

Screen Shot 2021-10-09 at 2.44.47 PM copy.jpg

Link to comment
On 10/10/2021 at 1:51 AM, Daniellerose said:

Sorry to bother you again, but I tried this and don't think it was working. I want to swap the product page to stacked format, but I want to do 2 columns instead of 1 single and would like to make one side sticky to scroll through photos/description. 

Here is a link to an example page: https://www.madigancashmere.com/shop-all/houndstooth-scarf

And I have attached a photo of the result I was looking to achieve if it is possible? Thanks so much!

Screen Shot 2021-10-09 at 2.44.47 PM copy.jpg

You mean image to 2 items/row?

Email me if you have need any help (free, of course.). Answer within 24 hours.

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 10/11/2021 at 8:37 PM, Daniellerose said:

Yes please, 2 items/row when I change the product images to a stacked layout and then make the other side sticky, similar to as seen here, but always with 2 rows:

https://www.dior.com/en_ie/products/couture-144S60BM134_X0878-dioralps-stand-collar-sweater-white-three-tone-wool-knit-and-cashmere

Try adding to Design > Custom CSS > Then save & reload the site

@media screen and (min-width:768px) {
.ProductItem-gallery-slides-item.sqs-pdp-gallery-slide {
    opacity: 1 !important;
    width: calc(~"50% - 10px") !important;
    position: relative !important;
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 10px;
}
.ProductItem-gallery-slides {
    display: flex !important;
    flex-direction: row;
    flex-wrap: wrap;
}
section.ProductItem-details {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
12 hours ago, tuanphan said:

Try adding to Design > Custom CSS > Then save & reload the site

@media screen and (min-width:768px) {
.ProductItem-gallery-slides-item.sqs-pdp-gallery-slide {
    opacity: 1 !important;
    width: calc(~"50% - 10px") !important;
    position: relative !important;
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 10px;
}
.ProductItem-gallery-slides {
    display: flex !important;
    flex-direction: row;
    flex-wrap: wrap;
}
section.ProductItem-details {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
}
}

 

This looks great, except it didn't create 2 rows is the only part missing. The sticky part is working great, but would love 2 rows like in this photo so that the image fits closer to the fold:) Thank you SO MUCH for your help, I really appreciate it.

Link to comment
On 10/15/2021 at 2:59 PM, Daniellerose said:

Hi @tuanphan is there any way to make the 2 rows in this? Much appreciated in advance!

Use this new code

@media screen and (min-width:768px) {
.ProductItem-gallery-slides-item {
    opacity: 1 !important;
    width: calc(~"50% - 10px") !important;
    position: relative !important;
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 10px;
}
.ProductItem-gallery-slides {
    display: flex !important;
    flex-direction: row;
    flex-wrap: wrap;
}
section.ProductItem-details {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
}
}

image.thumb.png.5466e623a7b127a34106169005ad1a52.png

Email me if you have need any help (free, of course.). Answer within 24 hours.

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 10/17/2021 at 3:25 AM, tuanphan said:

Use this new code

@media screen and (min-width:768px) {
.ProductItem-gallery-slides-item {
    opacity: 1 !important;
    width: calc(~"50% - 10px") !important;
    position: relative !important;
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 10px;
}
.ProductItem-gallery-slides {
    display: flex !important;
    flex-direction: row;
    flex-wrap: wrap;
}
section.ProductItem-details {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
}
}

image.thumb.png.5466e623a7b127a34106169005ad1a52.png

Thank you so much that worked perfectly!

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