Star rating block

Copy-paste a Liquid snippet for trust & social proof - Shows the product's real review rating from the standard Shopify metafield - no hardcoded numbers. Adapted from a real storefront build.

Trust & social proofTheme snippetFree to copyOS 2.0 themes

Live previewCustomize in playground

★★★★★4.9 / 51,480 verified reviews

On a real product the score comes from the reviews metafield - the preview uses the settings on the left.

How to install on your store

1Back up your theme (Online Store > Themes > Actions > Duplicate) before changing any code.
2Install a review app that writes to the standard product.metafields.reviews.rating and rating_count metafields (most review apps do).
3Create snippets/star-rating.liquid, paste the complete file - styles and script are already inside it.
4Render it where you want the rating shown - for example under the product title.
5If a product has no rating metafield, the block renders nothing at all - it never invents a score.

star-rating.liquid

Complete source

1{%- comment -%}2  Reads the standard Shopify review metafields (rating + rating_count),3  which most review apps populate. Renders nothing when there is no data.4{%- endcomment -%}5{%- assign rating = product.metafields.reviews.rating.value.rating | plus: 0 -%}6{%- assign rcount = product.metafields.reviews.rating_count.value | plus: 0 -%}7{%- if rating > 0 -%}8  <div class="gpl-stars" role="img" aria-label="Rated {{ rating }} out of 5 stars">9    <span class="gpl-stars__icons" style="--gpl-rating: {{ rating }};" aria-hidden="true">&#9733;&#9733;&#9733;&#9733;&#9733;</span>10    <strong class="gpl-stars__score">{{ rating }} / 5</strong>11    {%- if rcount > 0 -%}12      <span class="gpl-stars__sep" aria-hidden="true"></span>13      <span class="gpl-stars__count"><b>{{ rcount }}</b> verified reviews</span>14    {%- endif -%}15  </div>16{%- endif -%}17 18{% stylesheet %}19.gpl-stars {20  display: inline-flex;21  align-items: center;22  gap: 0.9rem;23  padding: 0.65rem 1.35rem;24  border-radius: 999px;25  background: rgba(15, 24, 44, 0.92);26  border: 1px solid rgb(255 215 0 / 0.3);27  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgb(255 255 255 / 0.08);28  color: #fff;29}30.gpl-stars__icons { position: relative; display: inline-block; color: #3d4a66; letter-spacing: 0.12em; font-size: 1rem; line-height: 1; }31.gpl-stars__icons::before {32  content: "\2605\2605\2605\2605\2605";33  position: absolute;34  left: 0;35  top: 0;36  width: calc(var(--gpl-rating) / 5 * 100%);37  overflow: hidden;38  white-space: nowrap;39  color: #ffb800;40  text-shadow: 0 0 10px rgb(255 184 0 / 0.4);41}42.gpl-stars__score { font-size: 0.9rem; }43.gpl-stars__sep { width: 1px; height: 1rem; background: rgb(255 255 255 / 0.2); }44.gpl-stars__count { color: #94a3b8; font-size: 0.8rem; }45.gpl-stars__count b { color: #5eead4; font-weight: 700; }46{% endstylesheet %}47

Usage

{% render 'star-rating', product: product %}

How to install on your store

1Back up your theme (Online Store > Themes > Actions > Duplicate) before changing any code.

2Install a review app that writes to the standard product.metafields.reviews.rating and rating_count metafields (most review apps do).

3Create snippets/star-rating.liquid, paste the complete file - styles and script are already inside it.

4Render it where you want the rating shown - for example under the product title.

5If a product has no rating metafield, the block renders nothing at all - it never invents a score.

star-rating.liquid

Complete source

1{%- comment -%}2  Reads the standard Shopify review metafields (rating + rating_count),3  which most review apps populate. Renders nothing when there is no data.4{%- endcomment -%}5{%- assign rating = product.metafields.reviews.rating.value.rating | plus: 0 -%}6{%- assign rcount = product.metafields.reviews.rating_count.value | plus: 0 -%}7{%- if rating > 0 -%}8  <div class="gpl-stars" role="img" aria-label="Rated {{ rating }} out of 5 stars">9    <span class="gpl-stars__icons" style="--gpl-rating: {{ rating }};" aria-hidden="true">&#9733;&#9733;&#9733;&#9733;&#9733;</span>10    <strong class="gpl-stars__score">{{ rating }} / 5</strong>11    {%- if rcount > 0 -%}12      <span class="gpl-stars__sep" aria-hidden="true"></span>13      <span class="gpl-stars__count"><b>{{ rcount }}</b> verified reviews</span>14    {%- endif -%}15  </div>16{%- endif -%}17 18{% stylesheet %}19.gpl-stars {20  display: inline-flex;21  align-items: center;22  gap: 0.9rem;23  padding: 0.65rem 1.35rem;24  border-radius: 999px;25  background: rgba(15, 24, 44, 0.92);26  border: 1px solid rgb(255 215 0 / 0.3);27  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgb(255 255 255 / 0.08);28  color: #fff;29}30.gpl-stars__icons { position: relative; display: inline-block; color: #3d4a66; letter-spacing: 0.12em; font-size: 1rem; line-height: 1; }31.gpl-stars__icons::before {32  content: "\2605\2605\2605\2605\2605";33  position: absolute;34  left: 0;35  top: 0;36  width: calc(var(--gpl-rating) / 5 * 100%);37  overflow: hidden;38  white-space: nowrap;39  color: #ffb800;40  text-shadow: 0 0 10px rgb(255 184 0 / 0.4);41}42.gpl-stars__score { font-size: 0.9rem; }43.gpl-stars__sep { width: 1px; height: 1rem; background: rgb(255 255 255 / 0.2); }44.gpl-stars__count { color: #94a3b8; font-size: 0.8rem; }45.gpl-stars__count b { color: #5eead4; font-weight: 700; }46{% endstylesheet %}47

Usage

{% render 'star-rating', product: product %}