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

Using The Product Title Element

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.

Using The Product Image Element

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:

  • Link to Product Page - send the user to the product page.

  • Open lightbox - open a lightbox to show off the image.

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.

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. 

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.

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.

Displaying a Sales Price

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.

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.

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.

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.

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.

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

Changing The Add to Cart Button Behavior

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

  • Go to cart will bring the visitor to their cart once they select the element

  • Stay on page will add the product to the cart, but the visitor will remain on the page

Did this answer your question?