---
title: "Shogun - Integration Guide"
slug: "shogun-integration-guide"
tags: ["Reviews ", "Shopify", "Shopify Plus", "BigCommerce"]
updated: 2024-04-01T14:06:20Z
published: 2024-04-01T14:06:20Z
canonical: "support.yotpo.com/shogun-integration-guide"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://support.yotpo.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Shogun - Integration Guide

Products

			
				
					
						  

					
					Reviews
		
			

				

###### Supported plans

				

Free, Starter, Pro, Premium, Enterprise

			
			

				

###### eCommerce Platform

				

Shopify, Shopify Plus, BigCommerce

			

Implement Yotpo through Shogun and easily display reviews from Yotpo on your Shogun pages.

## How it works

Shogun is a Page Builder Application that allows you to easily create product pages on your website without the use of HTML or CSS. You can just drag and drop different element blocks to design your product page and optimize your eCommerce business with high-converting landing pages.

As Page Builder Applications do not use HTML/CSS, you cannot follow the regular Yotpo installation process to add on-site elements to your pages.

You can use Shogun together with Yotpo widgets by implementing some simple customizations.

	
	Please note:
	

		

The Yotpo code is generic and provided as-is. Implementation or modification of this code is not supported by Yotpo.

		

We recommend using the services of a developer or contacting the Page Builder App team for the purpose of integrating this customization into your website.

	

## Before you start

In order to connect Yotpo to your Shogun account, you’ll need your Yotpo app key. If you’re not sure how to find it, see [Finding your Yotpo App Key and API Secret](/v1/docs/finding-your-yotpo-app-key-and-secret-key).

## Step 1: Add Yotpo app key to Shogun

Start by adding your Yotpo app key to Shogun:

1. Navigate to your Shogun dashboard.
2. Click **Settings**, and then scroll down to the Integrations section.
3. Next to Yotpo, click **Enable**.
4. In the api_key field, add your Yotpo app key.
5. Click **Save**.

## Step 2: Add product reviews

There are two different ways to add your product reviews to Shogun. You can use just one of these approaches or a combination of both.

- **Product Review Element**: This is an automatic approach for adding the Reviews Widget to your product page. It cannot be used to add the Star Rating.
- **HTML**: This is a manual approach for adding the Reviews Widget and/or the Star Rating.

**To add product reviews using the Product Review Element:**

1. Navigate to a Shogun product page.
2. From the right menu, drag the Product Box onto your page.
3. Select the relevant product.
4. Select the relevant variant.
5. Click **Confirm**. All reviews related to this product will now display on the product page.

	
	Tip:
	To add reviews of different products to this product page, simply change the product ID in the product box.

**To add product reviews using HTML:**

1. Navigate to a Shogun product page.
2. From the right menu, drag the HTML button onto your page.
3. Add the code of the relevant feature.
4. Click **Confirm**.

## Step 3: Customize your integration

When using Shogun, the Liquid tags used in the Custom Element feature exists in a separate environment than the Shopify theme. This means that product details will not be populated automatically.

To get the Yotpo code to display in your Shogun content, the Liquid tags need to be replaced with actual product data. For example, if the embedded code contains a liquid tag like "{{product.id}}", it can be replaced with "123456789" ([the product's actual ID](/v1/docs/finding-product-ids-in-your-ecommerce-platform)). This code can be added into Shogun if the Liquid tags are replaced with actual data for each product page.

Once the Liquid tags are replaced with the product data, the modified code can be pasted into an HTML element on your Shogun page.

If you would like to install the Yotpo Widgets on a product page, the Liquid tags will need to be manually replaced with the data of the product page the code has been added to:

#### Code for adding Yotpo's Star Rating:

	

```markup
<div class="yotpo bottomLine"
data-product-id="{{ product.id }}">
</div>
```

#### Code for adding Yotpo's Reviews Widget:

	

```markup
<div class="yotpo yotpo-main-widget"
data-product-id="{{ product.id }}"
data-price="{{ variant.price | money_without_currency }}"
data-currency="{{ shop.currency }}"
data-name="{{ product.title | escape }}"
data-url="{{ shop.url }}{{ product.url }}"
data-image-url="{{ product.featured_image | product_img_url: "large" |replace: '?', '%3F' | replace: '&','%26'}}"
data-description="{{ product.description | escape }}">
</div>
```

	
	Please note:
	The information in the curly brackets must be manually replaced with the actual on-site information of the product. For example, the {{ product.id }} portion of the code needs to be replaced with the actual product ID.

## Troubleshooting

**The wrong reviews are displaying on the product page.**

	

	

- If you added your reviews using the product box, make sure that the product ID is correct.
- If you added reviews manually, make sure you added the correct product ID in the HTML.

**No reviews are displayed on the product page.**

	

	

Check the Moderation page in your Yotpo admin to see if you have reviews for that product. If you see that you do have reviews, please contact Shogun support.

	

If you experience any other issues with your Shogun integration, please contact Shogun support.