Below are instructions on how to set up your vintage theme to support and display the Okendo Reviews Widget and Product Ratings Summaries. Before you proceed, please make sure you've installed the Okendo Reviews app through the Shopify App Store. If you have an Online Store 2.0 theme, please refer to our Online Store 2.0 Install Instructions.
Step 1: Ensure the Widget is Enabled in Okendo Admin
The Okendo Reviews widgets can be toggled on/off in the Okendo Widget Settings (Settings > Widgets). To check that your widgets are set to show on your site, open the Okendo app, then go to Settings > Widgets > Enable Review Widgets.
Step 2: Include Our Styles In Your Theme Header
Find the <head> section of your theme (usually in your theme.liquid file), and paste the following just before the </head> tag:
{{ shop.metafields.okendo.ReviewsWidgetStyleTag }}
{{ shop.metafields.okendo.StyleCustomizations }}This will ensure that the settings and styles for the Okendo Reviews Widgets are loaded on your site.
Step 3: Create Individual Snippets For Okendo Content
Okendo offers a range of options for displaying your ratings and reviews. If you're looking for inspiration, you can see how some of our customers use Okendo Reviews here. For a basic installation, you will need to create snippet files for our Product Reviews Widget and our product Product Rating Summary Snippet. The code, suggested file name, the folder where it should be installed, and a small description for each one is given below.
Product Reviews Widget
Description: Okendo Reviews Widget to display all reviews for a single product
Install folder: Snippets
Suggested file name: okendo-reviews-widget.liquid
Code:
<div data-oke-reviews-widget data-oke-reviews-product-id="shopify-{{ product.id }}">{{ product.metafields.okendo.ProductReviewsWidgetSnippet }}</div>Product Rating Summary
Description: The average star rating for a single product
Install folder: Snippets
Suggested file name: okendo-reviews-product-rating-summary.liquid
Code:
<div data-oke-reviews-product-listing-rating>{{ product.metafields.okendo.ProductListingSnippet }}</div>Step 4: Include Okendo Widgets Where You Want Them
Once you've created the individual snippets, you can use theme tags to place your review content wherever you want it to appear.
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).
In most installations the Product Reviews Widget is included at the bottom of the product page template, and the Product Rating Summary is included 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 %}