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 e-commerce catalog. 

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.

Once you have a product box in the layout, you can use the field that appears in the sidebar or center of the editor experience to associate the box with a product. You are also prompted to set a variant association if your product has variants.

Note: A product box will always be associated with a specific variant of a product if variants exist for that product. However, visitors to the page can reach other variants if you give them a product variant element to interact with.

In the event you intend to have multiple prompts on the page to guide a visitor to add different variants of the same product to the cart, you can enable the 'Always use this variant' toggle, which will fix the variant association for that particular product box, so that when a visitor interacts with another product box pointed at that same product the product box with this toggle enabled won't change its variant association.

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 by changing the Heading Type, Font, and Font Size.

The Product Description Element will populate your product's default description from Shopify to the page when dragged into the product box.

At present, you can choose to use 'Theme Style' which leverages your theme CSS, or 'Custom Style' which will allow you to customize the presentation.

Note: the Availability of the Product Description Element is specific to the Shopify platform

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

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

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

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

The Product Add To Cart Element allows 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.

With respect to 'stay on page' you might find your theme's built-in product counter might not automatically update when a product add-to-cart button is clicked.

You can find our recommendations for addressing this here;