How to customize Toolbar section

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

âš  This article only works for Boost AI Search & Discovery V3 new Theme settings. To find out which version of our app your store's current theme is installed with, please follow this article.

On this page

Toolbar section configuration

To style the display of the toolbar on a page:

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

  1. Under the General Settings heading, go to the Toolbar section > In the drop-down menu of Layout on the right panel, select your toolbar layout.
  • For Toolbar section, you will need to choose the layout that you want to apply to your theme. There are six layouts for you to choose from.
  • The Toolbar section has four elements 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 Integration menu > select Shopify Integration > Find [Target Theme] > Select Edit Visual Design.

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

View as element

  • On the right panel, you will see the View element's style to customize. You can choose the
    • 2, 3, 4 columns
    • 2, 3, 4, 5, 6 columns
    • Grid/List (Only available for Default theme, Warehouse theme and Empire theme)
    • 2, 3, 4 columns/List (Only available for Default theme, Warehouse theme and Empire theme)
    • 2, 3, 4, 5, 6 columns/List (Only available 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 (displaying only the Total number of products)

      example

    • Showing {{from}} - {{to}} of {{total}} products (also displaying the number of products you're listing on each page)

      example

  • 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 accessing Tool Sort by options.
  • Click Save button to save all changes you have made.

Tutorial video

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


Should you have any questions or enquiries, please do not hesitate to reach out to our dedicated support team via support@boostcommerce.net.