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