> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.nector.io/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# How to add Review Rating section to your Shopify theme?

If you want to add the review rating section to your Shopify website but you have an older theme that does not support app blocks, you need to add the section by editing the code of your theme. 
 
Follow the below steps for adding the earn coins section to your website:

1. Go to your Shopify admin page

2. Under **Online Store**, click on **Themes** and click on **Edit Code** in the options

![](https://storage.crisp.chat/users/helpdesk/website/d9947dc4cf2ed000/image_14bmx7t.png)

3. Find the **Snippets** folder and click on **Add a new snippet** and write the name **nectorcustom_review_rating**

![](https://storage.crisp.chat/users/helpdesk/website/d9947dc4cf2ed000/image_t7kvp3.png)

4. Copy the below block of code and paste in the file you just created and click on **Save**

```
{% if product %}
  {% assign nector_product_id = product.id %}
  {% assign nector_countsum_count = product.metafields.nector.countsum.value.count | plus: 0 %}
  {% assign nector_countsum_sum = product.metafields.nector.countsum.value.sum | plus: 0.0 %}
  {% assign nector_countsum_avg = 0 %}

  {% if nector_countsum_count > 0 %}
    {% assign nector_countsum_avg = nector_countsum_sum | divided_by: nector_countsum_count %}
  {% endif %}
{% endif %}

{% if nector_product_id and nector_countsum_avg > 0 %}
  <div style="padding: 0px 0px; text-align: left; font-weight: normal;">
    {% assign fill = '#000' %}
    {% assign size = 12 %}
    {% assign count = nector_countsum_count %}
    {% assign rating = nector_countsum_avg %}
    <a href="#nector-reviews" style="text-decoration: none;">
      <div style="display:flex;align-items:baseline" class="prapp-stars">
        {% for i in (1..5) %}
          {% assign half = i | minus: 0.5 %}
          {% if rating >= i %}
            <svg
              class="prapp-star"
              style="width: {{ size }}px; height: {{ size }}px;"
              xmlns="http://www.w3.org/2000/svg"
              x="0px"
              y="0px"
              viewBox="0 0 512 512"
              xml:space="preserve"
            >
              <path fill="{{ fill }}" d="M512,197.816L325.961 185.585 255.898 9.569 185.835 185.585 0 197.816 142.534 318.842 95.762 502.431 255.898 401.21 416.035 502.431 369.263 318.842z"></path>
            </svg>
          {% elsif rating >= half %}
            <svg
              class="prapp-star"
              style="width: {{ size }}px; height: {{ size }}px;"
              xmlns:xlink="http://www.w3.org/1999/xlink"
              x="0px"
              y="0px"
              width="510px"
              height="510px"
              viewBox="0 0 510 510"
              style="enable-background:new 0 0 510 510;"
              xml:space="preserve"
            >
              <path fill="{{ fill }}" d="M510,197.472l-183.37-15.734L255,12.75l-71.629,168.988L0,197.472l0,0l0,0l139.103,120.539L97.41,497.25L255,402.186l0,0l157.59,95.039l-41.692-179.239L510,197.472z M255,354.348V117.172l43.605,102.918l111.689,9.588l-84.711,73.389l25.398,109.166L255,354.348z"/>
            </svg>
          {% else %}
            <svg
              class="prapp-star"
              style="width: {{ size }}px; height: {{ size }}px;"
              xmlns="http://www.w3.org/2000/svg"
              x="0px"
              y="0px"
              viewBox="0 0 512 512"
              xml:space="preserve"
            >
              <path fill="{{ fill }} "d="M512,197.819l-185.933-12.228L256,9.571l-70.067,176.021L0,197.82l142.658,120.93L95.856,502.429L256,401.214 l160.144,101.215l-46.8-183.671L512,197.819z M256,365.724l-112.464,71.08l32.827-128.831L75.829,222.888l130.971-8.603 L256,90.687l49.2,123.599l131.124,8.602l-100.689,85.077l32.829,128.839L256,365.724z" />
            </svg>
          {% endif %}
        {% endfor %}
        <span style="color: {{ fill }}; font-size: {{ size }}px; display: inline-block; margin-left: 5px; vertical-align: text-bottom;"
          >({{ count }})</span
        >
      </div>
    </a>
  </div>
{% endif %}
```

![](https://storage.crisp.chat/users/helpdesk/website/d9947dc4cf2ed000/image_1seq20i.png)

5. After that, find the file that has the code related to your product page, and paste the below line of code wherever appropriate based on where you want to display the section

|| Since each theme will have different files and structure, it is not possible to mention the exact file in which you have to put the below line of code. You need to find the appropriate file for your current theme and paste it in there.

`{% render 'nectorcustom_review_rating', product: product, customer: customer, shop: shop %}`

6. Click on **Save** button

###### After adding the above line of code, the review rating section will be visible on your product page

![](https://storage.crisp.chat/users/helpdesk/website/d9947dc4cf2ed000/image_1vjjr35.png)

### Related Articles

* [Review FAQs](https://help.nector.io/en/article/review-faqs-2ai9ha/?bust=1705561397109)