Shogun - Integration Guide

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.

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.

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.

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

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

Code for adding Yotpo's Reviews Widget:

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

Troubleshooting