Configuring and Installing the Reviews Carousel

The Reviews Carousel increases the visibility of your reviews by letting you display them at key conversion points throughout your site. It is a customizable way to feature reviews on any stage along the buyer journey, for example, on your homepage, cart page, check-out page, blog, or even landing pages.

In this article, you'll learn how to configure the reviews carousel and add it to your store.

How it works

The Reviews Carousel can be added to a product page, homepage, or any other page on your site. You can also choose which type of review will be shown on the carousel, product reviews, site reviews, or both.

Sorting reviews automatically

The Reviews Carousel auto-sorting logic leverages a data-driven mechanism to showcase your best and most relevant reviews.

Reviews displayed according to this logic must meet the following criteria:

Product Reviews

• Only displays published reviews

• The star rating must be 5 stars

• The review sentiment must be positive

• The review must be longer than 60 characters

• Product reviews must include a product image

• The sorting logic displays the most recent reviews for that product page

• If the carousel is not on a product page, it will show the most recent reviews from the most reviewed products.

Site Reviews

• Only displays published reviews

• The star rating must be 5 stars

• The review sentiment must be positive

• The review must be longer than 60 characters

• The sorting logic displays the most recent site reviews

• If the widget is set to site reviews and placed on a product page, it will show your site reviews

Site & Product Reviews

• Only displays published reviews

• The star rating must be 5 stars

• The review must be longer than 20 characters

• Reviews are sorted in an alternating fashion where the first review displayed is a product review followed by a site review followed by a product review etc

• Most recent reviews are displayed first

Once you've added this snippet to your product page template, the Reviews Carousel will automatically associate the product reviews relevant to each product and showcase them in the carousel.

Limitations

• The Reviews Carousel requires a minimum of 3 reviews to display and can show a maximum of 12 reviews

• The review must be longer than 60 characters to display in the carousel

• The Reviews Carousel will not display grouped reviews. To learn more, see Grouping Products.

• The Reviews Carousel will not display syndicated reviews. To learn more, see About Syndication.

• The Reviews Carousel will not display blocklisted products.  To learn more, see Adding Products to Your Blocklist.

• If the widget is set to product reviews and placed on a product page, the carousel will only show reviews associated with this product

• If the widget is set to product reviews but there aren’t enough eligible reviews, the widget will not appear on-site.

Customizing the Reviews Carousel

Accessing the widget

New users

If you recently joined Yotpo - In the Yotpo Reviews main menu, go to On-Site Widgets > Reviews Carousel (Legacy).

Existing users

If you've been with us for over 6 months - In the Yotpo Reviews main menu, go to On-Site Widgets > Reviews Carousel.

General Settings

In this section, you can customize the carousel slider action and speed, colors, and fonts.

• The primary color is the color of the heading.

• The primary font applies to the widget headline, user name, and review headline

• The secondary font applies to the review content, product name, date, verified Buyer, and number of reviews

You can also use the CSS editor to add your own custom CSS.

Widget header

Here you can choose whether to show the header, the header text, etc.

You can also make the header clickable and link it to your SEO page.

Reviews

Choose how the reviews will appear in the carousel - how many reviews, which type, etc.

Adding the carousel to your site

Once you’ve previewed your carousel and you're happy with your customizations, click Publish in the top right corner of the screen. 

Copy the code and paste it onto the desired location on your site - homepage, product page, checkout page, etc.

Tip:

Some eCommerce platforms may limit access to template HTML on certain stores. We recommend placing the Reviews Carousel above the fold of your homepage and/or product pages.

Shopify

Adding the carousel to your Homepage

1. Go to your Shopify Themes menu.

2. Click Actions > Settings > Edit Code.

3. Under Templates, locate the index.liquid or theme-template.liquid file. Paste the Carousel code.

4. Click OK to save the code.

Adding the carousel to product pages

1. Go to your Shopify Themes menu.

2. Click Actions > Settings > Edit Code.

3. Locate the file that you use for your product pages. This is usually called product.liquid, product-template.liquid, or main-product.liquid.

4. Paste the widget code into the file.

5. Click Save.

Bigcommerce - Stencil

Adding the carousel to your Homepage

1. In your BigCommerce admin go to Storefront > My Themes.

2. Click Advanced and choose Edit Theme Files.

3. In the Theme Files navigate to Templates > pages > home.html

4. Paste the code in the home.html file above the following lines:

{{/partial}}
{{> layout/base}}

5. Click the Save & apply file button.

Adding the carousel to product pages

1. In your BigCommerce admin go to Storefront > My Themes.

2.  Click on Advanced > Make a Copy.

3. Please note:

   Some of the themes offered on BigCommerce Themes Marketplace may require making a copy of the theme files before making any changes to them. As a baseline, we recommend making a copy of your theme before editing it, as a backup.

4. Once the theme is copied, click on Edit Theme Files.

5. Click Templates > Components > Products > product-view.html or product.html and paste the copied code.

6. Click Save File.

Adobe Commerce (Magento)

Adding the carousel to your Homepage

1. In the main Adobe Commerce file directory on your server location, open the file grid.phtm and follow this path:
   vendor/magento/module-catalog-widget/view/frontend/templates/product/widget/content

2. Find the following lines:<div class="block widget block-products-list <... </div>

3. Paste the generated code right above these lines of code as shown in the screenshot below:
   

   

4. Save the file.

WooCommerce

Adding the carousel to your theme

1. In the main WordPress backend, go to Appearance > Customize.

2. Select the Customize option on your current theme.

3. Choose the section of the page where you'd like the carousel to appear - the Footer, Sidebar, etc.

4. Paste the code and save the changes.