> ## 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 on EcomSolid
**Wide Hello!**
In this tutorial, we’re going to learn how to add WideReview to your EcomSolid 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).
---
## Add the main carousel
Here’s a preview:
* Click on **Add-Ons** and then on **Add Add-on**.
* Do a search for the word "custom" and then click on **Custom Code**.
* Move the element to where you'd like to have the main carousel appear.
* Click on the module you've just added, then display the "Code HTML” space.
* 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 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 and click on **Save**.
---
## Add stars under the product title
Here’s a preview:
* Click on **Add-Ons** and then on **Add Add-on**.
* Do a search for the word "custom" and then click on **Custom Code**.
* Move the element to where you'd like to have the stars appear.
* Click on the module you've just added, then display the "Code HTML” space.
* 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 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 and click on **Save**.
---
## Add reviews in grid format
Here’s a preview:
* Click on **Add-Ons** and then on **Add Add-on**.
* Do a search for the word "custom" and then click on **Custom Code**.
* Move the element to where you'd like to have the reviews displayed in grid format.
* Click on the module you've just added, then display the "Code HTML” space.
* 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 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 and click on **Save**.
---
## Add the mini carousel under the “Add to cart” button
Here’s a preview:
* Click on **Add-Ons** and then on **Add Add-on**.
* Do a search for the word "custom" and then click on **Custom Code**.
* Move the element 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 display the "Code HTML” space.
* 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 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 and click on **Save**.
---
There you go! We've now gone over how to add all the elements available on WideReview !