The Product Box Element allows you to add a product to any of your pages. The Product Box Element comes with a bunch of elements that you can use to showcase your products on your page. This information is pulled from your ecommerce catalogue. 

To unlock the Product Box Elements, you will first need to insert a Product Box Element onto your page. 

It is recommended that you avoid "nesting" product boxes - this is when you have one product box inside of another, your page will consider these two separate products - even if they're set to point to the same product! This is usually the issue if you are noticing the product variant is not working right with your product box.

The Product Title Element allows you to insert the product title into your page. 

You can customize the Product Title element to fit your needs be changing the Heading Type, Font and Font Size.

The Product Image Element allows you to display an image for your product. 

There are currently two choices on where to send your user once they click on your image, you can change the action in the Product Image Element settings, you will find the two options:

Our new 'hover on zoom' feature is great in order to allow your visitor to zoom in on your product images to see more details of your image. You can enable this within the Product Image Element.

The Product Image Gallery Element is a great element to show off any additional images that you have for your product. 

This element works great with the Product Image Element, selecting an image in the Product Image Gallery Element will allow you to view it larger in the Product Image Element.

The Product Price Element allows you to show off the price of your product. This will automatically display a 'sold out' sign if this product is not currently in stock.

This element also allows for the customization of the Price Font and the Price Size, as well as editing the Sold Out Text.

We know that adding a compare price is great to show off a price cut, or a sale, and we have included that function right into the Product Price Element. Simply toggle this to allow Shogun to show the compare price.

Please note, this option will not appear for any product that does not have a sale price set in your e-commerce platform. Please refer to your e-commerce platform's documentation regarding sales prices.

The Product Variant Element allows your visitors to choose the different variants of your products.

These variants can be grouped either separately, or grouped together.

If you have individual images for each variant on your page, this element interacts great with the Product Image Element. Selecting a new variant will set the image right into the Product Image Element.

The Product Quantity Element allows your visitors to add multiple products to their cart at once. 

One of the most important element is the Product Add To Cart Element, this allows your visitors to add your products into their cart.

The Product Add To Cart Element allows for you to customize the Button Text that is used with the button, as well as the Add To Cart Font and the Add To Cart Size to fit in with your theme. The Add To Cart Text Color can also be changed from here.

Note: the add to cart element uses the Google Fonts API for fonts.

You can customize the text that is displayed when the product is either unavailable or sold out.

Note: the add to cart element uses the Google Fonts API for fonts.

There are two options to choose from when deciding the behavior of the Add To Cart Element.