How to add Review Carousel widget to your Shopify store?
The Scuti Review Carousel helps you highlight a carousel of featured reviews on any page of your Shopify store. Our Carousel not only brings more trust by showcasing your glowing reviews but also allows you to upsell your most-loved products. And the best part is that, unlike other reviews apps, you can have the carousel even in your free plan.
In this tutorial, we’ll show you how to add/remove reviews to the carousel widget, install and customize the carousel widget on your Shopify pages from the Shopify theme editor or manually inject a snippet code into your liquid files.
How to add or remove reviews from your carousel widget?
The first step to set up your carousel widget is to choose your featured reviews. To do so, follow the steps below:
- Go to the Reviews page from the left menu of Scuti.
- Find your desired review using the search bar and/or filters on the top.
- Under each review, select “Add to Carousel”:
How to add the Carousel widget to your store?
After a set of reviews were selected for the Carousel widget, the fun part starts here. To add the carousel into your store, follow the steps below:
- Go to your Shopify theme menu (from Admin -> Online Store -> Themes).
- Click the “Customize” button on the theme you’d like to add the widget to.
- From the left panel, click on “Add section” and choose Scuti Review Carousel:
4. Simply drag and drop the widget to your desired location.
Note that if no review was already selected from the Reviews page, then we show you some mock reviews just to give a sense how the carousel might look like in your store. However, we always recommend to select your own reviews.
How to customize the Carousel widget?
Once you added the carousel widget, you can fully customize the Carousel widget to match your theme and brands’ look.
The good news is that you don’t need to leave the theme editor for customizing the carousel. Just click on the Scuti Carousel Widget from the left panel of the theme editor and you can see a full set of customization options on the right panel. You can change the carousel settings from the right panel and see changes right from the theme editor.
Our customization options include:
- Carousel maximum width: The maximum width for the Carousel widget in the screen.
- Number if items for mobile/tablet/laptop/desktop: The number of review cards on various devices.
- Colors: The color of each review’s element (e.g., stars, author’s name, date, text, background), and other elements of the carousel widget.
- Display “Show more” button: By clicking on this button, the Floating Reviews Widget pops up that shows all your store’s reviews.
- Display only reviews with photos: Hide the reviews that only have text and show only photo reviews.
- Display Date/Rating: Display or hide the Date and Rating in the review cards.
How to manually add the Carousel on your Shopify store?
While using the theme editor and “Add section” is the easiest way to add the Carousel widget, you can still manually add it by injecting the snippet code into your theme’s liquid files. In this way, you can add the Carousel in whatever position you want.
Follow the below steps to inject the Carousel snippet code:
- Go to your Shopify theme menu (from Admin -> Online Store -> Themes)
- Click the “Actions” menu and then select “Edit code”.
- Open the template or section you want to add the Carousel widget to.
- Add the code below to where you wish to display the Carousel. Note that all the customization options are also available in the code that you simply change them to your desired choice:
<div id="Scuti-reviews-carousel" data-carousel-max-width="1920" data-mobile-items-num="2" data-ipad-and-tablet-items-num="3" data-laptop-items-num="3" data-desktop-items-num="4" data-arrows-color="#007aff" data-dots-color="#007aff" data-author-name-color="#000000" data-stars-color="#ffc635" data-date-color="#767676" data-review-text-color="#000000" data-item-background-color="linear-gradient(#ffffff, #ffffff)" data-show-rating="true" data-show-date="true" data-only-photos="false"></div>