🚀 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:
Code:
<div
class="gw-rv-star-rating-widget-placeholder"
data-gw-product-id="1234567890"
style="display: block"
></div>
Attribute | Requirement | Description |
| 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 |
| Required | Specifies the unique identifier for the product. |
| Optional | If set to "true", enables a tooltip with detailed rating information on hover. Default is false. |
| 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 |
| Required | Specifies the unique identifier for the product. |
| Optional | Defines the minimum rating (1-5) for reviews to be included in the slider. Default is 1. |
| 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 |
| Required | Specifies the unique identifier for the product. |
| Optional | Toggles visibility of the "Ask a question" button.
|
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.
Code:
<div
class="gw-rv-ai-summary-widget-placeholder"
data-gw-product-id="1234567890"
style="display: block"
></div>
Attribute | Requirement | Description |
| 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 provides options for users to submit reviews or ask questions. 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 |
| Required | Specifies the unique identifier for the product. |
| Optional | Toggles visibility of the "Write a review" button. Default is |
| Optional | Toggles visibility of the "Ask a question" button. Default is |
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 |
| Required | Specifies the unique identifier for the product. |
| Optional | Toggles the visibility of the "Write a review" button. Default is |
| Optional | Specifies the number of reviews to display per page. Default is |
| Optional | Applies one or more predefined filters. Multiple values can be combined using a comma. Values: |
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 |
| Optional | Specifies the number of reviews to display per page. Default is |
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 |
| Required | Specifies the unique identifier for the product. |
| Optional | Specifies the number of reviews to display per page. Default is |
| Optional | Specifies the minimum number of images required for the slider to be visible. Default is |
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 |
| Optional | Defines the minimum rating (1-5) required for reviews to be included in the slider. Default is |
| Optional | Specifies the source of images displayed in reviews. Values:
|
| Optional | If set to true, only featured reviews are displayed. Default is |
| Optional | Controls the order in which reviews appear in the slider. Values:
|
| Optional | Responsive slides-per-view configuration using breakpoint notation. Supports comparison operators: >, >=, <, <=. Example: |
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! 🤗