How to add customer detail review on Product detail page

[amisha-29]

 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

[amisha-29]

Please tell me if anyone knows the answer

[Olamzstudio]

Hello 👋 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 %}

    <!-- Good review -->

    <div class="good-review">

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

      {{ review.body }}

    </div>

  {% elsif review.rating <= 3 %}

    <!-- Bad review -->

    <div class="bad-review">

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

      {{ review.body }}

    </div>

  {% 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:

<div class="review-cards">

  <div class="good-reviews-card">

    <h2>Good Reviews</h2>

    {% for review in product.reviews %}

      {% if review.rating > 3 %}

        <!-- Good review -->

        <div class="good-review">

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

          {{ review.body }}

        </div>

      {% endif %}

    {% endfor %}

  </div>

  <div class="bad-reviews-card">

    <h2>Bad Reviews</h2>

    {% for review in product.reviews %}

      {% if review.rating <= 3 %}

        <!-- Bad review -->

        <div class="bad-review">

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

          {{ review.body }}

        </div>

      {% endif %}

    {% endfor %}

  </div>

</div>

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...