Below are instructions on how to set up your vintage theme to support and display the Okendo Reviews Widget and Product Ratings Summaries.

If your store uses Shopify's Online Store 2.0 theme, you should refer to these instructions to add your review display widgets.

In this article, you'll learn how to:

Before you begin

You must install the Okendo Reviews app before you can add any reviews display widgets to your Shopify theme. Click here to see how to complete the basic installation.

Enable Review Widgets

Enabling the Review Widgets setting shows the ratings on product listings and reviews on product pages.

  1. Open your Okendo Admin.

  2. Click Settings in the sidebar.

  3. Click Widgets on the Settings page.

  4. Check that the Enable Review Widgets toggle switch is on.

  5. Next, follow the instructions below to enable the Okendo app embed in Shopify.

Enable the Okendo app embed in Shopify

By enabling this setting, you're ensuring that the settings and styles for Okendo's reviews widgets are loaded and you can start adding review widgets where you want them to appear.

  1. Open your Shopify admin.

  2. Click Online Store, and then click Themes.

  3. Click the Customize button for the theme you want to edit.

  4. Find the Theme Settings tab and click it.

  5. Click the App embeds tab.

  6. Toggle on the Okendo Reviews app embeds switch to enable you to add widgets to your Shopify theme.

    Note: You can use the down arrow to expand the Okendo app embed for more information.

  7. Follow the instructions below to create snippet files for your widgets.

Create snippet files for Reviews Widget and Rating Summary

You'll need to create snippet files for our Reviews Widget and our Product Rating Summary snippet.

Product Reviews Widget

The Product Reviews Widget lets you display all reviews for a single product.


Install folder: Snippets
Suggested file name: okendo-reviews-widget.liquid
Code:

{% if product != blank %} 
{% capture product_data_attribute %}data-oke-reviews-product-id="shopify-{{ product.id }}"{% endcapture %}
{% endif %}
{% if shop.metafields.okendo.ReviewsWidgetStyles != blank %}
{{ shop.metafields.okendo.ReviewsWidgetStyles }}
{% endif %}
<div data-oke-widget {{ product_data_attribute }}>{{ product.metafields.okendo.ReviewsWidgetSnippet }}</div>

Product Rating Summary  

The Products Rating Summary is the average star rating for a single product.  


Install folder: Snippets  
Suggested file name: okendo-reviews-product-rating-summary.liquid
Code:   

{% if product != blank %} 
{% capture product_data_attribute %}data-oke-reviews-product-id="shopify-{{ product.id }}"{% endcapture %}
{% endif %}
<div data-oke-star-rating {{ product_data_attribute }}>{{ product.metafields.okendo.StarRatingSnippet }}</div>

Include Okendo widgets where you want them

After you create individual snippets, you can use theme tags to place your review content where you want it to appear on your site.

For snippets, use the tag {% render 'snippet-file-name', product: product %} where snippet-file-name is the name of the snippet file you want to include (without the .liquid suffix).

Typically, merchants place the Product Reviews Widget at the bottom of the product page template and add the Product Rating Summary just below the product titles on the product page template and the collection page template.

Example

If you wanted to include the average product rating below the product title on each of your product pages, your product.liquid file might include something like this:

<h1>{{product.title}}</h1>
{% render 'okendo-reviews-product-rating-summary', product: product %}

Design your reviews widgets

Okendo offers an extensive range of options and customizations for displaying your reviews and ratings. Click here to learn more about customizing your Reviews Widget. And if you're looking for inspiration, click here to see how some of our customers use Okendo Reviews.

Related articles

Did this answer your question?