Okendo
  • Introduction
  • Merchant REST API
    • Quick Start
    • Endpoints
  • On Site
    • On Site Widgets
      • Reviews Widget
      • Star Rating
      • Questions Widget
      • Reviews Carousel Widget
      • Media Grid Widget
      • Media Carousel Widget
      • Reviews Badge Widget
      • Reviews Modal Trigger
    • Storefront Javascript API
      • Widget Plus Window API
      • Surveys - Connect Window API
      • Quizzes - Connect Window API
      • Referrals Window API
      • Inspiration
    • Storefront REST API
      • Quick Start
      • Endpoints
    • Advanced Widget Installs
      • Installing Widget Plus on Headless Instances
      • Installing Connect Surveys on Headless Instances
      • Stores Running an Existing Vue App
      • Installing Quizzes on Headless Instances
  • Okendo Shopify Hydrogen Support
Powered by GitBook
On this page
  • Overview
  • Installation
  • Styling
  • Data Attributes
  • Examples
  • Giving The Widget A Data Source
  • Specifying a Product To Ask About
  1. On Site
  2. On Site Widgets

Reviews Widget

PreviousOn Site WidgetsNextStar Rating

Last updated 4 months ago

Overview

A high-impact, visually stunning review display widget that is proven to engage shoppers and increase conversions. Extensively customizable and optimized for page-load speed.

Installation

  1. Create a new liquid snippet in the snippets folder with the following name: snippets/okendo-reviews-widget.liquid

  2. Inside your newly created liquid file, add the following HTML snippet:

    <div data-oke-widget></div>
  3. Copy the following snippet and place it in your Theme Code where you would like the widget to appear: {% render 'okendo-reviews-widget', product: product %}

Styling

The preferred method of configuring the Reviews Widget is via the Okendo Admin which can be accessed in the Okendo app via Reviews -> On-Site Displays:

Data Attributes

Use these data attributes on the widget markup to customize its configuration. None of these attributes are required.

Data Attribute
Description
Value Type
Supported Values

data-oke-reviews-product-id

Used to specify a Shopify Product ID with the word shopify- in front of it. The reviews widget will only show reviews for the specified product.

string

Any valid product ID in the format shopify- e.g. shopify-1234567.

data-oke-reviews-group-id

Used to specify an Okendo Group ID so that the reviews widget only shows reviews for the specified group of products.

string

Any valid product group ID in a GUID format e.g. 69d2e67d-b980-4333-97b7-30411807a7b1

data-oke-reviews-ask-question-product-id

Used to show the “Ask a Question” in the reviews widget to leave a question for the specified product.

string

Any valid product ID in the format shopify- e.g. shopify-1234567.

data-oke-reviews-write-review-product-id

Used to show the “Write a Review” in the reviews widget to write a review for the specified product.

string

Any valid product ID in the format shopify- e.g. shopify-1234567.

Examples

Giving The Widget A Data Source

Without specifying a data source for the reviews, the widget will show all reviews for your store. You can provide either a Product ID or a Group ID to use that as the data source for the reviews.

Product Widget

<div data-oke-widget data-oke-reviews-product-id="shopify-<PRODUCT_ID>"></div>

The product widget also has some pre-rendered content stored in Shopify Metafields that we recommend including for increased performance on-site:

If you are using liquid use the following snippet:

<div data-oke-widget data-oke-reviews-product-id="shopify-{{ product.id }}">
    {{ product.metafields.okendo.ReviewsWidgetSnippet }}
</div>

The general format for other frameworks is:

<div data-oke-widget data-oke-reviews-product-id="shopify-<PRODUCT_ID>">
    <!-- 
    Retrieve the product.metafields.okendo.ReviewsWidgetSnippet via Shopify's GraphQL/REST API
    and put the contents here
    -->
</div>

Grouped Widget

Learn more about Okendo Groups here:

If you are using liquid or general frameworks use the following snippet:

<div data-oke-widget data-oke-reviews-group-id="<GROUP_ID>"></div>

Group ID is found in the Okendo Admin URL for a given group as descibed in the table above.

Specifying a Product To Ask About

When the widget is in all-reviews or grouped mode an explicit Product ID is needed to show the "Write a Review" or "Ask a Question" buttons.

Write A Review Product ID

If you are using liquid use the following snippet:

<div data-oke-widget data-oke-reviews-write-review-product-id="shopify-{{ product.id }}"></div>

The general format for other frameworks is:

<div data-oke-widget data-oke-reviews-write-review-product-id="<PRODUCT_ID>"></div>

Ask A Question Product ID

If you are using liquid use the following snippet:

<div data-oke-widget data-oke-reviews-ask-question-product-id="shopify-{{ product.id }}"></div>

The general format for other frameworks is:

<div data-oke-widget data-oke-reviews-ask-question-product-id="<PRODUCT_ID>"></div>

Instructions for a Shopify Online Store 2.0 installation can be found .

Customize your snippet with the data attributes listed .

For more detailed instructions, read our .

here
help centre article
here
LogoUnderstanding Okendo Groups | Okendo Help Center