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

Product Title

Dragging this into a product box will display your product's title.

Product Image

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.

Product Price

This element will show the price for your selected product variant.

Product Variant

This element will allow customers to select a product variant.

Product Quantity

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:

https://getshogun.com/help/faq/a-guide-to-the-add-to-cart-button

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.

Did this answer your question?