> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.widereviewapp.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# 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).

![](https://storage.crisp.chat/users/helpdesk/website/fb9ba398921ca800/image_hufzuj.png)

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

![](https://storage.crisp.chat/users/helpdesk/website/fb9ba398921ca800/image_8q60pm.png)

---

## Add the main carousel

Here’s a preview:

![](https://storage.crisp.chat/users/helpdesk/website/fb9ba398921ca800/image_qkmy32.png)

* Click on the **+** symbol to add an element.

![](https://storage.crisp.chat/users/helpdesk/website/fb9ba398921ca800/image_meleqz.png)

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

![](https://storage.crisp.chat/users/helpdesk/website/fb9ba398921ca800/may-25-2022-15-10-25_ljvboo.gif)

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

![](https://storage.crisp.chat/users/helpdesk/website/fb9ba398921ca800/image_1orrnwg.png)

* 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**.

![](https://storage.crisp.chat/users/helpdesk/website/fb9ba398921ca800/image_mjn1yl.png)

###### 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](https://help.widereviewapp.com/en/article/how-to-find-your-product-id-or-handle-ck6lzn/?bust=1654893425978))
|| 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**.

![](https://storage.crisp.chat/users/helpdesk/website/fb9ba398921ca800/image_o9840.png)

---

## Add stars under the product title

Here’s a preview:

![](https://storage.crisp.chat/users/helpdesk/website/fb9ba398921ca800/image_1remiw0.png)

* Click on the **+** symbol to add an element.

![](https://storage.crisp.chat/users/helpdesk/website/fb9ba398921ca800/image_meleqz.png)

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

![](https://storage.crisp.chat/users/helpdesk/website/fb9ba398921ca800/may-25-2022-15-25-05_4am61o.gif)

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

![](https://storage.crisp.chat/users/helpdesk/website/fb9ba398921ca800/image_l0d6q1.png)

* 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**.

![](https://storage.crisp.chat/users/helpdesk/website/fb9ba398921ca800/image_1vc8taf.png)

###### 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](https://help.widereviewapp.com/en/article/how-to-find-your-product-id-or-handle-ck6lzn/?bust=1654893425978))

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

![](https://storage.crisp.chat/users/helpdesk/website/fb9ba398921ca800/image_1xnjsua.png)

---

## Add reviews in grid format

Here’s a preview:

![](https://storage.crisp.chat/users/helpdesk/website/fb9ba398921ca800/image_1wquztq.png)

* Click on the **+** symbol to add an element.

![](https://storage.crisp.chat/users/helpdesk/website/fb9ba398921ca800/image_meleqz.png)

* 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.

![](https://storage.crisp.chat/users/helpdesk/website/fb9ba398921ca800/may-25-2022-15-10-25_ljvboo.gif)

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

![](https://storage.crisp.chat/users/helpdesk/website/fb9ba398921ca800/image_1orrnwg.png)

* 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**.

![](https://storage.crisp.chat/users/helpdesk/website/fb9ba398921ca800/image_fvev3x.png)

###### 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](https://help.widereviewapp.com/en/article/how-to-find-your-product-id-or-handle-ck6lzn/?bust=1654893425978))
|| 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**.

![](https://storage.crisp.chat/users/helpdesk/website/fb9ba398921ca800/image_4bvi75.png)

--- 

## Add the mini carousel under the “Add to cart” button

Here’s a preview:

![](https://storage.crisp.chat/users/helpdesk/website/fb9ba398921ca800/image_xsqm6k.png)

* Click on the **+** symbol to add an element.

![](https://storage.crisp.chat/users/helpdesk/website/fb9ba398921ca800/image_meleqz.png)

* 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).

![](https://storage.crisp.chat/users/helpdesk/website/fb9ba398921ca800/may-25-2022-15-10-25_ljvboo.gif)

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

![](https://storage.crisp.chat/users/helpdesk/website/fb9ba398921ca800/image_1orrnwg.png)

* 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**.

![](https://storage.crisp.chat/users/helpdesk/website/fb9ba398921ca800/image_1x5c1l7.png)

###### 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](https://help.widereviewapp.com/en/article/how-to-find-your-product-id-or-handle-ck6lzn/?bust=1654893425978))

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

![](https://storage.crisp.chat/users/helpdesk/website/fb9ba398921ca800/image_fsbxfy.png)

---

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