How to add Growave Reviews app widgets using placeholders

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 → Customize, 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:

Average star rating widget

The Average star rating widget shows the average product rating using a 5-star system and the number of reviews. When customers hover over the stars, they can see a breakdown of ratings by star count. See all reviews link leads to the full list of product reviews.

To display the Average star rating widget, use the following placeholder:

• Code:

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

• Attribute: data-gw-product-id . This is a unique identifier for the product whose average rating will be displayed.

Listing average product rating

This widget displays a product’s average rating using a 5-star system along with the total number of reviews. Unlike the Star rating widget, it does not include a hover mode with a rating breakdown.

• Code:

<div
    class="gw-rv-listing-average-placeholder"
    data-gw-product-id="1234567890"
    style="display: block"
></div>

• Attribute: data-gw-product-id attribute specifies the unique identifier for the product whose average reviews will be displayed.

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>

• Attributes:
  • data-gw-product-id : specifies the unique identifier for the product whose reviews will be displayed.
  • 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 featured reviews will be shown. Default is false.

Questions and Answers list widget

The Questions and Answers list 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>

• Attributes:
  • data-gw-product-id: specifies the unique identifier for the product whose questions and answers will be displayed.
  • data-gw-add-question-button-enabled (optional): controls the visibility of the "Ask a question" button.
    • true : The button is displayed.
    • false (default): The button is hidden.

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="true"
    data-gw-add-question-button-enabled="false"
    style="display: block;"
></div>

• Attributes:
  • data-gw-product-id: specifies the unique identifier for the product whose reviews will be displayed.
  • data-gw-add-review-button-enabled (optional): toggles the visibility of the "Write a review" button. Default: false.
  • data-gw-add-question-button-enabled (optional): toggles the visibility of the "Ask a question" button. Default: 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"
    style="display: block"
></div> 

• Attributes:
  • data-gw-product-id: specifies the unique identifier for the product whose reviews will be displayed.
  • data-gw-add-review-button-enabled (optional): toggles the visibility of the "Write a review" button. Default: false.
  • data-gw-reviews-per-page (optional): Specifies the number of reviews displayed per page. Default: 5. Minimum: 1. Maximum: 30.

Reviews page widget

The ReviewsPageWidget 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: data-gw-reviews-per-page (optional). This attribute specifies the number of reviews displayed per page. Default: 10. Minimum: 1. Maximum: 30.

Reviews product page widget

The Reviews product page 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 are 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>

• Attributes:
  • data-gw-product-id: specifies the unique identifier for the product whose reviews will be displayed.
  • data-gw-reviews-per-page (optional): specifies the number of reviews displayed per page. Default: 5. Minimum: 1. Maximum: 30.
  • data-gw-min-images-for-slider-visibility (optional): defines the minimum number of images required for the slider to be visible. Default: 6.

Reviews slider widget

The Reviews slider 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="true"
    style="display: block"
></div>

• Attributes:
  • data-gw-lowest-rating: (optional): Defines the minimum rating (1-5) required for reviews to be included in the slider. Default: 4.
  • data-gw-images-type: (optional): Specifies the source of images displayed in reviews. Default: product_images.
    • product_images – Displays product-related images inside reviews.
    • reviews_images – Displays user-uploaded images from their reviews.
  • data-gw-only-pinned-reviews: (optional): If set to true, only featured reviews are displayed. Default: false.

Reviews trust badge widget

The Reviews trust badge 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 don’t hesitate to contact our support team at support@growave.io or via the chat icon in the right-bottom corner. We're here to help! 🤗