There are a couple of methods that can be used to implement Yotpo reviews into your site. From the Product Reviews element, to custom code. To get started, head over to Yotpo and install their app.

First: Set up your Yotpo API key

Before making use of the built in integration with Yotpo, your Yotpo API key must be placed into your Shogun settings. To do this, navigate to your Shogun dashboard, into Settings and scroll down to the Integrations section.

Click the Enable button next to the Yotpo integration. Paste in your API key, then click Save.

Adding Product Reviews to your Page

The Product Review Element is a Product Box element that can be dropped onto any page of your store. Simply drag a Product Box onto your page to unlock the Product Review Element. (This also works with the Collection element, which is a series of Product Boxes.)

Once a Product Box or Collection Element is on your page, drag the Product Reviews element into your Product Box.

Finally, you'll want to ensure that Yotpo is selected in the Integration dropdown of the Product Reviews Controls.

Please note: example data will be shown in the editor, but the content will appear live on your site. Real-world data may take up to 24 hours to appear on Publishing your page.

Customizing your Review Element

How to show the star rating of your product

To show the star rating, without showing the reviews associated with it, you can check the Show Collection Page Stars option. You can check out how to use this below,

Customizing the colors of your reviews

There are plenty of options to make this element fit into your design. You can choose the primary color, the color of the star rating, the text color and the button text color.

Changing the amount of reviews to show

You can change the amount of reviews that are on display on a single page on your page.

Limiting the character amount in your reviews

Sometimes, setting a limit on the amount of characters that your users can sometimes be a good idea. This can be done in Shogun using the Review Character Limit.

Setting your fonts

Setting the fonts of elements are important in order to make sure that your content looks consistent on your page.

Adding Yotpo with custom HTML

Other options to install Yotpo involve using the HTML element or Custom Elements to insert custom code into your Shogun pages. This can be useful if you wish to show the Yotpo default styles.

Please note: this code is generic and provided as-is. Implementation and modifications are not supported by Shogun or Yotpo in any capacity. If you are having trouble implementing these features, we may not be able to offer support.

Since review application code tends to require data from the theme, the liquid tags itself is not compatible within the HTML element out of the box. Data will need to be manually inserted into the HTML in order for the element to load correctly. For example, if the code contains {{product.id}} this will need to be replaced by the product ID that you would like to use.

Adding Yotpo's Star Rating

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

Important: data inside of the curly brackets will need to be replaced manually with product data. Curly brackets will need to be removed in order while the data is being placed. For example,

<div class="yotpo bottomLine"   
   data-product-id="1486482407497"> 
</div>

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