הטמעת דירוג כוכבים בעמודי קולקציה – Shopify

איך להוסיף קוד קטן (Liquid) שיאפשר להציג בעמודי הקולקציה שלכם דירוג כוכבים ומספר ביקורות עבור כל מוצר – לפי הביקורות שנאספו בפלאשי.

מה תהיה התוצאה?

הקוד בודק האם קיים למוצר ביקורות ובמידה וכן – הוא מציג שורת דירוג עם כוכבים בצבע זהב ומתחתיה את מספר הביקורות בסוגריים. לדוגמה:

⭐️⭐️⭐️⭐️☆ (23)

---

התאמה אישית לצבעי המותג שלכם

הקוד המצורף הוא דוגמה, אתם יכולים לשנות את העיצוב כך שבמקום כוכבים יהיה איזה אייקון שתרצו או איזה צבע שתבחרו, הצבעים או המיקום לפי השפה העיצובית שלכם.
מכיוון שכל הנתונים נשמרים ב־Metafields, אתם מקבלים שליטה מלאה בכל חלק של הנראות.

---

איפה כדאי למקם את הכוכבים?

הכי מומלץ להוסיף את הקוד בתוך הקובץ שמציג את המוצרים ברשימת הקולקציה, שהוא לרוב:

sections/card-product.liquid

במקרים אחרים ייתכן שמדובר בקובץ אחר כמו product-card-grid.liquid או קובץ בשם דומה ב־snippets/.

המיקום המדויק תלוי בתבנית שלכם, אבל לרוב ממקמים את הקוד מתחת לשם המוצר או המחיר – כדי שיהיה גלוי וברור ללקוחות הגולשים בקולקציה.

---

הקוד עצמו של הדירוג

העתיקו והדביקו את הקוד הזה במקום הרצוי בתצוגת מוצר:

<!-- Flashy Reviews -->
{% if product.metafields.flashy.avg_rating and product.metafields.flashy.reviews_count %}
{% assign avg = product.metafields.flashy.avg_rating | round: 1 %}
{% assign full_stars = avg | floor %}

{% assign has_half_star = 0 %}
{% if avg > full_stars %}
  {% assign has_half_star = 1 %}
{% endif %}

{% assign empty_stars = 5 | minus: full_stars | minus: has_half_star %}

<div class="product-rating" style="display: flex; align-items: center; gap: 4px;">
  <div class="stars" style="color: #f5a623; font-size: 14px;">
    {% for i in (1..full_stars) %}
      ★
    {% endfor %}

    {% if has_half_star == 1 %}
      <span style="position: relative; display: inline-block; width: 0.8em;">
        <span style="color: #f5a623;">★</span>
        <span style="position: absolute; top: 0; left: 50%; color: #e0e0e0; overflow: hidden; width: 50%;">★</span>
      </span>
    {% endif %}

    {% for i in (1..empty_stars) %}
      <span style="color: #e0e0e0;">★</span>
    {% endfor %}
  </div>
  <span class="review-count" style="font-size: 12px; color: #666;">
    ({{ product.metafields.flashy.reviews_count }})
  </span>
</div>
{% endif %}
<!-- End Flashy Reviews -->

---

למי שצריך עזרה

אם אינכם בטוחים איפה בדיוק להדביק את הקוד – מומלץ להיעזר במפתח או איש טכני.

בהצלחה✨!