Product Box
Product box is a functional wrapper for product-related elements. When you place elements such as Product Image, Product Title, Price, or Add to Cart inside a Product Box, all of these elements understand that they are displaying information from the same product. Without the Product Box, those elements wouldn’t know which product to pull data from, which can cause them to display incorrectly or not function at all. In addition, the Product Box groups these elements into a complete product card, keeping the layout structured and consistent.
1. How to add new Product Box
Now you can unleash your creativity to modify the content of the custom grid element with this extremely useful element. Access the Product Box element easily within the Element sidebar. For example, you can create a Product grid section with 3-4 different products.
Note: This element can not work on the Product or Collection templates. You can use it on the Homepage or Landing page.
Also, please add max 4 Product box elements per page only. Adding too much will slow down your page. If you want to display more than 4 products on your page, please use the Product grid element.
2. How to adjust Product boxes on Mobile/ Tablet
You’ll want to pay attention to what your section looks like on mobile and tablet devices before hitting publish on your first few pages in Page Builder. We make it easy to switch between device views while in our editor–allowing you to create customized views that work well on mobile. You can preview your content on common device sizes using the toggles at the top of the editor.
You can even apply different style settings to elements for each of the different screen sizes. Once an element is selected, click on the Styles tab in the editor’s sidebar and then click on the Devices icon next to the style you’d like to edit.
3. How to use multiple Product detail sections on one page
If you’re building a Landing Page or Homepage and have multiple product detail sections on the same page, each intended to display a different product, you may run into an issue where all sections show the same content. This happens because the product elements are not properly grouped, causing logical conflicts between them. The way to fix this is to use a Product Box to separate each section into its own product context, ensuring that each group of elements displays information from the corresponding product independently.
