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.

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 cause the text to inherit set brand styles.

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:

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.

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, that this option will not appear for any product that does not have a sale price set in your e-commerce platform.

Shopify: This toggle will appear when your product has both a Price and a Compare-at price value.

BigCommerce: This toggle will appear when your product has both an MSRP and Sales Price value.

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.

A recent update added the ability to further define the behavior of product box content to respond to the availability of products on the live store.

You will find this dropdown in the sidebar:

Hidden: Variants with no availability won't appear in the dropdown or as a clickable button, or swatch depending on your selection elsewhere in the sidebar.

Shown but not selectable: Variants with no availability will appear on the live page, but end users will not be able to interact with the object to change the association to an out-of-stock variant.

Shown and selectable: Variants with no availability will appear on the live page, and end users will be able to interact with the object to change the association to an out-of-stock variant.

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, which 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 add your own fonts to the editor for use with respect to the Add to Cart button following the guide found here.

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 - please see the section above for instructions on adding alternative fonts to Shogun.

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

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;

The Product Reviews element allows you to display reviews from Yotpo on your Shogun pages.

Note: Shopify merchants will also find a Shopify Reviews option here under a dropdown.

Recharge Subscriptions is a popular application that allows merchants to offer product subscriptions to their customers.

If you are a Shogun user subscribed under a current (not depreciated) plan, you have access to our Recharge Widget, which is the easiest and most straightforward solution to implement in order to get subscription content to render in the context of the Product Box.

Loox is an app that enables you to collect and display star ratings and reviews on your products on Shopify.

We have provided an integration with their platform in our editor, steps to enable and use it can be found here:

Judge.me is another app that enables you to collect and display star ratings and reviews on your products on Shopify and BigCommerce.

We have provided an integration with their platform in our editor, steps to enable and use it can be found here:

At present, no, but you can add a 'Product Variant' element to your product box and that will allow the visitor to switch to in-stock variants if and when the variant associated with the product box in the editor goes out of stock.

You can further define what variants the end user can and can't see with the 'sold out variants' behavior dropdown in the controls sidebar.

At present this toggle takes into account the availability of all the variants of a product, and if you haven't included a variant element in the layout, product box content can render on the live page, but the end user is not able to switch to in-stock variants. Including a 'Product Variant' element in the layout would resolve this issue.

Shogun relies on webhook events to adjust to changes with respect to your product information. Shogun may not be aware a change has been made if it doesn't generate a webhook event for us to action, usually, this occurs because this action isn't considered important enough on its own to warrant an event being triggered.

Support can manually trigger a resync of the store's Product Information by making a general query to the platform's API to resolve any unsent webhook responses.