Stack Squarespace shop categories/filters on mobile view

If you're using Squarespace and want to improve your online store’s mobile experience, you may have noticed that the shop categories or filters display in a single horizontal row. This can make navigation tricky for customers on smaller screens. A simple CSS tweak can help you stack these categories neatly for better usability.

1. Log in to your Squarespace website.

2. Go to Website Editor > Design.

3. Click on Custom CSS.

4. Copy and paste the following code snippet into the Custom CSS box:

@media screen and (max-width: 575px) {
    .products.collection-content-wrapper .nested-category-children { 
        flex-wrap: wrap; 
        justify-content: center; 
    }
}

What this code does

• Targets the shop category/filter section in Squarespace’s shop pages.

• Applies the changes only on screens 575px wide or smaller (mobile view).

• Uses flex-wrap: wrap; to allow category items to stack instead of staying in a single row.

• Centers the items using justify-content: center; for a clean look.

---

---