How to Add a Sticky Categories Sidebar to Your Squarespace 7.1

Sticky elements are trending these days, and there is a good reason why.

So, what are sticky elements? Well, they are the design elements on a website that remain static when you scroll down. If employed correctly, these tools will enhance your website experience further encourage you, and make it easier to digest the content.

Example 1: Shop page with product categories on scroll That’s where sticky elements come into play. They keep those categories in front of you, scroll after scroll.

In this blog, we will show you how to implement sticky shop carry categories in your Squarespace 7.1 website! 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;
 }
}

The code will make your shop categories sticky on the screen at least 640 px wide. It keeps the category tree fixed in position and adjust margin for spacing. To implement sticky shop categories, copy and paste the following code in Custom CSS in your Squarespace dashboard under Website Tools.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.

---

Frequently Asked Questions

1. What do you mean by sticky categories sidebar?
An always a visible sidebar while scrolling so getting product categories is much easier.

2. Is this applicable to all Squarespace 7.1 templates?
Yes, but you will likely need to make some minor css adjustments based on your site layout.

3. Do I need coding knowledge?
It requires only basic CSS and JavaScript, and the guide is very approachable.

4. Will this work on mobile?
By default, it is desktop-optimized. You might also need extra CSS for mobile.