> ## 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 GemPages
**Wide Hello!**
In this tutorial, we’re going to learn how to add WideReview to your GemPages pages.
The whole process is as easy as ABC!
Let's get started!
## Prerequisite
* Click on **Product Pages** or **Home Pages** on the left in the "Pages" section, depending on where you want WideReview to appear.
* Open the page you're interested in (product page, home page or another page).
---
## Add the main carousel
Here’s a preview:
* In the search bar on the left, run a search for "Liquid"
* Drag the “Liquid” module to where you'd like to have the main carousel appear.
* Click on the module you've just added, then click on the icon that looks like a **pencil**.
* 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: ``
* Paste it into the code editor (but first, remove the text that is already there) and click on **Save**.
###### On a homepage or any other page (except the product page):
** Copy the following code: ``.
|| 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 (but first, remove the text that is already there) and click on **Save**.
---
## Add stars under the product title
Here’s a preview:
* In the search bar on the left, run a search for "Liquid"
* Drag the “Liquid” module to where you'd like to have the stars appear.
* Click on the module you've just added, then click on the icon that looks like a **pencil**.
* 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: ``
* Paste it into the code editor (but first, remove the text that is already there) and click on **Save**.
###### On a homepage or any other page (except the product page):
* Copy the following code: ``
|| 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 (but first, remove the text that is already there) and click on **Save**.
---
## Add reviews in grid format
Here’s a preview:
* In the search bar on the left, run a search for "Liquid"
* Drag the “Liquid” module to where you'd like to have the reviews displayed in grid format.
* Click on the module you've just added, then click on the icon that looks like a **pencil**.
* 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: ``
* Paste it into the code editor (but first, remove the text that is already there) and click on **Save**.
###### On a homepage or any other page (except the product page):
** Copy the following code: ``.
|| 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 (but first, remove the text that is already there) and click on **Save**.
---
## Add the mini carousel under the “Add to cart” button
Here’s a preview:
* In the search bar on the left, run a search for "Liquid"
* Drag the “Liquid” module to where you’d like the mini carousel to appear under the “Add to cart” button.
* Click on the module you've just added, then click on the icon that looks like a **pencil**.
* 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: ``
* Paste it into the code editor (but first, remove the text that is already there) and click on **Save**.
###### On a homepage or any other page (except the product page):
* Copy the following code: ``
|| 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 (but first, remove the text that is already there) and click on **Save**.
---
There you go! We've now gone over how to add all the elements available on WideReview !