Configuring and Installing the Reviews Carousel

Prev Next

Products


Reviews

Supported plans

Starter, Pro, Premium, Enterprise

eCommerce Platform

Shopify, Shopify Plus, Adobe Commerce (Magento), BigCommerce, WooCommerce, Salesforce Commerce Cloud, Custom

Goals and Outcomes

The Reviews Carousel increases the visibility of your reviews by letting you feature them at key conversion points across your site. It provides a customizable way to highlight customer feedback throughout the buyer journey, such as on your homepage, product pages, cart, checkout, blog, or landing pages.

In this article, you will learn how to configure the Reviews Carousel and add it to your store.

Feature Overview

The Reviews Carousel can be added to any page on your site and configured to show product reviews, site reviews, or both.

It automatically selects and displays your most relevant reviews using built-in sorting logic.

Feature Process

To begin customizing or adding the Reviews Carousel, access it in your Yotpo admin under On-Site Widgets.

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

  • On a product page: displays the most recent reviews for that product.

  • Off a product page: displays 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

  1. Log into your Yotpo Admin.

  2. In the left-side menu, go to On-Site Widgets.

  3. Select Reviews Carousel and click Edit.

  4. Customize the widget to your preference.

  5. Once done, click Save changes in the upper right corner.

General Settings

Customize the slider action, speed, colors, and fonts.

  • Primary color - applies to the heading.

  • Primary font - applies to the widget headline, user name, and review headline.

  • 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 custom styling.

Widget header

Configure whether to show the header, edit the header text, and set optional header links, such as linking to your SEO page.

Reviews

Customize how reviews appear in the carousel, including:

  • Number of reviews

  • Type of reviews (product, site, or both)

Adding the carousel to your site

After finalizing your customizations:

  1. Click Publish (top right).

  2. Copy the generated code.

  3. Paste the code into the desired location on your site (homepage, product page, checkout page, etc.).

Tip

Some eCommerce platforms limit template editing. For best results, place the Reviews Carousel above the fold on homepages or product pages.

Platform-Specific Installation

Shopify

Note

This guide references commonly used Shopify theme files. If you cannot locate these files, try exploring other template sections or contact Yotpo Support.

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

Note

Some themes require making a copy before editing. Creating a backup is recommended.

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

  2. Click on Advanced > Make a Copy.

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

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

  5. Click Save File.

Adobe Commerce (Magento)

Note

File names and locations may vary by theme. If unsure, enable Template Path Hints. You can read how to do so here (for a more thorough explanation, please click here).

Adding the Carousel to Your Homepage

  1. On your server, open grid.phtml.

  2. Navigate to:
    vendor/magento/module-catalog-widget/view/frontend/templates/product/widget/content

  3. Locate:
    <div class="block widget block-products-list <... </div>

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

  5. Save the file.

WooCommerce

Note

This example uses the default WooCommerce Storefront theme. Other themes may require different placement or custom code.

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.

Related articles