How to customize Product item section

📖 In this article, we are going to learn more about what is Product Item section and how to use it to optimize your theme’s layout and make it look the way you’d like it to.

âš  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

About Product Item

Product item is a section that includes multiple sections/elements related to the product grid(s) design in your product list. This will help you optimize your Collection/Search page look and increase your chance of converting visitors to buyers. 

Settings for Product Item are reused for other features such as Recommendation, Merchandising, or any other features that appear as Product items on App Blocks.

Included in Product Item, we have two others sections:

How to edit with Product Item’s settings

How to access Product Item’s settings

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

  1. In the editor, on the left panel, select the Product Item section.

Styling configuration

  • (Optional) Library

If you'd like to save time from having to design your Product items manually, you can choose our pre-designed layout for your Collection header.

    • Select the meatballs menu (⋯) > Library on the right panel > Switch to Product Item tab.

      From the Main Layout drop down menu, there are 3 options for you to select:

      • Product item 1: provides pre-designed sub-layouts that you can choose for your product items
      • Product item 2: provides pre-designed sub-layouts that you can choose for your product items
      • Match with your current theme (theme name): your product item layout will be designed to match your theme when you just installed it.

âš  Match your current theme option is only available if you are editing on one of our V3's supported themes. Simply select it and click Change layout to get your current theme's design.

    • If Product Item 1/Product item 2 is selected, choose one of the sub-layout > Change layout.


💡 When you use the sub-layout of the Layout Library, it will return foundations such as the font family, the font size, etc... in App Admin (the editor) will take the value Null (equivalent to inherit value of CSS) to inherit the original theme value being installed. You can change it by select a new value.

The font's values are displaying blank (null) when the sub-layout from Layout Library is in use.

  • On the right panel, you will see
    • Border layout
      • No Border
      • Border No Padding
      • Border No Padding Image
      • Border Has Padding

  • Color: You can change Background color, Background color when hover, Border color and Border color when hover.

You can check more information about the STYLING tab here.

Tutorial Video

Also, you can watch our tutorial video to learn how to use Product item section:


If you need any further assistance, please do not hesitate to contact us at support@boostcommerce.net.

Related Articles