How to customize the display of your filter trees and product list

đź“– Boost allows you to edit how your filter trees and product lists are displayed when your customers access your store and use the filters to narrow their product searches.

On this page

To customize the display of your filter trees

To edit the display of your filter trees:

1. From the app’s dashboard, go to Filter > Filter settings.

2. Under the Display settings heading, select any options to customize how your filter trees are displayed on your storefront:

  • Show product count: When enabled, the quantity of each filter option will be presented on the right-hand side of the filter tree ( the number is put inside parentheses).

  • Show "Refine by" block: When selected, the selected filter criteria that correspond with the shown product list will be displayed here. This block provides your customers with the convenience to deselect and edit applied filters.

  • Show all irrelevant values (product count = 0): Filter values only containing out-of-stock or unavailable products will have a product count of 0 and will not be shown on the filter value list. When this option is enabled, these filter values will be shown on the filter tree with a "0" product count to notify your customers of the unavailable status.

đź’ˇ This feature only works if you select Manual in the drop-down of Option values when setting up any filter option.

  • Shorten URL when selecting multiple filter option values: When multiple filter values are selected, long-form URLs can be untidy to your customers. This setting helps you reduce the length and complexity of those URLs to let search engines know what your page is about.

  • Hide filter options with only one filter option value: When enabled, the filter options with only one value in your filter trees will not be presented on the store pages.
  • Keep filter options collapsed status after filtering: When enabled, the collapsed state of the filter options will remain the same after selecting a filter option value. For example, the filter option Size is set to “collapsed”, and the filter option Color is set to “opened”; after any filtering events, the filter option Size will collapse and the filter option Color remains opened as before.
  • Change label of Refine by button on mobile when tapping on it: Due to the limited display area on mobile, we want your customers to save as much screen space for your product list as possible. When your customers click Refine by to select filter values, the label will be changed to Hide filter to give users a hint to collapse the filter tree to see the filtered product list.
  • In the Clear cache of Swatch images section, you can try the Clear Cache button whenever the swatch settings set up in your filter trees do not work correctly.
  1. Remember to Save settings

To customize the display of your product list

Every time your customers select a filter value, the product list will be updated instantly. Our app allows you to edit the product list for optimum user experience.

To edit the display of your product list:

1. From the app’s dashboard, go to Filter > Filter settings.

  1. Under the Display settings heading and Product list section, select any options to customize how your product list is displayed on your storefront when your customers select the filters on your products:

  • Show loading icon when filtering: When enabled, the page shows the loading icon when your product list is updating after a filter value is selected.
  • Show scroll to top button: When enabled, a button will be displayed on the bottom right to allow your customers to quickly return to the top of any long product pages.

  • Sort available products first: When enabled, this setting allows you to display available products first and out-of-stock items will be arranged at the bottom of your product list.
  • Use canonical URLs for product pages: Canonical URLs are essential because Google will only index canonical URLs. When Google search engines crawl many URLs with identical (or nearly identical) content, your website's SEO can be affected. By selecting this option, search engines will be told which version of a URL you want to appear in your search results and improve the search engine ranking for your store.

  • Out-of-stock display options: In this drop-down, you show or hide out-of-stock products in your product list. The app also provides an option to only hide out-of-stock products after the customers select a filter value. This feature does not work with â€śtag” and â€śMetafield” filter options.

đź’ˇIn this drop-down, when you select Hide out-of-stock products/variants and you notice some products with out-of-stock variants still show up in the product list, then you can take the following steps:

1. From your Shopify's admin, go to Products.

2. Click the name of the product that has variants that have sold out but still show up in the product list.

3. In the Variants section, select all variants that you want to hide from the product list.

4. Click More Actions and select Stop selling when out of stock.

5. Click Save.

6. Check if the product that has those variants still shows up in the product list.

  • Show matched variant image by filter option: By selecting this setting, when filtering products by a specific value, the result products will be displayed in the product list with corresponding variant images. In your filter tree, you can apply this setting to one filter option at a time. You can decide which one in the drop-down of Show matched variant image by filter option. This setting only applies to height/title/color/size filter options.

    đź’ˇ If you want to apply this setting to more than one filter option at a time, feel free to contact us at support@boostcommerce.net for further support.

  • Pagination type: In this drop-down, you can decide how your customers can see more of the product list when they scroll to the bottom of the page.
    • Pagination: By choosing this option, the product list will be split into multiple pages, each containing a fixed number of items.
    • Infinite loading: Your storefront will present a single product-listing page that loads more items as your customers scroll down the page.
    • Load more: This option provides your customers with Load more buttons at the bottom of the product listing pages. Your customers will click the button to load the next set of products.

âš  Pagination setting only works on App Lib V2

  • Sorting (only available when your store is using the App Lib V1): This feature lets you add sort functionality to the product list with 9 sorting options when customers interact with the filter tree set up by our app. You can set up product sort by title, price, creation date, relevance, and bestseller.
    • Within the Sorting field, you can modify how the sorting options list will be displayed in the product list by adding/removing options based on your needs, dragging and dropping them to your desired order.
    • It is worth noting that based on this article, best-selling products are based on the all-time number of orders that include the product. If you haven't sold any products, this option sorts your products from newest to oldest. To make this sorting option work smoothly, we encourage you to follow this guide to sync the proper best-selling order on all the themes that are configured with our app.
    • When you want to set up product sort by publish date, vendor, Metafield, review, and any other attribute, contact us at support@boostcommerce.net for further details.
    • We encourage you to upgrade your store to the App Lib V3. The version comes with more advanced features that let you update the default sort order on search results pages and collection pages, and tailor sorting options so that they can better adapt to your business strategies. All the features are accessible from the app's admin.

3. Remember to Save settings.

Tutorial video

If you have any questions or need further assistance, please do not hesitate to reach out to our dedicated support team at support@boostcommerce.net.