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

In this article, you will learn about the (C) Toolbar - a child element of the Collection Pages and how to use it to give visitors a better search experience.

Update Collection’s Sort Orders in the Shopify admin

Please be aware that 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.

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.

 

 

As a child element defined by the (C) prefix, the (C) Toolbar element should be located on a collection page to work correctly. 

 

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, 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.

The (C) Toolbar element can also be used to filter collections. 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?