Adding the Reviews widgets to Shopify themes

Conversio's Reviews Widget allows you to collect and display reviews on your product pages as well as show star ratings on collection pages and in Conversio's Recommendations Widget. 

Create a Widget

Conversio has four types of reviews widgets: Recent, Tab, Badge and Summary

Recent

A Recent widget will show actual reviews from your users. 

Step 1: Go to the widgets page under Reviews --> Widgets and click on Create New Widget

Step 2: Name your widget and select the widget type "Recent".

Step 3: Configure your settings in the widget editor.

Summary

A Summary widget will display reviews in numbers or stars. This type of widget is used to display the average star rating on collection and product category pages. 

Step 1: Go to the widgets page under Reviews --> Widgets and click on Create New Widget. 

Step 2: Name your widget and select the widget type "Summary".

Step 3: Configure your settings in the widget editor.

Tab

A Tab widget will display as a clickable tab on all pages . This  type of widget is used to display reviews on product pages. 

Sometimes you may want to aggregate Reviews from all products instead of showing Reviews for only one item. With our Tab feature, you can do that. 

Here is a real customer example of how it would look on a website:

1) Start by going to your Reviews > Widgets.

2) Click on "Create New Widget": 

3) Choose "Tab" from the dropdown and add a name for the widget. In this example, we went for a simple name, "tab":

4) Your Widget is ready! 

Click on "GET WIDGET CODE" to get to your personalized instructions page, where you will find your personal code to copy and paste into your theme files. 

We recommend adding it to your footer file.

--

The widget has just a few options. The important bit is the "Open mode". If you're using a "Link", you can add a static link pointing to a page of your site. If you're using a "Modal", you can choose a "Recent widget" to load in a modal.
Please note that you have to have a Widget already created before you can do that. 

Badge

This widget shows the average rating and the total number of reviews as a badge.

See it in action here - 

Step 1: Go to the widgets page under Reviews --> Widgets and click on Create New Widget.

Step 2: Name your widget and select the widget type "Summary".

Step 3: Configure your settings in the widget editor.

Check How to add a Badge Review Widget.

Aggregating all reviews:

You can also use this widget on non-product pages, that it can display all the reviews from all products of a store.
In the Summary Widget instructions, you should see a line of code for pages:

To make things easier and clearer for your customers, you can also enable the displaying of product name:

Add a Widget to Shopify

Adding a Conversio widget to Shopify is simple, requiring that you add a small snippet of code to your theme. You'll need to add the following code, replacing 'my-cool-widget-0' with your widget's unique slug:

<code>{% include 'conversioproductreview' with 'my-cool-widget-0' %}

You can find the slug under each widget:

In this example, you would add {% include 'conversioproductreview' with 'Recent-Review-Widget-0' %} to your theme to add the Recent Review Widget above. 

Product pages

Recent reviews widgets are added to the product.liquid theme in Shopify. To find this, navigate to Online Store --> Themes in your Shopify account. From there, click on "Actions" and select "Edit HTML/CSS". 

Under templates, click on product.liquid. Add the snippet of code to your product.liquid template. Note that the position of the snippet of code will dictate where the widget appears on the product page.

Collections pages

Summary reviews widgets can be added to the collection.liquid theme in Shopify. To find this, navigate to Online Store --> Themes in your Shopify account. From there, click on "Actions" and select "Edit HTML/CSS". Using the slug from your summary widget, copy and paste the snippet of code into your collection's theme to display the star rating under each product. 

Enable Reviews in the Recommendations Widget

Go to the recommendations widget editor by navigating to recommendations --> widgets. Click on edit next to the widget that you would like to update. You will see a switch for "Show reviews" and "Show stars". Switching on "Show reviews" will show your customers the total number of reviews. Switching on "Show stars" will show the average star rating for each product. 

Still need help? Contact Us Contact Us