Customizing Toolbar section

By customizing the toolbar elements, you can decide how the product list displays on the storefront.

• Note: This feature is only available for App Lib V3, please contact us for further instructions.

On this page

• Toolbar section configuration
• Toolbar section’s elements styling
  • View as element
  • Product count element
  • Show limit element
  • Sort by element

Watch our tutorial video to learn how to customize the Toolbar section:

Toolbar section configuration

To style the display of the toolbar on a page:

1. From the app's admin, go to Theme > Find [Target Theme] > Select Edit Visual Design.

2. Under the General Settings heading, go to the Toolbar section > In the drop-down of Layout on the right panel, select your toolbar layout.

• For Toolbar section, you will need to choose the layout which you want to apply for your theme. There are 6 layouts for you to choose.
• Toolbar section has 4 elements max that you can add to. Based on the theme you are using, the default elements has been added to the Toolbar section and displayed when you access the section for the first time.

• You can add these element on Toolbar section:
  • View as
  • Product count
  • Show limit
  • Sort by
• To add elements Toolbar section, click on Add element text in Toolbar section

Toolbar section’s elements styling

To style the display of the product list on a page:

1. From the app's admin, go to Theme > Find [Target Theme] > Select Edit Visual Design.

2. Under the General Settings heading > Select Toolbar on the left panel, modify Toolbar elements include:

View as element

• On the Right panel, you will see the View as element’s style to customize. You can choose the
  • 2, 3, 4 columns
  • 2, 3, 4, 5, 6 columns
  • Grid/List (Only support for Default theme, Warehouse theme and Empire theme)
  • 2, 3, 4 columns/List (Only support for Default theme, Warehouse theme and Empire theme)
  • 2, 3, 4, 5, 6 columns/List (Only support for Default theme, Warehouse theme and Empire theme)
• Click Save button to save all changes you have made

Product count element

• On the Right panel, you will see the Product count element’s style to customize. You can choose the
  • {{count}} products
  • Showing {{from}} - {{to}} of {{total}} products

Click Save button to save all changes you have made.

Show limit element

• With Show limit element, you cannot customize the setting for this element in this version.

Sort by element

• With Sort by element, you can customize the setting by access Tool Sort by options.

Click Save button to save all changes you have made.