How to show blog comment ratings on the blog index page (or elsewhere)

1. Create a new Snippet in your Shopify theme called commentRatings.liquid
2. In that snippet, copy and paste this code:

{% if article.metafields.bb_comments.rating %}
  {% assign rating_data = article.metafields.bb_comments.rating %}
  {% assign avg_rating = rating_data.avgRating %}
  {% assign full_stars = avg_rating | floor %}
  {% assign half_star = avg_rating | minus: full_stars | at_least: 0.5 %}

  <div class="article-rating" title="{{ avg_rating | round: 1 }} out of 5 stars">
    {% for i in (1..5) %}
      {% assign next_star = full_stars | plus: 1 %}
      {% if i <= full_stars %}
        <svg
          class="star star-full"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="gold"
          color:
          var(--text);
          xmlns="http://www.w3.org/2000/svg"
        >
          <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
        </svg>
      {% elsif i == next_star and half_star >= 0.5 %}
        <svg class="star star-half" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" fill="#D3D3D3"/>
          <path d="M12 2v15.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" fill="gold"/>
        </svg>
      {% else %}
        <svg
          class="star star-empty"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="#D3D3D3"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
        </svg>
      {% endif %}
    {% endfor %}
    <span class="rating-count">({{ rating_data.ratingCount }} ratings)</span>
  </div>
{% endif %}

<style>
  .article-rating {
    display: flex;
    align-items: center;
    font-family: sans-serif;
  }

  .star {
    margin-right: 2px;
  }

  .rating-count {
    margin-left: 8px;
    font-size: 16px;
    color: black;
    opacity: 0.6;
  }
</style>

3. Save the file.
4. Insert {% render 'commentRatings' %} wherever you want this to display (likely on the blog index page, the top of the blog post template, etc.
5. Save that file and you are good to go!

Let us know if you have any issues 🙂