Get started

This tutorial requires the technical skills, including Liquid. If you have difficulty doing this, please contact us.

Open your theme editor

In this tutorial, we use the theme Dawn version 13.0.1 for example. It may be different from other theme you are using.

Open theme code editor

Create a new snippet

After you access the theme code editor, you can create a new snippet.

Enter the name for the snippet: Enter the snippet name

Do not forget to click Save.

Paste the code to the snippet

Copy the content of the below code and paste to your snippet.

doran-rating-widget.liquid

<script type="text/javascript">
  window.$prDoranInit = window.$prDoranInit || {};
  window.$prDoranInit.ratingWidgetReview = window.$prDoranInit.ratingWidgetReview || {};
  var productReview = {
    reviewsCount: {{ product.metafields.doran.prReviewCount | default: 0 }},
    averageRating: {{ product.metafields.doran.prAvgRating | default: 0 }},
    stars1: {{ product.metafields.doran.prStar1 | default: 0 }},
    stars2: {{ product.metafields.doran.prStar2 | default: 0 }},
    stars3: {{ product.metafields.doran.prStar3 | default: 0 }},
    stars4: {{ product.metafields.doran.prStar4 | default: 0 }},
    stars5: {{ product.metafields.doran.prStar5 | default: 0 }}
  }
  if (typeof window.$prDoranInit.ratingWidgetReview['{{ product.id }}'] === 'undefined') {
    window.$prDoranInit.ratingWidgetReview['{{ product.id }}'] = productReview;
  } else {
    var existingProductReview = window.$prDoranInit.ratingWidgetReview['{{ product.id }}'];
    window.$prDoranInit.ratingWidgetReview['{{ product.id }}'] = Object.assign(existingProductReview, productReview);
  }
</script>
<div
  data-dr="rating-widget"
  data-class-name="collection-page"
  data-hide-detail="true"
  data-product-id="{{ product.id }}"
  data-reviews-count="{{ product.metafields.doran.prReviewCount | default: 0 }}"
  data-average-rating="{{ product.metafields.doran.prAvgRating | default: 0 }}"
  data-star1="{{ product.metafields.doran.prStar1 | default: 0 }}"
  data-star2="{{ product.metafields.doran.prStar2 | default: 0 }}"
  data-star3="{{ product.metafields.doran.prStar3 | default: 0 }}"
  data-star4="{{ product.metafields.doran.prStar4 | default: 0 }}"
  data-star5="{{ product.metafields.doran.prStar5 | default: 0 }}"
  data-show-only-reviews-count="true"
></div>

If you want to hide the rating widget if you don't have any reviews, you should use the below snippet.

doran-rating-widget.liquid

{% assign prReviewCount = product.metafields.doran.prReviewCount | default: 0 %}
{% if prReviewCount > 0 %}
  <script type="text/javascript">
    window.$prDoranInit = window.$prDoranInit || {};
    window.$prDoranInit.ratingWidgetReview = window.$prDoranInit.ratingWidgetReview || {};
    var productReview = {
      reviewsCount: {{ product.metafields.doran.prReviewCount | default: 0 }},
      averageRating: {{ product.metafields.doran.prAvgRating | default: 0 }},
      stars1: {{ product.metafields.doran.prStar1 | default: 0 }},
      stars2: {{ product.metafields.doran.prStar2 | default: 0 }},
      stars3: {{ product.metafields.doran.prStar3 | default: 0 }},
      stars4: {{ product.metafields.doran.prStar4 | default: 0 }},
      stars5: {{ product.metafields.doran.prStar5 | default: 0 }}
    }
    if (typeof window.$prDoranInit.ratingWidgetReview['{{ product.id }}'] === 'undefined') {
      window.$prDoranInit.ratingWidgetReview['{{ product.id }}'] = productReview;
    } else {
      var existingProductReview = window.$prDoranInit.ratingWidgetReview['{{ product.id }}'];
      window.$prDoranInit.ratingWidgetReview['{{ product.id }}'] = Object.assign(existingProductReview, productReview);
    }
  </script>
  <div
    data-dr="rating-widget"
    data-class-name="collection-page"
    data-hide-detail="true"
    data-product-id="{{ product.id }}"
    data-reviews-count="{{ product.metafields.doran.prReviewCount | default: 0 }}"
    data-average-rating="{{ product.metafields.doran.prAvgRating | default: 0 }}"
    data-star1="{{ product.metafields.doran.prStar1 | default: 0 }}"
    data-star2="{{ product.metafields.doran.prStar2 | default: 0 }}"
    data-star3="{{ product.metafields.doran.prStar3 | default: 0 }}"
    data-star4="{{ product.metafields.doran.prStar4 | default: 0 }}"
    data-star5="{{ product.metafields.doran.prStar5 | default: 0 }}"
    data-show-only-reviews-count="true"
  ></div>
{% endif %}

Paste snippet code

Do not forget to click Save.

Add the snippet to the collection page

Search for a snippet that name and open it.

Open card-product.liquid

As we mentioned above, in this example we are using the theme Dawn version 13.0.1 as an example. If you can not find a display location or can not find card-product.liquid, please contact us.

Copy the below code.

card-product.liquid

{% render "doran-rating-widget", product: card_product %}

Paste it to the line 166.

Paste code to card-product.liquid

After all above steps, you will see the result like this.

I hope this tutorial may help you to add the rating widget to the collection page. If you have any issues relating to this, please contact us to get help.

Open your theme editor

Create a new snippet

Paste the code to the snippet

Add the snippet to the collection page

On this page