Easy Guide to Adding a Sticky Categories Sidebar on Squarespace 7.1

Sticky elements are getting popular these days, and it's for a good reason.

So, what are sticky elements? Well, they're those design elements on a website that stay in one place even when you scroll down. When used the right way, they can make your experience on a website better, get you more interested, and help you see the content more easily.

Imagine this: you're on a shop page, and you want to see different categories as you scroll through the products. That's where sticky elements come in handy. They keep those categories right in front of you, no matter how far down you scroll.

In this blog, we're going to show you how to add sticky shop page categories to your Squarespace 7.1 website in just a few simple steps. Let's get started!

Set Up First:

1. Navigate to: Shop page > Edit Mode > Edit Section

2. Under the Format tab, select the following settings:

• Categories Type — select Sidebar

• Header Text Alignment — select Left

3. Save changes!

Apply The CSS:

Code:

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

This code is designed to make your shop categories sticky on the page when the screen is at least 640 pixels wide. It ensures that the category tree stays fixed in its position and adjusts the margins for proper spacing. Copy and paste this code into the Custom CSS section of your Squarespace dashboard under Website Tools to implement the sticky shop categories.

Certainly! Here's a simplified guide on how to customize the placement and margin of your sticky shop categories:

Changing Sticky Category Placement:

To adjust the overall placement of categories, modify the value in the line:

margin: 5vw;

Update 5vw with the preferred value.

For more precise control, replace the line with:

margin-top: 5vw;

margin-left: 5vw;

Again, update 5vw with the desired value.

Changing Margin Between Categories and Shop Grid:

To modify the spacing between categories and the shop grid:

Locate the line:

margin-left: 22vw

Update 22vw with the desired value to change the margin between categories and the shop grid.

Feel free to experiment with different values until you achieve the desired look and feel for your sticky shop categories. Remember to save your changes after updating the CSS in your Squarespace dashboard.