Shopify Development

Customer reviews and ratings can make all the difference in building trust and boosting sales. Shoppers rely on the experiences of others to make informed purchasing decisions, and a well-integrated review system can significantly enhance your store’s credibility. In this quick guide, I’ll show you how to add a custom product rating and review feature to your Shopify store in just 5 minutes. With this simple addition, you’ll empower your customers to share their feedback and help others shop with confidence.

Code: https://github.com/ndrishinski/blogs/commit/3dd856c542e6627af8f29e5ea2f19ffa895866f2

Prefer Video?

Enjoy, otherwise read on!

Locate Product Page Information

For this UI feature, we want to display our review and ratings near the product title, price, and other relative details. To do this open up your product.json file in the ‘templates’ directory. If you look at the first section, you can determine which file is displaying this information currently. In the case of Dawn theme it is in the main-product.liquid section.

Create a New Block

After opening the main-product.liquid section file, you should see an area where a for loop is running over the different blocks. It should look something like:

{%- for block in section.blocks -%}
  {%- case block.type -%}
    ...

If you don’t see this, then go ahead and add it. Now right below the above code, we are going to add the following code:

{%- for block in section.blocks -%}
  {%- case block.type -%}
    {%- when 'custom_reviews' -%}
      <div class="custom-rating-selector">
        <div class="rating" role="img">
          <span aria-hidden="true" class="rating-star" style="--rating: 1; --rating-max: 5; --rating-decimal: {{ product.metafields.custom.product_rating.value }};"></span>
          <p>{{ product.metafields.custom.product-review.value }}</p>
        </div>
      </div>
...

What is happening here? Well in our loop that displays blocks, we are defining our HTML/Liquid for the user interface. We are also referencing two metafields that we will create in just a moment to reference the individual ratings and reviews for each product.

Now if we scroll to the bottom of this file we should see the {% schema %}. We want to update the schema slightly to include our new block:

{% schema %}
{
  "name": "t:sections.main-product.name",
  "tag": "section",
  "class": "section",
  "blocks": [
    {
      "type": "custom_reviews",
      "name": "Custom Reviews"
    },
    ...

Now we can add it from the customizer. Lastly in this file, let’s add our styles to display the stars correctly. At the top of the file add:

<style>
.custom-rating-selector .rating {
  display: inline-block;
  margin: 0;
}

.custom-rating-selector .rating-star {
  --letter-spacing: 0.8;
  --font-size: 1.7;
}

.custom-rating-selector .rating-star {
  --letter-spacing: 0.7;
  --font-size: 1.4;
  --letter-spacing: 0.7;
  --font-size: 1.4;
  --color-foreground: 255, 255, 255;
  --rating-max: 5;
  --rating-decimal: 5;
}

.custom-rating-selector .rating-star {
  --color-rating-star: black;
  --percent: calc(var(--rating-decimal) / var(--rating-max) * 100%);
  letter-spacing: calc(var(--letter-spacing) * 1rem);
  font-size: calc(var(--font-size) * 1rem);
  line-height: 1;
  display: inline-block;
  font-family: Times;
  margin: 0;
}

.custom-rating-selector .rating-star::before {
  content: '★★★★★';
  background: linear-gradient(
    90deg,
    var(--color-rating-star) var(--percent),
    rgba(0, 0, 0, 0.15) var(--percent)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}


.custom-rating-selector .rating-text {
  display: none;
}

.custom-rating-selector .rating-count {
  display: inline-block;
  margin: 0;
}

.custom-rating-selector @media (forced-colors: active) {
  .custom-rating-selector .rating {
    display: none;
  }

  .custom-rating-selector .rating-text {
    display: block;
  }
}
</style>

Create Rating Metafield

Now that our code is in place, we need to create 2 metafields that we will use to dynamically populate the rating and reviews for each product. Within the Shopify dashboard, navigate to Settings -> Custom data -> Products.

Now click on ‘Add definition’ and add the name of ‘Product Review’ and a description if you prefer like so:

Now we will repeat the same steps as above for the rating, giving this metafield the name of ‘Product Rating’ (notice the namespace is custom.product_rating which you may need to include the _).

Now if we navigate back to the main dashboard and click ‘Products’, you can add some data into the newly created metafields for any particular product.

Add Block in the Customizer

Now if we go the ‘Customizer’ of our theme, we should be able to add our new block on the product template! If you’ve added values to the displayed product from the previous step you should see your new block rendering.

Conclusion

I hope this tutorial has been easy enough to follow. Reach out with any questions and stay tuned for more Shopify tutorials!