Superstore comes with an optional sidebar on its collection pages. This feature displays product filters, which can set up using tags in the Products admin. You can even set up filter groups, which makes 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, hide additional tags, 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, consider enabling By group. Using a specific format, tags can be grouped together to ease customer access and use.
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:
Group_Tag Name
Using this format is required to achieve the group organization on the Collection page. Spaces can be included on either side of the underscore, but no special characters.
Hide additional tags
Use the Hide additional tags after dropdown to restrict the number of tags displayed in the sidebar. By default, all tags will be displayed. The available options here are:
- 5 tags
- 6 tags
- 8 tags
- 10 tags
- 15 tags
- 20 tags
For example, if you selected 5 tags, the list of tags will truncate after 5 instances.
Show product counts
To show customers how many products feature each tag, enable Show product counts. The total will display beside each tag listed.
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
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. To display certain filter groups in a grid-style layout, enter the group name of the desired filters in 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 tag 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.
