Superstore comes with an optional left-hand sidebar on its collection pages. When enabled, this feature displays product filters, which can set up using tags in the Products admin. You can even set up filter groups, which make it easier for your customers to sort your products using subgroups.
Use the theme editor to activate the sidebar, select a filter option, include navigation menus, display filters in a grid layout, and change the filter order.
Activate the sidebar
To show a sidebar on your collection pages, start by checking Show sidebar.
Select a filter option
Select how your Filters display with the corresponding dropdown. You can display them using By tag or By group.
By tag
If you display them By tag, all of the tags you have used will be displayed as checkable boxes in the sidebar. You can add and edit tags for each of your products in the Shopify admin.
You can find the tags section under Products > [Product name] > Organization > Tags
Group tags
If you have a lot of products, you may want to enable subgroups. You can do this in the same Tags field of your product admin, but prepend existing tags with the name of the group then an underscore, like so:
Group_Tag Name
It's important that you use this format—where the left side of the underscore is the group name and the right is the tag for the product. Spaces can be included on either side of the underscore, but no special characters.
Include navigation menus in the sidebar
Superstore comes with the option to add additional menus in the sidebar. They will not display unless you have checked Show sidebar in the Sidebar settings above.
To add a menu, click [+] Add menu or one of the existing menu blocks, then click Select menu to display options drawn from the Navigation settings.
Control how many navigation tiers appear
You can also customize the depth of your menus using the Menu depth visibility slider (maximum 3). This determines how many nested menu tiers are included in the sidebar menu.
Display filters in a grid layout
Filters in the sidebar are presented in a vertical list by default. Display certain filter groups in a grid-style layout, enter the group name of the desired filters into the Display filters as grid field.
For example, to change the 'Brand' group filters on the Superstore Fashion demo's Bags & Wallets, the name "Brand" would need to be added to the field to display this filter group as a grid.
Change the filter order
By default, the sequence for the Collection page filters is arranged alphabetically.
Reorder groups
Go to Customize > Open a Collection page in the right-side preview > Open Collection pages in the left-side settings > Scroll down to the Group order field
Use this field to add the tags groups in the preferred order. For example, if there are three groups on a collection page for Size (Size_Small, Size_Medium, Size_Large), Color (Color_Red), Price range (Price range_1.99-9.99), you could rearrange these to put Price range first by adding "Price range" to the Group order field.
Reorder tags
Rearrange the tags listed under groups with the Tag order field. Similar to the Group order field, the Tag order field is used to identify a new sequence for the listed tags (as opposed to the default alphabetical order).
Add the tags in the preferred order, using the full tag as it appears in the Products admin. For example, if there are tags for size:
Size_S, Size_M, Size_L, Size_XL
These would appear in alphabetical order (L, M, S, XL). To change these to order for ascending size, add these to the Tag order field in the preferred order.
