How to filter your collections with the (C) Toolbar element

In this article, we will walk you through steps on how to add the filter feature to your collection pages.

Set up filter tags on the Shopify admin

The filter category contains all the tags of the products in a certain collection. These product tags can be customized from your Shopify Admin by following the steps below:

 

Step 1: Go to Shopify Admin > Product and select your preferred product.  

Step 2: Locate the Tags section in the right sidebar. Enter the tag in the field below and hit “Add.”

 

 

Step 3: Hit “Save” when finished. 

 

 

Add the (C) Toolbar element to your page

From the GemPages Dashboard > Collection Pages, open your preferred template to edit. You can quickly find the (C) Toolbar element on the left sidebar of the Editor, under the Collection section.

 

 

Under the filter drop-down, you will see all the product tags added previously.

 

 

Click on the element to view its configurations in the left sidebar, including Settings and Design tabs.

Configure the Settings Tab

Display

  • Filter text: Enter the text label for the filter functionality.
  • Sorting text: Enter the text label for the sort functionality.
  • Show total quantity: Toggle on the “Show quantity” switch if you would like to show the number of products in your collection. Enter the text you want to display in the field below. 

The number of products should be inputted as “%number%” so that the quantity will be updated automatically.

The number of products displayed in this section is applied for both sort and filter features. To explore more information about how to sort a collection, click here.

Typography

You can easily adjust the text display of the toolbar by switching between the Quantity and Selector tabs. Quantity is the text showing the number of products while Selector is the text of selected options.

  • Font Size: Adjust the font size of the text using the slider or the number box.
  • Color: Pick a color or enter the hex color code for the color of the text.
  • Font: Choose the font for your text from the drop-down menu. Click on “Font manager” to explore more fonts available on GemPages. In case you want to use a custom font, kindly take a look at this article.


 

Dimension

You can manually adjust your toolbar’s width and height by entering values in this section.

 

 

You can switch the dimension unit between Pixel and Percentage by hitting the icon at the end.

Alignment

This parameter allows you to determine how the element is positioned on your page. There are three options to choose including left-aligned, centered, and right-aligned.

 


 

Configure the Design tab

To style how the element looks, please navigate to the Design tab and follow the instructions in this article

 

That's it! Remember to "Save" and "Publish" your page to bring the update to the live store.

In case you prefer more advanced search and filter features, we recommend Smart Search and Instant Search, or Product Filter & Search apps that are seamlessly integrated with GemPages.

 

If you're interested in learning more about the powerful and user-friendly GemPages, feel free to explore the Help Center or get in touch with our customer support via email or live chat.


Was this helpful?