Designing a Reviews Carousel with Widget Plus

Surface customer reviews at key conversion points during the buyer's journey

Amanda Calderon avatar
Written by Amanda Calderon
Updated over a week ago

A Reviews Carousel offers your customer an easy way to explore your highest-rated, most recently published reviews across all of your products. You can style the Reviews Carousel your way, and then add it to any of your store's pages: homepage, collection page, product pages, or even landing pages.


โ€‹

In this article, you'll learn about:

Before you begin

You must install the Okendo Reviews app on your Shopify store before you can add the Reviews Carousel widget to your theme. Click here to see how to complete the basic installation.

Style your Reviews Carousel

Before you start styling your Reviews Carousel, consider reviewing the style definitions in the next section to understand how changing the settings changes the widget.

  1. Open your Okendo admin.

  2. Click Displays in the sidebar.

  3. Scroll down and click Reviews Carousel.

  4. Click the General tab to define the scope of what appears in your Reviews Carousel.

  5. Click the Styling tab to adjust the widget's settings to fit your store's brand.

    1. Use the various fields, color pickers, toggle switches, drop-down lists to make this widget your own.

  6. Click Save Changes.

Reviews Carousel style definitions

You have many options to customize your Reviews Carousel, including settings in these categories:

General tab

Style Setting

Description

Number of Reviews

The total number of review slides appearing in the Reviews Carousel.

Default Sort

Controls which sorting option appears by default in the Sort filter.

As shown in the example, if you select Media First in the Default Sort drop-down list, the Photos & Videos sort option appears in the widget.

Slides Per Page (Medium Screen)

The maximum of review slides that appear in the Reviews Carousel when viewed on a medium screen.

Slides Per Page (Large Screen)

The maximum of review slides that appear in the Reviews Carousel when viewed on a large screen.

Scroll Behavior

Customers can scroll through the Reviews Carousel one slide or one page at a time.

Truncation settings

Style Setting

Description

Hide media and attributes with a "read more" button

Shortens the content within a review slide by hiding any UGC and attribute bars, but doesn't remove it from the layout. You can still access this information by clicking the Read More link.

Limit review body length with a "read more" button

Shortens the review to the specified number of lines by hiding the remaining review content, but doesn't delete it. You can still access this extra review content by clicking the Read More button.

Maximum body text lines

The maximum number of lines that will appear when you choose to limit the review body length (see definition above).

Style tab

Style Setting

Description

Highlight Color

Color of "verified buyer" or "verified reviewer" text within the reviewer details.

Space Above

Amount of space at the top of the Reviews Carousel.

Space Below

Amount of space at the bottom of the Reviews Carousel.

Product Image Size

Changes the size of the product image to feature it more or less prominently.

If your Reviews Carousel displays a group of products (instead of a single product), each slide displays an image that lets your customers know what product the review is related to.

Show Review Dates

Date (in hours/days/weeks) when the customer submitted the review.

Layout settings

Style

Description

Layout

Determines the overall layout of the Reviews Carousel. You have 4 options to choose from: Default, Featured, Minimal Centered, and Testimonial.

Show Attributes Bars in Reviews

Displays or hides the attribute bars on the review slide.

Show Product Name (Grouped Reviews)

Displays the name of your product when your carousel is set to display a specific group of products.

Reviewer Details Position

Changes the position of the reviewer's details within the review slide.

You have 2 options: Above and Below.

Stars settings

Style

Description

Height

Height of the stars in the Reviews Carousel. Enter or select a value between 15 and 40 pixels.

Borders settings

Style

Description

Border Color

Border around the review slide.

Border Width

Width of the border around the review slide.

Text settings

Style

Description

Primary Text Color

Text color for these review slide components:

  • Review title and body

  • Read More button

  • Reviewer's name

Secondary Text Color

Text color of the date component in the review slide.

Font Size Standard

Size of these text components:

  • Review title and body

  • Read More button

Font Size Small

Size of these text components:

  • More UGC button

  • Date

  • Review's details

Avatars settings

Style

Description

Show Customer Avatars

Customer's profile image or avatar.

Size

Size of the customer's profile image or avatar.

Placeholder Background

Background color that appears in place of a missing avatar.

A placeholder avatar appears when the customer doesn't include a personal avatar or image when they submit their review.

Placeholder Text Color

Color of the text (typically the reviewer's initials) that appears within the placeholder avatar.

Arrows settings

Style

Description

Show Navigation Arrows

Displays or hides the navigation arrows on the left and right sides of each review slide.

Arrow Color

Adjust the color of the navigation arrows.

Arrow Size

Increase or decrease the size of the navigation arrows.

Media settings

Style

Description

Show Review Media

Displays or hides any UGC included with the review.

Image Height

Adjust the height of the image within the review slide.

Image Gap

Gap (in pixels) between the images in the review card or slide.

Related articles

Did this answer your question?