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
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
- 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 displayed in this section is applied for both sort and filter features. To explore more information about how to sort a collection, click here.
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.
You can manually adjust your toolbar’s width and height by entering values in this section.
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.