Superstore includes two Collection Page templates to organize and showcase your products: Default and Minimal. Collections gather products together and collection page templates display the products included in that collection. Use the theme editor to control theme features and settings for the collection page.
Open a Collection Page Template
Use the page selector to open Collections, then Default collection or Minimal.
Collection Page Template Settings
Click the Collection pages section in the left sidebar to customize general settings.
Breadcrumbs
Enable Show breadcrumb navigation to include a 'trail' of links for the product's collection and the home page.
Limited to the Default collection template
Collection image
Enable Show collection image to include the collection's featured image in the template.
Limited to the Default collection template
Products per page
Adjust the number of products included on the page with the Products per page slider. Select 24, 36, or 48 with this setting.
Pagination method
When the number of products extends beyond the set maximum per page, there are three options for pagination: Jump-to-page, Infinite scroll, and Click-to-load. Use the Pagination method to select one of these options.
Jump-to-page includes page numbers at the bottom of the page for easy navigation and quick access.
Infinite scroll automatically loads more products when the customer scrolls down the page.
Click-to-load adds a button prompting the customer to load more products.
Utility bar
Enable settings for the Utility bar to activate the feature.
Limited to the Default collection template
Enable the Show "Sort by" dropdown setting to offer customers a sorting feature to reorganize the product grid.
Enable the Show grid/list view toggle setting to include buttons for customers to switch between the list and grid views.
Minimal template's products per row
For the Minimal template, adjust the Products per row to adjust the number of products included in a horizontal row.
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.
Sidebar Blocks
Click the toggle beside Collection pages to toggle the blocks. There are two block options to use: Filters and Menus.
Filters
There are two options for Filters on the collection page: Faceted Filtering and Tag Filtering.
Faceted filtering
With Online Store 2.0, Shopify added Collection and search filters to the Navigation admin.
This filtering system is enabled by default.
Tag filtering
To use the legacy, tag-based filtering system, select Tag filtering from the Filter type dropdown.
Product counts
To show customers how many products feature each filter, enable Show product counts. The total will display beside each filter listed.
Hide additional filters
Use the Hide additional filter after dropdown to restrict the number of filters displayed in the sidebar. By default, all tags will be displayed. The available options here are:
- 5 filters
- 6 filters
- 8 filters
- 10 filters
- 15 filters
- 20 filters
- Show all filters
For example, if you selected 5 filters, the list of filters will truncate after 5 instances.
Filters position
Position the filters Above menus or Below menus by selecting either option from the Filters position dropdown.
Tag filter features
Use the Filters dropdown to organize and display tag filters By tag or By group.
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.
Add tags in the Products admin
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
e.g. Kitchen_Cutlery
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.
Grid layout for filters
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.
Re-order filters
By default, the sequence for the Collection page filters is arranged alphabetically.
Reorder groups
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.
Menu
Add a Menu to the sidebar by selecting a Menu block. Click Select menu to connect the menu.