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.
Open your Okendo Admin.
Click Settings in the sidebar.
Click Widgets on the Settings page.
Check that the Enable Review Widgets toggle switch is on.
Next, follow the instructions below to enable the Okendo app embed in Shopify.
See video below on how to enable the Okendo review widgets.
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.
Open your Shopify admin.
Click Online Store, and then click Themes.
Click the Customize button for the theme you want to edit.
Find the Theme Settings tab and click it.
Click the App embeds tab.
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.
Follow the instructions below to create snippet files for your widgets.
See video below on how to turn on the app embed in Shopify.
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.WidgetPreRenderBodyStyleTags != blank %}
{{- shop.metafields.okendo.WidgetPreRenderBodyStyleTags }}
{% 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>
See videos below on how to create the snippet files.
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 %}
See videos below on how to include the Okendo widgets on your site.
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.