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!
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 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:
Copy the following code: <div id="widereview-module"></div>
Paste it into the code editor and click on Save.
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.
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:
Copy the following code: <div class="widereview-rate"></div>
Paste it into the code editor and click on Save.
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.
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:
Copy the following code: <div id="widereview-grid"></div>
Paste it into the code editor and click on Save.
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.
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:
Copy the following code: <div class="widereview-mini"></div>
Paste it into the code editor and click on Save.
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.
There you go! We've now gone over how to add all the elements available on WideReview !
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: <div id="widereview-module"></div>
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: <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.
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: <div class="widereview-rate"></div>
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: <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.
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: <div id="widereview-grid"></div>
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: <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.
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: <div class="widereview-mini"></div>
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: <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.
There you go! We've now gone over how to add all the elements available on WideReview !
Updated on: 03/08/2022
Thank you!