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:

Copy

Copied!

/* 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 is a sticky Squarespace sidebar?

A sticky sidebar refers to a sidebar widget (e.g: product categories) that sticks to the page as a user scrolls. It improves the usability by making relevant filters or links always visible.

2. Can you put a sticky sidebar in Squarespace 7.1 without a third-party plugin?

Yes! But—because no one actually needs a plug-in—you can actually add a sticky sidebar with native section settings and few lines of custom css code directly in your Squarespace dashboard.

3. Where should I add the sticky sidebar CSS in Squarespace?

Go to:

Home → Design → Custom CSS

Simply paste the CSS code into the box and press Save to save the changes to your site.

4. Will it be a sticky sidebar for mobile as well?

The sticky in this guide is only for screens 640px and up (tablets, desktops). It is to prevent a layout problem in small mobile devices.

5. How do I adjust the placement of the sticky sidebar?

Edit the CSS value:

css

CopyEdit

margin: 5vw;

For more control, break it down:

css

CopyEdit

margin-top: 5vw;  

margin-left: 5vw;

You can change 5vw to any px, %, or em value depending on how far you want the sidebar from the top or side.