{"id":1797,"date":"2021-10-21T17:26:20","date_gmt":"2021-10-21T17:26:20","guid":{"rendered":"https:\/\/www.opinew.com\/help-center\/?post_type=ht_kb&#038;p=1797"},"modified":"2023-09-18T13:47:49","modified_gmt":"2023-09-18T13:47:49","slug":"product-collection-stars-help-guide","status":"publish","type":"ht_kb","link":"https:\/\/www.opinew.com\/help-center\/knowledge-base\/product-collection-stars-help-guide\/","title":{"rendered":"Product &#038; Collection Stars Help Guide"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">General information<\/h2>\n\n\n\n<p>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).<\/p>\n\n\n\n<p><strong>What kind of reviews it shows<\/strong> :<\/p>\n\n\n\n<p>This element displays in simple but clear way the number of reviews on each product.<\/p>\n\n\n\n<p><strong><strong>Where it should be used on the store<\/strong> :<\/strong><\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<p><strong>More information :<\/strong><\/p>\n\n\n\n<p>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&#8217;t be displayed until the product receives one or more reviews.<\/p>\n\n\n\n<h2 class=\"has-text-align-left wp-block-heading\">Installation Instructions<\/h2>\n\n\n\n<p class=\"wp-block-ht-blocks-messages wp-block-hb-message wp-block-hb-message--withicon is-style-info\">Watch our video tutorial below to quickly add product &amp; collection star ratings to your Shopify store. <\/p>\n\n\n\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"How to install product page and collection star ratings on your Shopify store with Opinew\" width=\"643\" height=\"362\" src=\"https:\/\/www.youtube.com\/embed\/gM617_bNooU?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Method 1: App Blocks (Storefront 2.0) <\/h3>\n\n\n\n<p><strong>What types of pages can the element be drag-and-dropped<\/strong>:<\/p>\n\n\n\n<p>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)<\/p>\n\n\n\n<p><a href=\"https:\/\/www.youtube.com\/watch?v=5yUjVpemtl4\" data-rel=\"lightbox-video-0\" class=\"rank-math-link\">Watch App Blocks Tutorial Video<\/a><\/p>\n\n\n\n<p><a class=\"rank-math-link\" href=\"https:\/\/www.opinew.com\/help-center\/knowledge-base\/product-reviews-shopify-dawn-theme\/\">See the full help center article tutorial for App Blocks.<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Method 2: Javascript<\/h3>\n\n\n\n<p>Opinew uses metafields to render stars. However metafields don\u2019t work if you have a product collection or use a template builder like shogun that use javascript to render its contents.<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">1. Place the stars<\/h4>\n\n\n\n<p>Insert the code to indicate where you want the stars to show. It can be any type of html element but we recommend&nbsp;<code>div<\/code>&nbsp;or&nbsp;<code>span<\/code>&nbsp;element. It needs to have the required class and data attributes as described below.<\/p>\n\n\n\n<p><strong>Product page stars<\/strong><\/p>\n\n\n\n<p>Insert html object with class&nbsp;<code>opw-dynamic-stars<\/code>&nbsp;and property<code>data-product-id&nbsp;<\/code>containing current product id in the template wherever You want to render the stars.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">&lt;div class=\"opw-dynamic-stars\" data-product-id=\"123\" >&lt;\/div>\n\n&lt;div class=\"opw-dynamic-stars\" data-product-id=\"{{product.id}}\" >&lt;\/div><\/code><\/pre>\n\n\n\n<p><strong>Collection stars<\/strong><\/p>\n\n\n\n<p>For the collection of products use <code>opw-dynamic-stars-collection<\/code> class. It will create anchors to the product pages. Example:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">&lt;div class=\"opw-dynamic-stars-collection\" data-product-id=\"123\" >&lt;\/div>\n\n&lt;div class=\"opw-dynamic-stars-collection\" data-product-id=\"{{product.id}}\" >&lt;\/div><\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Method 3: Shopify Liquid<\/h3>\n\n\n\n<p>To install this widget with pure shopify liquid codes use the snippets bellow.<\/p>\n\n\n\n<p>This is the recommended method for keeping fast loads times and avoiding website flash.<\/p>\n\n\n\n<p>For review stars on your <strong>product pages<\/strong> use this:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">&lt;div id='opinew-stars-plugin-product'>{% render 'opinew_review_stars_product' product:product %}&lt;\/div><\/code><\/pre>\n\n\n\n<p>For review stars on your <strong>collections\/product lists&nbsp;pages<\/strong> use this:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">&lt;div class='opinew-stars-plugin-product-list'>{% render 'opinew_review_stars_lists' product:product %}&lt;\/div><\/code><\/pre>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>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&#8230;<\/p>\n","protected":false},"author":7,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":[],"ht-kb-category":[24],"ht-kb-tag":[],"_links":{"self":[{"href":"https:\/\/www.opinew.com\/help-center\/wp-json\/wp\/v2\/ht-kb\/1797"}],"collection":[{"href":"https:\/\/www.opinew.com\/help-center\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/www.opinew.com\/help-center\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/www.opinew.com\/help-center\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/www.opinew.com\/help-center\/wp-json\/wp\/v2\/comments?post=1797"}],"version-history":[{"count":18,"href":"https:\/\/www.opinew.com\/help-center\/wp-json\/wp\/v2\/ht-kb\/1797\/revisions"}],"predecessor-version":[{"id":3048,"href":"https:\/\/www.opinew.com\/help-center\/wp-json\/wp\/v2\/ht-kb\/1797\/revisions\/3048"}],"wp:attachment":[{"href":"https:\/\/www.opinew.com\/help-center\/wp-json\/wp\/v2\/media?parent=1797"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.opinew.com\/help-center\/wp-json\/wp\/v2\/ht-kb-category?post=1797"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.opinew.com\/help-center\/wp-json\/wp\/v2\/ht-kb-tag?post=1797"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}