fbpx

How to Integrate Wiremo Review Tool for eCommerce Stores With Shopify

How to integrate Wiremo with Shopify

Welcome to Wiremo! In this step-by-step tutorial, you will find out how to set up one of the best customer reviews platforms on Shopify.

Important:If you want to add Wiremo widget to a custom page, please follow this tutorial:

How to setup Wiremo widget on Shopify.


 

Video tutorial

For an easier way to integrate Wiremo widget on your Shopify website, you can watch the following video tutorial or follow the steps below it.
 


 

Integrate Wiremo with Shopify

First, you need to login to Wiremo Dashboard and select “Install Wiremo” in the main menu. Type your website address and click Next.

website name


 

Now press on the "Shopify" button.

shopifybutton


 

Login to Shopify dashboard. If you have your own theme, edit yours. We’ve used the sample themes Shopify offers. Navigate to “Online Store” go to “Themes”, press on option “Actions” (pin 1) and choose “Edit code” (pin 2). 

shopify 1


 

Now you need to copy the Wiremo widget script. Go to Wiremo Dashboard->Install Wiremo and press the "Copy code" link.

shopify 2


 

Under “sections” tab find “footer.liquid” and click on it.  Paste the script at the end of the template file (pin4) and press the "Save" button.

shopify 3


 

Under “Sections” tab, find “product-template.liquid” (pin 5) and click on it. Then paste this script below in the Shopify html box, on the bottom of the page (pin 6) and press the "Save" button.

 <!-- Start of Wiremo script -->

   <script>

       window.wiremo_config = function () {

           this.identifier = '{{ product.id }}';

           this.reviewSource = '{{ product.id }}';

       };

   </script>

<!-- End of Wiremo Script -->

shopify 4


 

Open again Wiremo Dashboard->Install Wiremo and copy the div code (pin 7).

shopify 5


 

Now place the div code where you want Wiremo to display. In the example below (pin 8), we’ve added Wiremo below the text.

shopify 6


 

Now, you need to add the lite div code (stars widget) in the Shopify html box:

<wiremo-widget-lite data-type=1 data-source="{{ product.id }}"></wiremo-widget-lite>

Important:If you want widget lite to be clickable and scroll on click to review widget, add it like this

<a href="#wiremo-widget"><wiremo-widget-lite data-type=1 data-source="{{ product.id }}"></wiremo-widget-lite></a>

shopify 7


 

Go to the page where you’ve placed the widget and check it! Once you see the review widget in your page then you made everything correctly. Go back to Wiremo Dashboard->Install Wiremo and press the “Validate Website” button to activate your widget!

shopify 8


 

Important:If you want to add stars to collection pages please follow the next steps.

 

1. Access theme files

2. Search for one of these files where to make the changes, the presence of these files will differ from theme to theme:

  • product.thumbnail.liquid
  • product-grid-item.liquid
  • product-collection.liquid
  • product-card-grid.liquid

3. Look for {{ product.title }} or end of pricing to add this code

<wiremo-widget-lite data-type=1 data-source="{{ product.id }}"></wiremo-widget-lite>

shopify 9


 

You can also customize the way wiremo widget lite is displayed by changing data type from 1 to 3.

data type 1 - will display star rating number and the word reviews
data type 2 - will display star rating number
data type 3 - will display rating stars only

Below you can see the examples for each data type.

datatype


 

Below you can see examples for a product page and collection page with the widget installed.

Product page with Wiremo widget and widget lite.

2 1


 

And the collection page.

1 1


 

If you have any questions regarding the Wiremo integration with your Shopify store don't hesitate to contact our support team through live-chat or submit a ticket. Thank you for choosing Wiremo.