How to add customer detail review on Product detail page

Shopify Discussion
1

I’m developing a theme and I wanted to add Customer detail reviews on my product detail page in which I want in one card all the good rating will show and in another card all the bad rating show. But how can i do this dynamically please guide me show I can try from myself. I’m using dawn theme. Is this possible to do this via code or using App will be the better option? But i want to do this via code dynamically

2

Please tell me if anyone knows the answer

3

Hello :waving_hand: if I can…

You can dynamically display good and bad ratings in separate cards on your product detail page using the Dawn theme, you can leverage Shopify’s built-in review feature or third-party apps. Since you prefer to do this via code, let me explain a custom solution.

Ensure that product reviews are enabled in your Shopify admin panel. Go to Setttings > Sales channels > Product reviews and toggle the switch to enable reviews.

Or

Create a new Liquid template for your product reviews. In your Dawn theme, go to Online Store > Themes > Actions > Edit code. Create a new file under emplates and name it product-reviews.liquid. This template will display your product reviews.

About filter reviews by rating, you can use Liquid’s if statement to check the rating property of each review. Here’s an example code snippet:

{% for review in product.reviews %}

{% if review.rating > 3 %}

{{ review.title }} - {{ review.rating }} stars

{{ review.body }}

{% elsif review.rating <= 3 %}

{{ review.title }} - {{ review.rating }} stars

{{ review.body }}

{% endif %}

{% endfor %}

To now display good and bad reviews in separate cards, you can use HTML and CSS to create two columns or cards. Here’s an example:

Good Reviews

{% for review in product.reviews %}

{% if review.rating > 3 %}

{{ review.title }} - {{ review.rating }} stars

{{ review.body }}

{% endif %}

{% endfor %}

Bad Reviews

{% for review in product.reviews %}

{% if review.rating <= 3 %}

{{ review.title }} - {{ review.rating }} stars

{{ review.body }}

{% endif %}

{% endfor %}

Add CSS to style your review cards and make them visually appealing.

Alternatively to this, you can use third-party apps like ( Opinew Product Reviews) to add product reviews to your Dawn theme. These apps often provide more features and customization options…

Hope this helps you…