About Collection Filter & Toolbar
The Collection Filter & Toolbar is a feature that provides customers with options to sort and filter products within a collection.
It 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 steps below.
Add a Collection Filter & Toolbar with Collection Toolbar Element
Step 1: Update Collection’s Sort Orders in the Shopify admin
The sort order will follow the 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 Manually, then hold the (⋮⋮) icon to move it to the place that you want in the product list.
Changing sort orders can be recorded automatically right after your adjustment.
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 in the GemPages editor.
Step 3: Add Product List Element
- Drag and drop the Product List element onto your collection page.
- Now, configure the product list settings. Connect it to the Shopify collection you have created earlier and 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
- Once you are located in the editor, search for the “collection toolbar“.
- Drag and drop the Collection Toolbar above or beside the Product List element, depending on your desired layout.
- Then, configure the toolbar settings as you prefer.
Refer to this article for further details and how to customize the Collection Toolbar element in GemPages.
- Hit the Save button at the top-right corner of the editor to save your changes. You can also preview the page before publishing it to ensure the best result.
FAQs
1. Why is my Collection Filter & Toolbar not showing on the page?
- Make sure you’ve added the Collection Toolbar element to a Collection Page type.
- Confirm that the Product List element on the page is connected to a Shopify collection.
- Ensure that your Shopify store has products assigned to that collection.
- Refresh the live page to see changes after saving in the editor.
2. Can I use the Collection Filter & Toolbar on non-collection pages?
No. This feature only works on Collection Page types in GemPages, as it pulls data directly from your Shopify collections.
3. How do I change the sorting options available in the toolbar?
Go to Shopify Admin > Products > Collections, open the desired collection, and adjust the Sort settings under the Product section. The toolbar will follow these settings automatically.
4. Will the Collection Toolbar automatically update when I add new products?
Yes. Once your product list is linked to the Shopify collection, any new products added in Shopify will appear in the list and be reflected in the toolbar filters.
5. Can I customize the look of the Collection Filter & Toolbar?
Yes. In the editor, select the Collection Toolbar element to adjust typography, colors, spacing, and alignment so it matches your store’s branding.
