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!
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).
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:
Copy the following code: <div id="widereview-module"></div>
Paste it into the code editor (but first, remove the text that is already there) 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 (but first, remove the text that is already there) and click on Save.
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:
Copy the following code: <div class="widereview-rate"></div>
Paste it into the code editor (but first, remove the text that is already there) 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 (but first, remove the text that is already there) and click on Save.
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:
Copy the following code: <div id="widereview-grid"></div>
Paste it into the code editor (but first, remove the text that is already there) 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 (but first, remove the text that is already there) and click on Save.
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:
Copy the following code: <div class="widereview-mini"></div>
Paste it into the code editor (but first, remove the text that is already there) 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 (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 !
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: <div id="widereview-module"></div>
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: <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 (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: <div class="widereview-rate"></div>
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: <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 (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: <div id="widereview-grid"></div>
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: <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 (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: <div class="widereview-mini"></div>
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: <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 (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 !
Updated on: 03/08/2022
Thank you!