Articles on: Getting Started 🔥

Displaying WideReview widgets on your store

Wide Hello!

This article will show you how to add the different WideReview widgets when you are using a new Shopify theme 2.0. (How to know if I have a theme 2.0?)

In this article:
Adding the main carousel
Adding the reviews in grid
Adding the rating
Adding the mini carousel under the add-to-cart button

Main Carousel

Products pages

Open your theme's editor by clicking on Online Store > Themes > Customize

Go to your product pages

Add a section on the left

Click on Apps

Choose "WideReview Carousel"

Place the section where you want WideReview carousel to appear

Click on the section and choose if you want to display the reviews of the product on the page or all the reviews

Click on Save

Homepage

Open your theme's editor by clicking on Online Store > Themes > Customize

Go to your home page

Add a section on the left

Click on Apps

Choose "WideReview Carousel"

Place the section where you want WideReview carousel to appear

Click on the section and select the product whose you want to show the reviews.

You can then check "Show the reviews from all products" but the carousel needs to be linked to a specific product first.

Click on Save

Reviews in Grid

Products pages

Open your theme's editor by clicking on Online Store > Themes > Customize

Go to your product pages

Add a section on the left

Click on Apps

Choose "WideReview Grid"

Place the section where you want WideReview Grid to appear

Click on the section and choose if you want to display the reviews of the product on the page or all the reviews

Click on Save

Homepage

Open your theme's editor by clicking on Online Store > Themes > Customize

Go to your home page

Add a section on the left

Click on Apps

Choose "WideReview Grid"

Place the section where you want WideReview Grid to appear

Click on Save

Rating

Products Pages

Open your theme's editor by clicking on Online Store > Themes > Customize

Go to your product pages

Add a block on the left in your product information

Choose "WideReview Stars"

Place the block where you want WideReview stars to appear

Click on Save

Featured Product on the Home Page

Open your theme's editor by clicking on Online Store > Themes > Customize

Go to your home page

Add a block on the left in your product information

Choose "WideReview Stars"

Place the block where you want WideReview stars to appear

Click on the block you just added and select the product whose rating you want to show. You can also show the rating from all products

Click on Save

Collections Page

For collection pages it's a bit more complicated as we can't add an app block to them. We'll have to do it with code.

In order to add the stars to the collections you have to copy the following code:

<div data-widereview-rate="{{ product.metafields.widereview.rating }}"
           	data-widereview-amount="{{ product.metafields.widereview.amount }}"
          	class="widereview-rate"
          	data-widereview-rate>
</div>

In your Shopify admin dashboard, click on Online Store > Themes > "..." > Edit code, to open the code of your theme

Open the file you use for collections. Usually in the folder Snippets

The files are usually called: product-card-grid.liquid, product-grid-item.liquid, product-info.liquid, card-product.liquid

Paste the code where you want to show the stars to appear.

Usually you want to paste it below the title so look for the product title (you can search for "product.title"). It should be a tag <h1> or <h2> or even <h3>