fbpx

How To Add Product Reviews To Your Webflow eCommerce Website

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

If you do not have a Wiremo account please start your free trial.

CTA blog 2


 

1. First you need to login to Wiremo Dashboard and select “Install Wiremo” (pin 1) in the main menu. Type your domain URL (pin 2) and press the “Next” button (pin 3).

How to Setup Wiremo Widget on Webflow


 

2.  Now press the “Install manually with Universal code” button.

Install manually with Universal code


 

3. On the opened page, find the Wiremo Script, under the point “2” and the Wiremo Div code, under the point “3”.

Wiremo Script


 

4. First, copy the Wiremo Script by clicking the “Copy code” button.

Copy code


 

5. Sign in to Webflow as the account holder and select a theme. Click on the three dots and select “Settings” (pin 5).

Sign in to Webflow


 

6. On the next screen select “Custom Code”, scroll down to the “Footer Code” section, and paste the Wiremo Script code, then click on the "Save Changes" button (pin 6).

Wiremo footer code


 

7.  At the top-right of the page, go to the Designer (pin 7).

Wiremo webflow Designer


 

8. On the next page click on the “Pages” (pin 8) and select “Product Template” (pin 9).

webflow product template


 

9. Next, click on the + Add elements (pin 10) and choose the “Div Block'' (pin 11) and add it exactly where you want the Wiremo review widget to be displayed.

We recommend adding it below the Product Description.

webflow Add elements


 

10. In the “Div Block” make sure to add “Embed Code” (pin 12) next, you will have to enter the Wiremo div code here.

webflow Embed Code


 

11. Go back to the Wiremo Dashboard and copy the Wiremo Div code. Make sure to modify the Wiremo Div code before placing it on the page.

Important: Please check this guide on how to edit the Wiremo Div code “Wiremo Review Widget Loading Code Explained” 

Wiremo Div code


 

12. Place the edited Wiremo Div code (pin 13) in the HTML Embed Code editor then Save & Close the changes (pin 14). 

Wiremo HTML Embed Code


 

13. Next, we will need to add the Wiremo Widget Lite the same way as we did for the Wiremo Review Widget.

webflow Wiremo Widget Lite


 

14. Click on the + Add elements (pin 15), choose the “Div Block'' (pin 16), and add it between the Product Name and the Price of the product page.

webflow Add elements


 

15. In the “Div Block” make sure to add “Embed Code” (pin 17) next, you will have to enter the Wiremo Lite Div Code.

webflow set Embed Code


 

16. Copy and place the Wiremo Lite Div Code (pin 18) in the HTML Embed Code editor. Save & Close changes (pin 19).

<wiremo-widget-lite data-type=1></wiremo-widget-lite>

Wiremo Lite Div Code


 

17. Now, go to Publish and click on the “Publish to Selected Domains” (pin 20).

webflow Publish to Selected Domains


 

18. You will have to open your product page in the browser, it will validate the Wiremo widget, then go to your Wiremo dashboard and click on the "Validate your Website" button.

validate website Wiremo


 

19. Congratulations, you've set up Wiremo for your Webflow website.

wiremo website validated


 

Here is an example of the Wiremo review widget.

Wiremo on Webflow eCommerce website


 

Thank you for choosing Wiremo!

 

Start using Wiremo