1. Home
  2. Review Widgets
  3. How to render stars with JavaScript

How to render stars with 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 metafields are not accessible. Here is how to use it.

1. Add Opinew JS snippet

Please copy and insert code below inside your shop <head>. We recommend inserting it into opinew_head.liquid file.

<script id="opinew-dynamic-js" src="https://cdn.opinew.com/js/util/opwdynamic.js" defer></script>

2. 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>

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>
Updated on August 13, 2021

Was this article helpful?

Related Articles

Leave a Comment