Sticky excerpt to product description pages on Skye

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

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

 

 

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

Site-wide passwords – Squarespace Help

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

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

Thank you! 

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!

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!

You mean image to 2 items/row?

12 hours ago, tuanphan said:

You mean image to 2 items/row?

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

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;
}
}

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.

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

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;
}
}

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;
}
}

Thank you so much that worked perfectly!

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;
}
}

Hi Tuanphan, Is there any way for me to have this layout change only on desktop not mobile? On mobile, it seems to work better as the original slideshow. Thank you in advance for your help!

20 hours ago, Daniellerose said:

Hi Tuanphan, Is there any way for me to have this layout change only on desktop not mobile? On mobile, it seems to work better as the original slideshow. Thank you in advance for your help!

Hi. The code works on 768px or higher. So it won't run on mobile.