Configuring and Installing the Reviews Carousel

      Configuring and Installing the Reviews Carousel


        Article summary

        Products


        Reviews
        Supported plans

        Starter, Pro, Premium, Enterprise

        eCommerce Platform

        Shopify, Shopify Plus, BigCommerce

        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.

        Reviews 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.

        Accessing the widget

        New users

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

        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 3.0.

        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.

        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

        Please note:
        The following guide contains the most frequently used files for implementing Yotpo's features.

        Don't worry if you can't find them or if using them doesn't work. You can explore the files on your own until you find the right spot, or you can use the online support form to contact our support team.

        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.
        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.

        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)

        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).

        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

        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 many require custom installation. This means you'll need to locate the corresponding elements in the relevant theme and implement the code where you wish for it to appear on your homepage or any other page.

        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.

        Was this article helpful?