Articles on: Page Builders 👨‍🔧

How to add WideReview to PageFly

Wide Hello!


In this tutorial, we’re going to learn how to add WideReview to your PageFly pages.


The whole process is as easy as ABC!


Let's get started!


Prerequisite


  • Click on Pages on the left side of your screen, then on Product Pages or Home Pages (or other pages).



  • Open the page you're interested in (product page, home page or another page).





Here’s a preview:



  • Click on the + symbol to add an element.



  • Select HTML/Liquid and move the "HTML5/Liquid" block to where you'd like to have the main carousel appear on your page.



  • Click on the module you've just added, then click on Open Code Editor.



  • You will then copy the code to display the carousel. This code will depend on the page to which you are currently adding it:


On a product page:


  • Copy the following code: <div id="widereview-module"></div>


  • Paste it into the code editor and click on Save & Close.



On a homepage or any other page (except the product page):


** Copy the following code: <div id="widereview-module" product-id=”YOUR_PRODUCT_ID" form-product-id="YOUR_PRODUCT_ID"></div>.


Then replace the two occurrences of "YOUR_PRODUCT_ID" with the ID of the product to which the carousel is attached, being sure to keep the quotation marks. (How to find your product ID)If you’d like to display all the reviews of your online shop, simply replace the first occurrence of "YOUR_PRODUCT_ID" with the word "[all]".


  • Paste it into the code editor and click on Save & Close.




Add stars under the product title


Here’s a preview:



  • Click on the + symbol to add an element.



  • Select HTML/Liquid and move the "HTML5/Liquid" block to where you'd like to have the stars appear under your product title.



  • Click on the module you've just added, then click on Open Code Editor.



  • You will then copy the code to display the stars. This code will depend on the page to which you are currently adding it:


On a product page:


  • Copy the following code: <div class="widereview-rate"></div>


  • Paste it into the code editor and click on Save & Close.



On a homepage or any other page (except the product page):


  • Copy the following code: <div class="widereview-rate" product-id="YOUR_PRODUCT_ID"></div>


Then replace "YOUR_PRODUCT_ID" with the ID of the product for which you’d like to display stars, being sure to keep the quotation marks. (How to find your product ID)


  • Paste it into the code editor and click on Save & Close.




Add reviews in grid format


Here’s a preview:



  • Click on the + symbol to add an element.



  • Select HTML/Liquid and move the "HTML5/Liquid" block to where you'd like to have the reviews appear in grid format on your page.



  • Click on the module you've just added, then click on Open Code Editor.



  • You will then copy the code to display the reviews in grid format. This code will depend on the page to which you are currently adding it:


On a product page:


  • Copy the following code: <div id="widereview-grid"></div>


  • Paste it into the code editor and click on Save & Close.



On a homepage or any other page (except the product page):


** Copy the following code: <div id="widereview-grid" product-id="YOUR_PRODUCT_ID" form-product-id="YOUR_PRODUCT_ID"></div>.


Then replace the two occurrences of "YOUR_PRODUCT_ID" with the ID of the product to which the carousel is attached, being sure to keep the quotation marks. (How to find your product ID)If you’d like to display all the reviews of your online shop, simply replace the first occurrence of "YOUR_PRODUCT_ID" with the word "[all]".


  • Paste it into the code editor and click on Save & Close.





Here’s a preview:



  • Click on the + symbol to add an element.



  • Select HTML/Liquid and move the "HTML5/Liquid" block to where you'd like to have the mini carousel appear (preferably under the “Add to cart” button).



  • Click on the module you've just added, then click on Open Code Editor.



  • You will then copy the code to display the mini carousel. This code will depend on the page to which you are currently adding it:


On a product page:


  • Copy the following code: <div class="widereview-mini"></div>


  • Paste it into the code editor and click on Save & Close.



On a homepage or any other page (except the product page):


  • Copy the following code: <div class="widereview-mini" product-id="YOUR_PRODUCT_ID"></div>


Then replace "YOUR_PRODUCT_ID" with the ID of the product to which the carousel is attached, being sure to keep the quotation marks. (How to find your product ID)


  • Paste it into the code editor and click on Save & Close.




There you go! We've now gone over how to add all the elements available on WideReview !

Updated on: 08/09/2022

Was this article helpful?

Share your feedback

Cancel

Thank you!