🚀 Feature availability

These Reviews app widgets are available for Growave 2.0 users (those who joined us after January 22, 2024).

Growave offers multiple ways to add review widgets to your Shopify store. You can use the Onsite Widgets page in Growave admin to automatically place widgets on relevant pages or add them manually through the Shopify theme customizer.

For more control over placement, you can insert widget placeholders directly into your theme’s code. This approach lets you position widgets exactly where you need them, including custom sections or pages that aren’t covered by default settings. Each widget requires a specific class name and may support additional attributes for customization.

This guide provides the necessary placeholder codes and attributes for each review widget, helping you integrate them seamlessly into your store.

Use a placeholder with data attributes

To insert a review widget, create an empty <div> element with the corresponding class name. Shopify hides empty <div> blocks in embedded mode, so you must add style="display:block" to ensure visibility.

Some review widgets require data attributes to function correctly. These attributes pass essential information, such as product IDs. Refer to each widget's details below for the required attributes.

Example:

<div 
    class="widget-placeholder-class-name"
    style="display:block" 
    data-gw-attribute1="value1" 
    data-gw-attribute2="value2" 
></div>

Add the widget to your Shopify store

You can add placeholders to your Shopify store in two ways:

Theme customizer: Go to Online Store → Themes → click Edit theme, select the relevant page, and add a Custom Liquid section from the Sections tab. Insert the placeholder code into the text area.

Edit code: Go to Online Store → Themes → ⋮ (three dots menu) → Edit code, select the relevant liquid template file, and add the placeholder code directly into the HTML.

Reviews app widgets

The following widgets are available for displaying product reviews:

Reviews star rating widget

This widget shows the average product rating using a 5-star system and the number of reviews. Hovering over the stars reveals a detailed breakdown of the ratings. Users can click "See all reviews" for more detailed feedback.

Default view:

Hover state:

Growave - reviews placeholder widgets - Reviews star rating widget - hover state

Code:

<div
    class="gw-rv-star-rating-widget-placeholder"
    data-gw-product-id="1234567890"
    style="display: block"
></div>

Attribute	Requirement	Description
`data-gw-product-id`	Required	Specifies the unique identifier for the product whose average reviews will be displayed.

Listing average product rating

This widget displays the average rating for a product using a 5-star system, along with the total number of reviews.

Code:

<div
    class="gw-rv-listing-average-placeholder"
    data-gw-product-id="1234567890"
    data-gw-show-reviews-tooltip="false"
    data-gw-hide-if-no-reviews="false"
    style="display: block"
></div>

Attribute	Requirement	Description
`data-gw-product-id`	Required	Specifies the unique identifier for the product.
`data-gw-show-reviews-tooltip`	Optional	If set to "true", enables a tooltip with detailed rating information on hover. Default is false.
`data-gw-hide-if-no-reviews`	Optional	If set to "true", the widget will be hidden when there are no reviews. Default is false.

Product reviews mini slider widget

This widget displays a mini slider featuring reviews for a specific product. It can be customized to show only featured reviews or reviews above a certain rating.

Code:

<div
    class="gw-rv-mini-slider-widget-placeholder"
    data-gw-product-id="1234567890"
    data-gw-lowest-rating="4"
    data-gw-only-pinned-reviews="true"
    style="display: block"
></div>

Attribute	Requirement	Description
`data-gw-product-id`	Required	Specifies the unique identifier for the product.
`data-gw-lowest-rating`	Optional	Defines the minimum rating (1-5) for reviews to be included in the slider. Default is 1.
`data-gw-only-pinned-reviews`	Optional	If set to true, only pinned reviews will be shown. Default is false.

Questions and Answers list widget

This widget displays a Q&A section for a specific product. Customers can browse previously asked questions, submit new inquiries, and view responses from the shop owner. This widget helps streamline customer support by addressing common questions directly on the product page.

Code:

<div
    class="gw-rv-questions-list-widget-placeholder"
    data-gw-product-id="1234567890"
    data-gw-add-question-button-enabled="false"
    style="display: block"
></div>

Attribute	Requirement	Description
`data-gw-product-id`	Required	Specifies the unique identifier for the product.
`data-gw-add-question-button-enabled`	Optional	Toggles visibility of the "Ask a question" button. `true`: The button is displayed. `false` (default): The button is hidden.

Reviews AI summary widget

This widget displays AI-generated summaries of product reviews. It provides customers with a quick overview of what reviewers think about a product without reading all individual reviews.

📖 Learn more about AI Review summaries

Code:

<div
    class="gw-rv-ai-summary-widget-placeholder"
    data-gw-product-id="1234567890"
    style="display: block"
></div>

Attribute	Requirement	Description
`data-gw-product-id`	Required	Specifies the unique identifier for the product.

Reviews list header widget

The Reviews list header widget displays a product's aggregated rating summary and breakdown by stars. It serves as the header section for review lists, encouraging customer engagement.

Code:

<div
    class="gw-rv-reviews-list-header-widget-placeholder"
    data-gw-product-id="1234567890"
    data-gw-add-review-button-enabled="false"
    data-gw-add-question-button-enabled="false"
    style="display: block;"
></div>

Attribute	Requirement	Description
`data-gw-product-id`	Required	Specifies the unique identifier for the product.
`data-gw-add-review-button-enabled`	Optional	Toggles visibility of the "Write a review" button. Default is `false`.
`data-gw-add-question-button-enabled`	Optional	Toggles visibility of the "Ask a question" button. Default is `false`.

Reviews list widget

The Reviews list widget displays a scrollable, filterable list of customer reviews with detailed feedback. It supports dynamic filtering and sorting options to help users navigate and find relevant reviews.

Code:

<div
    class="gw-rv-reviews-list-widget-placeholder"
    data-gw-product-id="1234567890"
    data-gw-add-review-button-enabled="false"
    data-gw-reviews-per-page="15"
    data-gw-reviews-filters="onlyWithPhotos,onlyProductReviews"
    style="display: block"
></div>

Attribute	Requirement	Description
`data-gw-product-id`	Required	Specifies the unique identifier for the product.
`data-gw-add-review-button-enabled`	Optional	Toggles the visibility of the "Write a review" button. Default is `false`.
`data-gw-reviews-per-page`	Optional	Specifies the number of reviews to display per page. Default is `5`. Minimum: `1`. Maximum: `30`.
`data-gw-reviews-filters`	Optional	Applies one or more predefined filters. Multiple values can be combined using a comma. Values: `onlyWithPhotos, onlyPinnedReviews, onlyShopReviews, onlyProductReviews.`

Reviews page widget

This widget displays customer reviews, supporting both product and shop reviews. It allows users to sort reviews by relevance, search within reviews, and submit new reviews directly on the page.

Code:

<div
    class="gw-rv-reviews-page-widget-placeholder"
    data-gw-reviews-per-page="15"
    style="display: block"
></div>

Attribute	Requirement	Description
`data-gw-reviews-per-page`	Optional	Specifies the number of reviews to display per page. Default is `10`. Minimum: `1`. Maximum: `30`.

Reviews product page widget

This widget displays an aggregated star rating and a list of customer reviews for a specific product. Users can write and submit reviews, sort them by relevance, and interact with individual reviews by liking them. If a review contains images, they can be displayed in a slider.

Code:

<div 
    class="gw-rv-main-widget-placeholder" 
    data-gw-product-id="1234567890" 
    data-gw-reviews-per-page="15" 
    data-gw-min-images-for-slider-visibility="3" 
    style="display: block" 
></div>

Attribute	Requirement	Description
`data-gw-product-id`	Required	Specifies the unique identifier for the product.
`data-gw-reviews-per-page`	Optional	Specifies the number of reviews to display per page. Default is `5`. Minimum: `1`. Maximum: `30`.
`data-gw-min-images-for-slider-visibility`	Optional	Specifies the minimum number of images required for the slider to be visible. Default is `6`.

Reviews slider widget

This widget presents customer reviews in a horizontal slider format, allowing users to navigate through multiple reviews. Each review includes a rating, comment, and reviewer details, making it ideal for highlighting positive feedback.

Code:

<div 
    class="gw-rv-reviews-slider-widget-placeholder" 
    data-gw-lowest-rating="4" 
    data-gw-images-type="product_images" 
    data-gw-only-pinned-reviews="false"
    data-gw-reviews-sequence="default" 
    style="display: block" 
></div>

Attribute	Requirement	Description
`data-gw-lowest-rating`	Optional	Defines the minimum rating (1-5) required for reviews to be included in the slider. Default is `4`.
`data-gw-images-type`	Optional	Specifies the source of images displayed in reviews. Values: `product_images`: Displays product-related images inside reviews. `reviews_images`: Displays user-uploaded images from their reviews. Default is `product_images`.
`data-gw-only-pinned-reviews`	Optional	If set to true, only featured reviews are displayed. Default is `false`.
`data-gw-reviews-sequence`	Optional	Controls the order in which reviews appear in the slider. Values: `default`: Reviews are shown by the order or publishing. `shuffle`: Randomizes the order of displayed reviews. Default is `default`.
`data-gw-breakpoints`	Optional	Responsive slides-per-view configuration using breakpoint notation. Supports comparison operators: >, >=, <, <=. Example: `default:5,<1000:4,<=800:3,>1200:6`.

Reviews testimonials slider widget

This widget displays shop reviews in a horizontal slider using text-only testimonial cards. Each card features the star rating, an optional review title, the review text, and the reviewer's name. Since shop reviews are not tied to specific items, no product images are included. This widget is ideal for your home page or landing pages to highlight overall customer feedback about your store.

📘Note: This widget displays shop reviews only. To showcase product reviews alongside product images, use the Reviews slider widget instead.

Growave - Reviews placeholder widget - Reviews testimonials slider widget

Code:

<div
    class="gw-rv-testimonials-slider-widget-placeholder"
    data-gw-lowest-rating="4"
    data-gw-only-pinned-reviews="false"
    data-gw-sorting="mostRelevant"
    style="display: block"
></div>

Attribute	Requirement	Description
`data-gw-lowest-rating`	Optional	Defines the minimum rating (1-5) required for reviews to be included in the slider. Default: `4`.
`data-gw-only-pinned-reviews`	Optional	If set to true, only featured reviews are displayed. Default: `false`.
`data-gw-sorting`	Optional	Controls the order in which shop reviews appear in the slider. Default is `mostRelevant`. Values: `mostRelevant`, `mostRecent`, `highestRating`, `lowestRating`, `mostHelpful`. *Note*: Sorting by attached media is not available, as testimonial cards are text-only.
`data-gw-slider-breakpoints`	Optional	Responsive slides-per-view configuration using breakpoint notation. Supports comparison operators: >, >=, <, <=. Example: `default:3,<1000:2,<=800:1`. If omitted, the number of cards is calculated automatically based on the container width. The slider will never display more cards in a row than there are actual reviews.

Reviews trust badge widget

This widget displays a compact trust badge that showcases the aggregate average product rating based on customer reviews. This badge helps build customer confidence by presenting real user feedback in a visually appealing format. It typically includes the average rating, the total number of reviews, and a star-based rating representation.

Code:

<div 
    class="gw-rv-trust-badge-widget-placeholder" 
    style="display: block" 
></div>

This widget does not require additional attributes.

If you have any questions or need assistance, please contact our support team at [email protected] or via the chat in the bottom-right corner of your Growave admin panel. We're here to help! 🤗

How to add Growave Reviews app widgets using placeholders