General information
Our stars widget is our quickest way of showing your customers the amount of reviews each product has, either on the individual pages or on the collection pages. This color of this stars can be changed to fit your shop as well as the alignment for how to be shown (left, center ,right).
What kind of reviews it shows :
This element displays in simple but clear way the number of reviews on each product.
Where it should be used on the store :
This widget is meant to be placed between the title and the price, this helps on both the individual product page, or the collection pages.
More information :
There is an option to display the widget with empty stars if the users wants it, if this option is switched off the widget won’t be displayed until the product receives one or more reviews.
Installation Instructions
Watch our video tutorial below to quickly add product & collection star ratings to your Shopify store.
Method 1: App Blocks (Storefront 2.0)
What types of pages can the element be drag-and-dropped:
Product pages, collection pages (On collection pages you need to add the liquid snippet manually or ask our customer support for help with the installation)
Watch App Blocks Tutorial Video
See the full help center article tutorial for App Blocks.
Method 2: Javascript
Opinew uses metafields to render stars. However metafields don’t work if you have a product collection or use a template builder like shogun that use javascript to render its contents.
In this case you need to use our JavaScript library instead. It helps you render stars where meta fields are not accessible. Here is how to use it.
1. Place the stars
Insert the code to indicate where you want the stars to show. It can be any type of html element but we recommend div or span element. It needs to have the required class and data attributes as described below.
Product page stars
Insert html object with class opw-dynamic-stars and propertydata-product-id containing current product id in the template wherever You want to render the stars.
<div class="opw-dynamic-stars" data-product-id="123" ></div>
<div class="opw-dynamic-stars" data-product-id="{{product.id}}" ></div>Collection stars
For the collection of products use opw-dynamic-stars-collection class. It will create anchors to the product pages. Example:
<div class="opw-dynamic-stars-collection" data-product-id="123" ></div>
<div class="opw-dynamic-stars-collection" data-product-id="{{product.id}}" ></div>Method 3: Shopify Liquid
To install this widget with pure shopify liquid codes use the snippets bellow.
This is the recommended method for keeping fast loads times and avoiding website flash.
For review stars on your product pages use this:
<div id='opinew-stars-plugin-product'>{% render 'opinew_review_stars_product' product:product %}</div>For review stars on your collections/product lists pages use this:
<div class='opinew-stars-plugin-product-list'>{% render 'opinew_review_stars_lists' product:product %}</div>