Sticky Sidebar for Products Page

Site URL: https://www.caminodelvino.co.uk

Any reason why the Ghosts sticky sidebar code isnt working on Store pages for Squarespace 7.1? Any guidance would be greatly appreciated

https://www.ghostplugins.com/steps/sticky-product-category-sidebar-styles 

37 minutes ago, ferguswood said:

Site URL: https://www.caminodelvino.co.uk

Any reason why the Ghosts sticky sidebar code isnt working on Store pages for Squarespace 7.1? Any guidance would be greatly appreciated

 

https://www.ghostplugins.com/steps/sticky-product-category-sidebar-styles 

The description is longer than the product image part, so you can try this

.product-layout-side-by-side .ProductItem-gallery {
    position: -webkit-sticky;
    position: sticky;
    top: 160px;
}

3 hours ago, bangank36 said:

The description is longer than the product image part, so you can try this

.product-layout-side-by-side .ProductItem-gallery {
    position: -webkit-sticky;
    position: sticky;
    top: 160px;
}

 

Still doesn't like it @bangank36, any other ideas? Currently have the blow written and still isn't sticky...

7 hours ago, ferguswood said:

Still doesn't like it @bangank36, any other ideas? Currently have the blow written and still isn't sticky...

Where is that section

11 hours ago, bangank36 said:

Where is that section

It is on my store page - https://caminodelvino.co.uk/wine. I just want the sidebar to be sticky when someone scrolls down the page. Thank you!

4 minutes ago, ferguswood said:

It is on my store page - https://caminodelvino.co.uk/wine. I just want the sidebar to be sticky when someone scrolls down the page. Thank you!

.products.collection-content-wrapper .nested-category-tree-wrapper {
	position: -webkit-sticky;
    position: sticky;
    top: 100px;
}

52 minutes ago, bangank36 said:

53 minutes ago, bangank36 said:

.products.collection-content-wrapper .nested-category-tree-wrapper { position: -webkit-sticky; position: sticky; top: 100px; }

Working great with this code, thank you @bangank36 !

Is there any way to bring in the right hand side padding @bangank36? I've tried reducing using the code:

padding-right: 0px 

but there's still unnecessary white space. Any help would be greatly appreciated 

.products.collection-content-wrapper .nested-category-tree-wrapper {
    min-width: 150px;    
}

Beautiful stuff @bangank36, you're the best cheers 🙌

@bangank36 hey bangank, I am currently using sticky sidebar plugin works great! May I know how do I disable it on mobile view? I only wish to use it on desktop.

my site: Here

Thanks in advance.

9 hours ago, Supremo said:

@bangank36 hey bangank, I am currently using sticky sidebar plugin works great! May I know how do I disable it on mobile view? I only wish to use it on desktop.

my site: Here

Thanks in advance.

where is the sidebar?

@bangank36  here

Product sidebar. Updated.

@Supremo Have you solved it yet? If not, where is sidebar? Can you take a screenshot?

@tuanphan Would you be able to please show me the code to make the sidebar sticky, and is there a way for the page to not reload entirely each time a new category is selected please? 

www.igroomhub.com.au/shop

Any help appreciated 🙂

On 10/23/2021 at 4:25 AM, anna_ said:

@tuanphan Would you be able to please show me the code to make the sidebar sticky, and is there a way for the page to not reload entirely each time a new category is selected please? 

www.igroomhub.com.au/shop

Any help appreciated 🙂

#1. Add to Design > Custom CSS

/* sticky product description */
@media screen and (min-width:992px) {
section.product-details.ProductItem-details {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
}
body.collection-type-products.view-item {
    overflow: visible !important;
}
}

#2. You need to use Filter Plugin to recreate new sidebar filter.

Quote

(The answer contains an affiliate link, which means I will receive a small commission if you click and buy the plugin according to the link above.)