Yotpo: Product Reviews for BigCommerce

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.

Install Yotpo

Adding your Yotpo API key

Before making use of the built-in integration with Yotpo, it's important to ensure that your API key is placed inside of your Shogun settings. To do this, navigate to your Shogun dashboard, into Settings and scroll down to the Integrations section.

Using the Product Review element

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. Ensure that you select Yotpo under the integrations option.

Please note: example data will be shown in the editor, but content will appear live on your site. Data may take up to 24 hours to sync on first install of Shogun and Yotpo.

Stylizing 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 look 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 number of reviews to show

You can change the number 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 number 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 is 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 modification is not supported by Shogun or Yotpo.

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

<div class="yotpo bottomLine"   
   data-product-id="120"> 
</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>