Stacking the shop categories, on mobile, in Squarespace (7.1)

Mar 29

This tutorial tackles something that not everyone considers an issue: the categories layout on mobile in Squarespace 7.1‘s shop pages.

If you have no idea what I’m talking about, chances are this hasn’t been a problem for you or your clients.

However, I’ve had a few designers tell me that their clients did not find the native layout intuitive at all and wanted to offer them an alternative.

So, today I want to share with you the 2 workarounds I gave them in the hopes that you find them helpful too, wether for current or future projects.

Let’s get into it!

August 2022: the code at the bottom of the post has been updated to include an optional snippet that can help you turn the categories into buttons!

Tutorial

Overview & timestamps

00:00 - Intro
01:25 - Looking at the shop categories problem
Before we jump into fixing the problem, I’ll be showing you what I’m actually talking about because, as I said, this may not even be an issue you’ve faced before! Not all clients dislike the layout.
02:12 - Looking at the structure of the categories
Now that we’re clear about what we’re dealing with, we’ll take a look at how the categories section has been built to see what we need to tweak to shift the layout from horizontal to something more vertical.
03:19 - What to do to allow the categories to drop into a new line
Noticing the property that’s currently in place forcing all categories to sit side-by-side, we’ll be able to tell the value that needs to be modified in order to allow the content to drop (or wrap) into multiple lines when it doesn’t fit the available space anymore. At this point, we’ll also decide the selector to use to make this modification happen seamlessly.
05:31 - Wrapped categories after overriding the original value
With our new value in place, all the categories are now visible! And it’s just a matter of centering things to make everything look great.
06:21 - Removing the horizontal scroll bar
Lastly, we’ll get rid of that annoying horizontal scroll bar that’s not needed anymore.
08:30 - Looking into achieving a fully stacked category layout
Up next, we’ll take a look at what we need to do in order to make the shop categories actually stack on top of each other, to have each one sitting in its own individual row. We’ll have to look at the structure once again to check which property we need to override to make this happen.
10:26 - Reusing the selector
Once we’re clear on what we need to do, we’ll reuse the original selector inside the same media query we applied before, just to make sure that only mobile gets modified.
10:45 - Changing the direction value to stack the categories
All that’s left to do here is apply our vertical value to change the direction of the categories from horizontal to stacked!
11:08 - Removing the horizontal scroll bar
Because the horizontal scroll is still there, we’ll get rid of it the same way we did with the previous method.
11:27 - Center-aligning the categories
To make sure everything looks great, we’ll use a different center-aligning property here to make sure all the categories look neatly organized on top of the shop products.
11:56 - Removing the category dividers
And last but not least, we’ll get rid of the shop category dividers that are in the way of the new lovely vertical layout.

Alright, and there you have it!

Now you know how to tackle this shop category situation in 7.1 for future projects.

Until next time,

Full code

/*STACKING THE SHOP CATEGORIES, ON MOBILE, IN SQUARESPACE 7.1*/
//Option #1
@media screen and (max-width: 575px) {
  .products.collection-content-wrapper .nested-category-children {
    flex-wrap: wrap;
    justify-content: center;
    overflow-x: hidden;
  }
}

//Option #2
@media screen and (max-width: 575px) {
  .products.collection-content-wrapper .nested-category-children {
    align-items: center;
    flex-direction: column;
    overflow-x: hidden;
  }
  .nested-category-breadcrumb-list-item .breadcrumb-separator {
    display: none;
  }
}

Optional code

Note: if you want to apply the button style to desktop as well, you can remove the media query line as well as its corresponding closing bracket!

//To turn the shop category labels into buttons
@media screen and (max-width: 575px) {
  .products.collection-content-wrapper .nested-category-breadcrumb-link,
  .products.collection-content-wrapper .category-link {
    background-color: #ebebeb;
    border-radius: 5px;
    color: black;
    margin-bottom: .5em !important;
    padding: .2em .5em !important;
  }
}

Shop/product pageTutorial