(C) Toolbar element

In this article, we will walk you through steps on how to add the sort and filter feature to your collection pages using our (C) Toolbar element.

About the (C) Toolbar element

The (C) Toolbar element is used when you want to enable your visitors to filter and sort the products on your collection pages.

Please be noted that the (C) 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.

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.

Step 1: From your Shopify Admin, navigate to Products > Collections. Select your preferred collection to change the sort order.

Step 2: 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.

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.

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.

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, check it here.

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.