Adding Nested Product Categories and Sticky Navigation to Your Squarespace Products Page
Hey there, Squarespace enthusiasts! Travis here, your go-to web design expert for creating dynamic, user-friendly websites. In today’s post, we’re exploring how to elevate your online store: nested product categories and sticky navigation for your Squarespace products page. If you’ve been dreaming of an intuitive shopping experience for your customers, this tutorial is for you.
And guess what? This blog is the perfect sidekick to my YouTube video on the same topic. So after reading, hop over to watch me demo it all in action. Let’s get started!
Watch The Video👇
Why Use Nested Product Categories?
If your store has more products than you can count on two hands (congrats, by the way!), nested categories keep everything organized. They allow you to group your items into main categories and subcategories—up to three levels deep. This structure makes it easier for customers to navigate your store, find what they need, and, most importantly, hit that "Add to Cart" button.
For example, imagine you run an outdoor gear shop. Your categories could look like this:
Camping Gear
Tents
Sleeping Bags
Camp Kitchen
Fishing Equipment
Rods & Reels
Tackle Boxes
Apparel
Nested categories not only enhance the shopping experience but also give your store a clean, professional vibe.
How to Set Up Nested Product Categories in Squarespace
Here’s the step-by-step breakdown:
Access the Category Manager
In the Pages panel, locate your store page and click the ⚙️ icon.
Select Categories.
Create Main Categories
Enter a category name in the field provided. Press Enter to save it.
Add Subcategories
Hover over a category and click the “...” menu.
Select Add Subcategory. Enter its name and press Enter.
You can repeat this process to nest subcategories up to three levels deep.
Reorder Categories
Drag and drop categories to rearrange their order.
The displayed order directly affects how they appear in your store navigation.
Customize Category Settings
Hover over a category and click Edit to tweak settings like:
Name (displayed in navigation)
URL slug (used in filtered page links)
Filter visibility (hide categories you don’t want visible).
Pro Tip: Want to showcase a specific category on your main navigation? Use the “Add to main navigation” option for quick access.
Creating a Sticky Category Navigation
Ever been on a website where the navigation stays put as you scroll? That’s what we’re implementing here. A sticky menu keeps your nested categories in view, so customers can jump between sections without scrolling back to the top. Here's how to do it with a simple CSS tweak.
CSS Code for Sticky Navigation
Copy and paste this code into your Squarespace CSS editor:
// Products: List Page Sticky Category Navigation //
.products.collection-content-wrapper .nested-category-tree-wrapper {
position: sticky;
top: 200px;
}
This code ensures that your category navigation sticks to the top of the page (200px below, to be exact) as users scroll. Feel free to adjust the top value if you want it closer to or farther from the top edge of the viewport.
Make It Your Own
To display your nested categories in a sidebar, head to the Section Editor and choose Sidebar Position for the category navigation. This layout works beautifully with sticky navigation, giving customers a consistent browsing experience.
Ready to Transform Your Store?
Adding nested product categories and sticky navigation can do wonders for your store’s usability and aesthetics. Not only will customers love how easy it is to find what they need, but you’ll also look like a pro who’s serious about providing the best shopping experience possible.
If you’re feeling stuck (pun intended!) or need help implementing these features, I’m here to help. Reach out to me at Coyote Moon Creative, or check out my YouTube video for a walkthrough. Let’s make your Squarespace store the envy of the internet! 🌙
Got questions or want to show off your revamped store? Drop them in the comments below. Happy designing!
Your Designer
I'm Travis, an expert Squarespace web designer and 7+ year former Squarespace employee. I have worked with every type of business, building platforms for solo entrepreneurs through to multi-million dollar corporations. If you want to discuss a potential project, you can email at travis@coyotemooncreative.com. Alternatively, you can book a 30-minute consultation call here.
Newsletter Signup
Sign up for my newsletter to receive detailed Squarespace design tutorials delivered to your inbox monthly. Get practical Squarespace design tips, as well as digital marketing strategies to grow your online business.
