How To Display a Product on Your Shogun Page

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 Shopify account.

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

Using The Product Title Element

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

Using The Product Image Element

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

This element has a 'link to product page' option that you can use to send the user to the Product Page for the product.

Using The Product Image Gallery Element

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

Using The Product Price 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.

Using The Product Variant Element

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.

You can also set up Swatches if the product has color variants, instructions on how to do that can be found here;

Setting up Color Swatches

Using The Product Quantity Element

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

Using The Product Add To Cart Element

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

Customizing The Product Add To Cart Element

Changing The Button Text

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.

Changing The Sold Out & Unavailable Text

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