📖 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.
About Product Item
A 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 other sections:
How to edit with Product Item’s settings
How to access Product Item’s settings
1. From the app's admin, go to the Integration menu > select Shopify Integration > Find [Target Theme] > Select Edit Visual Design.
2. 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 the 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 selecting a new value.
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 the Background color, Background color when hovering, Border color, and Border color when hovering.
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 [email protected].