Shopify Product Reviews: Reviews for Shopify

The Product Reviews element allows you to display reviews from Shopify Product Reviews on your Shogun pages.

Updated over a week ago

To get started, head over to Shopify Product Reviews and install their app.

As of 5th of September 2023, Shopify has disabled new downloads of the Product Reviews app and removed it from the App Store. It is understood Shopify has sunset the app in favor of as yet announced replacement.

Should you not already have Product Reviews installed, you could still leverage; YotPo, Judge.me, and, Loox, all of which we have designed integrations for in the context of the Product Box.

Adding Product Reviews to your Shogun 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. Ensure that you change the integration option to Product Reviews

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.

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 Shopify Reviews with custom HTML

Other options to install Shopify Reviews 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 default styles.

Please note: this code is generic and provided as-is. Implementation and modifications are not supported by Shogun or Shopify 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 themselves are not compatible with 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 Shopify Reviews Widget

<div id="shopify-product-reviews" data-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 id="shopify-product-reviews" data-id="1486482407497"></div>

Adding Shopify Reviews Star Rating

<span class="shopify-product-reviews-badge" data-id={{product.id}}></span>

Why aren't my reviews showing on the live page?

Real world data may take up to 24 hours to appear on Publishing your page, as this content will need to be synced from the Shopify platform. Once this content has synced once for a given product it should update in near real-time.

Did this answer your question?