Product Box

The Product Box element in EComposer allows you to display a single product in a fully customizable layout, including key details such as product image, title, price, variants, and add to cart button.

Unlike the Product Grid element, which is used to display multiple products in a standard collection layout, Product Box is designed for flexibility and customization at the individual product level. It allows you to combine products with rich content such as countdown timers, badges, icons, or promotional text.

You should use the Product Box element when you want to:

• Create custom sections featuring a few selected products with unique layouts and promotional content
• Highlight special deals, bundles, or limited-time offers with additional elements like countdowns or benefits
• Display multiple product detail-style sections on the same page instead of relying on a single default product layout

In short, use Product Grid for simple product listings, and Product Box when you need more control to design engaging, high-converting product sections.

1. How to add a new Product Box element to your page

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 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 product 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.