A Product Box is an element that allows you to place product elements and details on any page including standard, blog, collection, and other product pages to sell products. Each Product Box is associated with a specific product of your choosing. Once a product is selected, every Product Field placed into the Product Box is automatically associated with that same product.
To get started drag and drop a product box onto your page.
Keep in mind that all of your Product Fields within the same Product Box also work in tandem. For example, if you place a Product Variant and Product Price within the same Product Box, the price will dynamically update when the variant dropdown is changed. (It will not update within the editor view, but it will in the Preview and Live Page.)
Product elements available to include in your Product Box
Dragging this into a product box will display your product's title.
This element will show the image for your selected product variant. It will dynamically respond if placed into the same product box as the product variant element.
Product Image Gallery
Adds thumbnails which can be clicked to change the product image.
This element will show the price for your selected product variant.
This element will allow customers to select a product variant.
This element allows customers to choose the number of products they would like to order.
Product Add to Cart Button
This element will allow customers to add items to their cart. You can learn more here:
These elements can only be placed within a product box. Product image and product price are dynamic elements that automatically change based upon what product variant is selected.
It helps to pay attention of the nesting order of your elements when creating a Product Box. On the right side of the editor, there is a Layout panel that displays the order of the page's elements. Below is an example of how a Product Box should appear in the Layout panel when it is set up correctly.
How to reuse your Product Box elements
Product Boxes are also easy to repurpose. Once you have one Product Box created, you can duplicate it or create a Snippet of it. You can then change the product associated with additional Product Boxes by simply selecting the element and clicking on the Cart icon.