How to add a sticky categories sidebar to your Squarespace 7.1 shop page (CSS)
Pin to save for later!
Sticky elements are trending right now, and for good reason.
Sticky elements are design elements on a website that remain fixed in their position as the user scrolls down the page. If used correctly, sticky elements can enhance user experience, increase engagement and improve content visibility.
Sticky elements are a great solution for your shop page, as they keep categories visible to the viewer as they scroll your products.
In this tutorial, we walk you through how to add sticky shop page categories to your Squarespace 7.1 website in a few easy steps.
Example:
Getting Setup
Navigate to: Shop page > Edit Mode > Edit Section
Under the Format tab, select the following settings:
Categories Type — select Sidebar
Header Text Alignment — select Left
Save changes!
Add the CSS
From your Squarespace dashboard, go to:
Website > Scroll down to Website Tools > Custom CSS & copy/paste the CSS below
// STICKY SHOP CATEGORIES
@media screen and (min-width: 640px) {
.nested-category-tree-wrapper {
position: fixed !important;
z-index: 2000;
display:block;
margin: 5vw;
}
.list-grid {
margin-left: 22vw;
margin-right: 0vw;
}}How to change sticky category placement:
To update the margin of the categories, update margin: 5vw; to value of choice.
To have more control on shop category placement, replace margin: 5vw; with:
margin-top: 5vw;
margin-left: 5vw;
Update 5vw to value of choice.
How to change margin between categories & shop grid:
Update margin-left: 22vw; to value of choice
Don’t forget to save all changes!
All set!
Use discount code STYLEDSQUARE10 to save 10% off your Squarespace subscription
* Disclaimer: This post contains affiliate links. We may earn a commission should you chose to sign up for Squarespace using our link. Affiliate links are a great way to show your support for our content with no additional cost to you!
