How to display reviews in grid format
Wide Hello!
WideReview's main widget is the big main carousel. This is why it is added by default on all product pages.
However, you also have the option to display reviews in grid format. Like this 👇
So let's see how!
To move through this article more quickly, choose from one of the following, based on where you want the reviews to appear as a grid:
Add reviews as a grid on a dedicated page
Add reviews as a grid on your homepage
Add reviews in grid form on your product pages
You may want to place these reviews on a dedicated page.
Open the Shopify page where you want to display your reviews.
Display "code" mode by clicking on the <> icon.
Copy the following code:
<div id="widereview-pack" product-id="PRODUCT_ID" form-product-id="PRODUCT_ID"></div>
Paste it where you want it to appear on the page.
Replace the two occurrences of "PRODUCT_ID" in the code with the ID of the product whose reviews you want to display without removing the quotation marks (How to find your product ID or handle)
You can view all reviews on your online shop by replacing the first occurrence of "PRODUCT_ID" with the word [all]. The second "PRODUCT_ID" must always be the product to which the widget is attached.
Make sure that "grid" mode is activated by going to WideReview and clicking on Settings > General and then checking the Show reviews in grid checkbox.
Click on Customize to access the theme editor.
Open your homepage.
At the bottom left of your screen, click on Add section.
Search WideReview and click on "WideReview Pack".
Click on the new section you just added.
Select the product whose reviews you want to display. This will also be used to know for which product new reviews will be published.
Check the Show the reviews from all products checkbox if you want to display all reviews of your store.
Make sure that the "grid" mode is activated by going to WideReview in Settings > General > Show reviews in grid.
You can also add reviews as a grid directly to your product pages. The method for adding them will depend on whether your theme is a 2.0 theme or not. How do I know if my theme is a 2.0 theme?
If you don't know if your theme is a 2.0 theme, click here.
Open your theme editor.
In the top of the screen, open your product page.
Click on Add section at the bottom left.
Search "WideReview" and click on WideReview Pack.
Click on the newly added section.
Choose whether you want to display the reviews of the product currently on the page or all the reviews of the site.
Make sure that "grid" mode is activated by going to WideReview and clicking on Settings > General and then clicking on the Show reviews in grid checkbox.
Unlike 2.0 themes, it is not possible to add sections to your product page. You will therefore have to open the code of your theme to manually add the code where you want it.
Open your theme code.
Look for the file corresponding to your product page. The file is usually in Snippet > product-template.liquid or Snippet > product-form.liquid.
Contact our customer support by chat in the dashboard if you can't find it!
Copy the following code:
<div id="widereview-pack"></div>
Place this line in your theme code where you want the grid reviews to appear.
Save!
Make sure that "grid" mode is activated by going to WideReview and clicking on Settings > General and then clicking on the Show reviews in grid checkbox.
And there you go ! You have now placed the reviews in a grid! 😁
WideReview's main widget is the big main carousel. This is why it is added by default on all product pages.
However, you also have the option to display reviews in grid format. Like this 👇
So let's see how!
To move through this article more quickly, choose from one of the following, based on where you want the reviews to appear as a grid:
Add reviews as a grid on a dedicated page
Add reviews as a grid on your homepage
Add reviews in grid form on your product pages
Display reviews as a grid on a dedicated page
You may want to place these reviews on a dedicated page.
Open the Shopify page where you want to display your reviews.
Display "code" mode by clicking on the <> icon.
Copy the following code:
<div id="widereview-pack" product-id="PRODUCT_ID" form-product-id="PRODUCT_ID"></div>
Paste it where you want it to appear on the page.
Replace the two occurrences of "PRODUCT_ID" in the code with the ID of the product whose reviews you want to display without removing the quotation marks (How to find your product ID or handle)
You can view all reviews on your online shop by replacing the first occurrence of "PRODUCT_ID" with the word [all]. The second "PRODUCT_ID" must always be the product to which the widget is attached.
Make sure that "grid" mode is activated by going to WideReview and clicking on Settings > General and then checking the Show reviews in grid checkbox.
Show reviews as a grid on the homepage
Click on Customize to access the theme editor.
Open your homepage.
At the bottom left of your screen, click on Add section.
Search WideReview and click on "WideReview Pack".
Click on the new section you just added.
Select the product whose reviews you want to display. This will also be used to know for which product new reviews will be published.
Check the Show the reviews from all products checkbox if you want to display all reviews of your store.
Make sure that the "grid" mode is activated by going to WideReview in Settings > General > Show reviews in grid.
Display reviews as a grid on product pages
You can also add reviews as a grid directly to your product pages. The method for adding them will depend on whether your theme is a 2.0 theme or not. How do I know if my theme is a 2.0 theme?
1) My theme is a 2.0 theme (scroll down if you have an old theme)
If you don't know if your theme is a 2.0 theme, click here.
Open your theme editor.
In the top of the screen, open your product page.
Click on Add section at the bottom left.
Search "WideReview" and click on WideReview Pack.
Click on the newly added section.
Choose whether you want to display the reviews of the product currently on the page or all the reviews of the site.
Make sure that "grid" mode is activated by going to WideReview and clicking on Settings > General and then clicking on the Show reviews in grid checkbox.
2) My theme is an old theme
Unlike 2.0 themes, it is not possible to add sections to your product page. You will therefore have to open the code of your theme to manually add the code where you want it.
Open your theme code.
Look for the file corresponding to your product page. The file is usually in Snippet > product-template.liquid or Snippet > product-form.liquid.
Contact our customer support by chat in the dashboard if you can't find it!
Copy the following code:
<div id="widereview-pack"></div>
Place this line in your theme code where you want the grid reviews to appear.
Save!
Make sure that "grid" mode is activated by going to WideReview and clicking on Settings > General and then clicking on the Show reviews in grid checkbox.
And there you go ! You have now placed the reviews in a grid! 😁
Updated on: 17/06/2022
Thank you!