Configuring and Installing the Reviews Carousel (Legacy)
Configuring and Installing the Reviews Carousel (Legacy)
Article Summary
Share feedback
Thanks for sharing your feedback!
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.
Available for:
Merchants who are using the previous version of the Reviews Carousel. If you want to use the new Reviews Carousel 3.0 version, see this article
Configuring the content of the Reviews Carousel
To access the Reviews Carousel in Yotpo Reviews, go to Display Reviews > Reviews Carousel.
You may manually choose the reviews you wish to display in the Reviews Carousel or you can let Yotpo do the heavy lifting for you and choose the reviews automatically based on predefined logic.
Reviews Carousel limitations
- The Reviews Carousel requires a minimum of three reviews to display and can show a maximum of nine reviews.
- The Reviews Carousel will not display syndicated reviews. For more information, click here.
- When added to a product page, the carousel will not show any product images.
Sorting reviews automatically
The Reviews Carousel auto-sorting logic leverages a data-driven mechanism to showcase your best and most relevant reviews. Click on each metric below to get a detailed breakdown of the sorting logic.
Auto - Top Rated
Reviews displayed according to this logic must meet the following criteria:
Product Reviews - All Products & Product Reviews - Product Page
- Only displays published reviews.
- 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 from the most reviewed products.
Site Reviews
- Only displays published reviews.
- 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 reviews.
Site & Product Reviews
- Only displays published reviews.
- Site and Product reviews must meet the criteria listed above.
- 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.
- Top-rated reviews are displayed first followed by the most recent reviews.
Auto - Most Recent
Reviews displayed according to this logic must meet the following criteria:
- Only displays published reviews
- Star-rating must be at least 4 stars
- The review sentiment must be positive
- Product reviews must include a product image
- The most recent product or site reviews (or both) are displayed first
- Reviews are sorted by date in descending order (newest first)
Sorting reviews manually
If you'd rather hand-pick the reviews to display in the Reviews Carousel, you may do so by selecting the Choose Manually option from Review Logic dropdown list.
Adding a review
- Search for the desired review(s) by the following search criteria:
- Review Content
- Product Name
- Product ID
- Search results will appear in a dropdown list of matching product and/or site reviews.
- Click on the desired review from the dropdown list.
- Repeat this up to nine times.
Please note:
Search criteria must contain at least three characters
Removing a review
To manually remove a review from the list of reviews to display in the Reviews Carousel, simply click the red X on the left-hand side of the review you wish to remove.
Configuring the type of reviews to display
Use the Reviews Type menu to configure which type of reviews you'd like to display in the Reviews Carousel. 
| Review Type | Description |
|---|---|
| Site Reviews | Displays reviews about your site and service. |
| Site and Product Reviews | Displays reviews about your site and service and reviews about products |
| Product Reviews - All Products | Displays reviews about all of the products in your product catalog |
| Product Reviews - Product Page | Displays reviews about a specific product based on the product ID - this option is designed for product pages. Paste the widget code in your product page template and the product ID parameter will automatically populate the relevant product reviews for the products displayed on that page. |
Displaying the Reviews Carousel on product pages
Choose the Product Reviews - Product Page option to showcase product reviews for a specific product right on the product page. This will generate a code snippet which includes a product ID parameter. 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.
Customizing the Reviews Carousel
Layout and navigation
| Option | Function |
|---|---|
| Total Reviews Count and Average Rating | Displays an average of your Star Ratings and your total number of reviews |
| Autoplay Speed | Enable or disable autoplay horizontal scrolling of your reviews in the carousel. Set the speed at which your reviews are cycled by designating the display time in milliseconds. e.g. 4000 ms = 4 seconds The minimum speed is 1,500 ms. If you enter a lower value, the speed will be set to 1,500 ms automatically |
| Navigation Arrows | Show or hide the navigation arrows. Navigation arrows allow visitors to your site to cycle through reviews in the Reviews Carousel to the left or right. |
| Include Link to Dedicated Testimonials Page (SEO Page) | Enable or disable a link to your dedicated testimonials page (e.g. SEO Page) This links your visitors to a dedicated page which displays your reviews and more. You may customize the text and the URL. |
Look and feel
Customize the look and feel of the Reviews Carousel to match your site's color scheme.
| Option | Function |
|---|---|
| Header Customization | Enable or disable Header Customization to customize the content, color, alignment, and size of your Reviews Carousel header text. Choose the text you wish to display as your header text and define text color manually or via HEX color code. |
| Background Color | Customize the background color of the Reviews Carousel to match your site's color scheme. Click on the color box to open the color picker or paste the HEX code of the desired color. To make the background transparent, uncheck the 'Background Color' box. |
Adding the Reviews Carousel to your site
Once you’ve previewed your Carousel and you're happy with your customizations, click Generate Code. Copy the code and paste it onto the desired location on your site - homepage, product page, checkout page, etc.
Please note:
By default, the preview panel shows reviews from your most reviewed product.
Manually selected reviews do not appear in the preview panel.
Click on the platform relevant to you to learn how to add the Reviews Carousel to your homepage after copying the code:
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
If you want to add the Review Carousel to Shopify, please refer to this article.
BigCommerce - Stencil
- Go to your BigCommerce Admin page.
- Go to Storefront > My Themes.
- Click Advanced and choose Edit Theme Files.
- In the Theme Files navigate to Templates > pages > home.html
- Paste the code in the home.html file above the following lines:
{{/partial}}{{> layout/base}}
- Click the "Save & apply file" button.
Adobe Commerce 2
Please note:
The location and file names used in the example above are from Adobe Commerce's default theme. If your theme differs or you are unsure of the file's location, it is recommended to temporarily enable Adobe Commerce's Template Path Hints feature. You can read how to do so here (for a more thorough explanation, please click here).
- 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 - Find the following lines:<div class="block widget block-products-list <... </div>
- Paste the generated code right above these lines of code as shown in the screenshot below:
- Save the file.
Adobe Commerce 1
Please note: The location and file names used in the example above are from Adobe Commerce's default theme. If your theme differs or you are unsure of the file's location, it is recommended to temporary enable Adobe Commerce's Template Path Hints feature. You can read how to do so here (For a more thorough explanation, please click here).
- In the main Adobe Commerce file directory on your server location, open the file /Applications/MAMP/htdocs/magento1/app/design/frontend/rwd/default/template/page/2columns-right.phtml
- Find the following lines:<div class="main">... </div>
- Paste the generated code from your Yotpo Admin right after these lines of code as shown in the screenshot below:
- Save the file.
WooCommerce
Please note:
The location and element names used in the example below are from the WooCommerce default theme (Storefront). Some themes do not allow widget installation and may require custom installation - This means finding the corresponding elements in the relevant theme and implementing the code in accordance with where you wish for it to appear on your homepage.
- In the main WordPress backend, go to Appearance > Customize.
- Click on Widgets.
- Choose the section of the page where you'd like for the carousel to appear - the Footer, Sidebar, etc.
- Click on Add a Widget button
- Choose the Custom HTML option.
- Paste the code and save the changes
Important:
The Reviews Carousel will only appear once you have reached the minimum amount of reviews.
Troubleshooting
"Not Enough Reviews..." Error
This error message may appear when there aren't enough eligible reviews to show in the carousel.
It's important to check that the selected reviews carousel configuration matches the number of published reviews that exist in the account, and the review type - site, product, or both.
If you've reconfigured the carousel and the issue persist, please contact Yotpo's support team
The carousel isn't showing product images next to the reviews
When added to a product page, the carousel will not show any product images.
Was this article helpful?
