About Collection Filter & Toolbar
The Collection Filter & Toolbar is a feature that provides customers with options to sort and filter products within a collection.
The Collection Filter & Toolbar can only be applied to collection page types in GemPages. Ensure that your Shopify collection is set up before proceeding.
Please note that the Collection Toolbar element will pull the data from your Shopify Admin. You will need to set up from your Shopify Admin before following the below steps.
Add Collection Filter & Toolbar with Collection Toolbar Element
Step 1: Update Collection’s Sort Orders in the Shopify admin
The sort order will follow settings in the Shopify admin. If you would like to update it, you can follow the steps below.
- From your Shopify Admin, navigate to Products > Collections. Select your preferred collection to change the sort order.
- Under the Product section, you can choose the Sort type from the drop-down menu.
If you want to arrange it on your own, select Manual then hold the ⋮⋮ icon and move it to the place that you want in the product list.
Changing sort orders can be recorded automatically right after your adjustment; you do not have to hit Save after completing all the steps.
Step 2: Open or Create a New Collection Page in GemPages
Open the GemPages dashboard in your Shopify admin.
Find the collection page you want to edit. If none exists, click the “Create New Page” button and choose “Collection Page” as the template.
Click the Collection Page and choose “Start from scratch” or select a template to edit.
Now you can start designing your collection page.
Step 3: Add Product List Element
Drag and drop the Product List element onto your collection page.
Configure the product list settings:
- Connect it to the Shopify collection you created earlier.
- Customize the layout and style of the product list.
Check out our article about the Product List Element for more information.
Step 4: Insert Collection Toolbar
In the GemPages editor, search for the Collection Toolbar element in the Element Library.
Drag and drop the Collection Toolbar above or beside the Product List element, depending on your desired layout.
- Configure the toolbar settings:
You can refer to this article for more understanding of this element.
Save your changes by clicking the Save button at the top-right corner of the editor.
