All Collections
Element Tutorials
How to display product data on any page using the Product Box
How to display product data on any page using the Product Box
Display product data fields like Product Image, Product Title, Product Price, and more.
Written by Edward Savoy
Updated over a week ago

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.

Setting the Product Association

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.

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

Using The Product Description Element

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

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

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.

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

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 elements is the Product Add To Cart Element, this allows your visitors to add your products to their cart.

Changing The Button Text

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.

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

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;

Did this answer your question?