Need star rating custum code

[saqlain1]

hey can anyone help me with star rating like this custum code

custamizable all the things

[Dan-From-Ryviu]

Hi,
Our Ryviu: Reviews & Loyalty app has an option to customize the Star Rating block, as you requested

[Ellie-BOGOS]

Hi @saqlain1,

You probably don’t need custom code for this - most review apps offer a free plan that already comes with a star rating badge that shows the average rating + review count right on your product pages (and collection pages too). They handle the styling, the star icons, and even the SEO schema automatically.

Two solid options with a free plan available I’d recommend:

• Ryviu: Reviews & Loyalty App - super quick to set up (no coding needed), comes with ready-to-use star rating widgets, and also includes a built-in Loyalty & Rewards program (points for reviews, VIP tiers, discounts) - so you’re getting reviews + retention in one app.

• Judge.me - also has a built-in Star Rating Badge widget you can customize and place anywhere via the theme editor. Free plan is very generous too.

Both work well with the Customizable theme, and you can tweak colors/style to match what you’re going for in your screenshot.

Hope it helps!
Ellie from BOGOS: Free Gift Bundle Upsell team.

[devcoders]

Hi @saqlain1

You can check this apps.

If you’d prefer a custom solution instead, we can build the same functionality using Metaobjects and Metafields, giving you full control over the content and design.

Product reviews | Shopify App Store

[ajaycodewiz]

I built and tested on a Kalles store.

Add it

• Online Store > Themes > Kalles > … > Edit code.
• Under Sections, click Add a new section, name it custom-star-rating.
• Delete the starter content it creates, paste the code below, Save.

{%- liquid
  assign max = section.settings.max_stars
  assign rating = section.settings.rating
  if rating > max
    assign rating = max
  endif
  assign pct = rating | times: 100.0 | divided_by: max
  assign star_path = 'M12 .587l3.668 7.431 8.2 1.192-5.934 5.784 1.401 8.169L12 18.896l-7.335 3.857 1.401-8.169L.132 9.21l8.2-1.192z'
-%}

{%- capture stars -%}
  {%- for i in (1..max) -%}
    <svg class="csr__star" viewBox="0 0 24 24" width="{{ section.settings.star_size }}" height="{{ section.settings.star_size }}" aria-hidden="true"><path d="{{ star_path }}"/></svg>
  {%- endfor -%}
{%- endcapture -%}

<div class="csr csr--{{ section.settings.alignment }}" style="
  --csr-fill: {{ section.settings.star_fill_color }};
  --csr-empty: {{ section.settings.star_empty_color }};
  --csr-gap: {{ section.settings.star_gap }}px;
  --csr-text: {{ section.settings.text_color }};
  --csr-text-size: {{ section.settings.text_size }}px;
  --csr-bg: {{ section.settings.background_color }};
  --csr-pad-y: {{ section.settings.padding_vertical }}px;
  --csr-pad-x: {{ section.settings.padding_horizontal }}px;
  --csr-radius: {{ section.settings.corner_radius }}px;
  --csr-pct: {{ pct }}%;
">
  <div class="csr__inner">
    <span class="csr__stars" role="img" aria-label="{{ rating }} out of {{ max }} stars">
      <span class="csr__stars-base">{{ stars }}</span>
      <span class="csr__stars-fill">{{ stars }}</span>
    </span>

    {%- if section.settings.show_number -%}
      <span class="csr__num">({{ rating }})</span>
    {%- endif -%}

    {%- if section.settings.review_count != blank -%}
      <span class="csr__count">{{ section.settings.review_count }} {{ section.settings.count_label }}</span>
    {%- endif -%}
  </div>
</div>

<style>
  #shopify-section-{{ section.id }} .csr__inner {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    max-width: 100%;
    flex-wrap: wrap;
    background: var(--csr-bg);
    padding: var(--csr-pad-y) var(--csr-pad-x);
    border-radius: var(--csr-radius);
  }
  #shopify-section-{{ section.id }} .csr--left   { text-align: left; }
  #shopify-section-{{ section.id }} .csr--center { text-align: center; }
  #shopify-section-{{ section.id }} .csr--right  { text-align: right; }
  #shopify-section-{{ section.id }} .csr--center .csr__inner { justify-content: center; }
  #shopify-section-{{ section.id }} .csr--right  .csr__inner { justify-content: flex-end; }

  #shopify-section-{{ section.id }} .csr__stars {
    position: relative;
    display: inline-block;
    line-height: 0;
    white-space: nowrap;
  }
  #shopify-section-{{ section.id }} .csr__stars-base,
  #shopify-section-{{ section.id }} .csr__stars-fill {
    display: inline-flex;
    gap: var(--csr-gap);
  }
  #shopify-section-{{ section.id }} .csr__stars-fill {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--csr-pct);
    overflow: hidden;
  }
  #shopify-section-{{ section.id }} .csr__stars-base .csr__star { fill: var(--csr-empty); }
  #shopify-section-{{ section.id }} .csr__stars-fill .csr__star { fill: var(--csr-fill); }

  #shopify-section-{{ section.id }} .csr__num,
  #shopify-section-{{ section.id }} .csr__count {
    color: var(--csr-text);
    font-size: var(--csr-text-size);
    line-height: 1.2;
  }
  #shopify-section-{{ section.id }} .csr__num { font-weight: 600; }
</style>

{% schema %}
{
  "name": "Custom star rating",
  "tag": "section",
  "class": "section-custom-star-rating",
  "settings": [
    { "type": "header", "content": "Rating" },
    { "type": "range", "id": "rating", "label": "Rating", "min": 0, "max": 5, "step": 0.1, "default": 4.7 },
    { "type": "range", "id": "max_stars", "label": "Number of stars", "min": 3, "max": 10, "step": 1, "default": 5 },
    { "type": "checkbox", "id": "show_number", "label": "Show rating number", "default": true },

    { "type": "header", "content": "Review count text" },
    { "type": "text", "id": "review_count", "label": "Count", "default": "4,777" },
    { "type": "text", "id": "count_label", "label": "Label", "default": "Aggregated Reviews*" },

    { "type": "header", "content": "Stars" },
    { "type": "color", "id": "star_fill_color", "label": "Filled star color", "default": "#E8836B" },
    { "type": "color", "id": "star_empty_color", "label": "Empty star color", "default": "#4a4a4a" },
    { "type": "range", "id": "star_size", "label": "Star size", "min": 10, "max": 48, "step": 1, "unit": "px", "default": 22 },
    { "type": "range", "id": "star_gap", "label": "Space between stars", "min": 0, "max": 14, "step": 1, "unit": "px", "default": 3 },

    { "type": "header", "content": "Text" },
    { "type": "color", "id": "text_color", "label": "Text color", "default": "#ffffff" },
    { "type": "range", "id": "text_size", "label": "Text size", "min": 10, "max": 30, "step": 1, "unit": "px", "default": 16 },

    { "type": "header", "content": "Layout" },
    { "type": "select", "id": "alignment", "label": "Alignment", "default": "left",
      "options": [
        { "value": "left", "label": "Left" },
        { "value": "center", "label": "Center" },
        { "value": "right", "label": "Right" }
      ]
    },
    { "type": "color", "id": "background_color", "label": "Background", "default": "#211d1a" },
    { "type": "range", "id": "corner_radius", "label": "Corner radius", "min": 0, "max": 40, "step": 1, "unit": "px", "default": 0 },
    { "type": "range", "id": "padding_vertical", "label": "Vertical padding", "min": 0, "max": 80, "step": 2, "unit": "px", "default": 16 },
    { "type": "range", "id": "padding_horizontal", "label": "Horizontal padding", "min": 0, "max": 80, "step": 2, "unit": "px", "default": 16 }
  ],
  "presets": [
    { "name": "Custom star rating" }
  ]
}
{% endschema %}

Then go to Customize > Add section > Custom star rating to drop it onto the page.

What you can change (all in the section settings)

• Rating, and the number of stars.
• Filled star colour, empty star colour, star size, spacing.
• The (4.7) number: show or hide.
• The count and the label text next to it.
• Text colour and size.
• Background, corner radius, padding, alignment.

The partial star is exact, not a rounded half: set 4.7 and the 5th star fills 94%. Set 4.5 for a true half, 5 for full.

[oscprofessional]

Hi @saqlain1 ,
Below is a fully customizable Shopify OS 2.0 section. It supports:

Dynamic rating, Dynamic review count, Custom star color, Custom text color, Adjustable star size, Adjustable font size, Optional review link, Partial stars.

<div class="custom-star-rating">
  {% assign rating = section.settings.rating | plus: 0 %}
  {% assign full_stars = rating | floor %}
  {% assign decimal = rating | minus: full_stars %}
  {% assign percentage = decimal | times: 100 %}

  <div class="rating-stars">
    {% for i in (1..5) %}
      {% if i <= full_stars %}
        <span class="star full">★</span>

      {% elsif i == full_stars | plus: 1 and decimal > 0 %}
        <span class="star partial">
          <span class="fill" style="width:{{ percentage }}%">★</span>
          <span class="empty">★</span>
        </span>

      {% else %}
        <span class="star empty">★</span>
      {% endif %}
    {% endfor %}
  </div>

  <div class="rating-text">
    {% if section.settings.show_rating %}
      ({{ section.settings.rating }})
    {% endif %}

    {{ section.settings.review_count }}

    {% if section.settings.review_label != blank %}
      {{ section.settings.review_label }}
    {% endif %}
  </div>
</div>

<style>
.custom-star-rating{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.rating-stars{
  display:flex;
  line-height:1;
}

.star{
  position:relative;
  font-size:{{ section.settings.star_size }}px;
}

.star.full{
  color:{{ section.settings.star_color }};
}

.star.empty{
  color:{{ section.settings.empty_star_color }};
}

.star.partial{
  position:relative;
  display:inline-block;
  color:{{ section.settings.empty_star_color }};
}

.star.partial .fill{
  position:absolute;
  left:0;
  top:0;
  overflow:hidden;
  white-space:nowrap;
  color:{{ section.settings.star_color }};
}

.rating-text{
  font-size:{{ section.settings.font_size }}px;
  color:{{ section.settings.text_color }};
}

.rating-text a{
  color:inherit;
  text-decoration:none;
}

@media(max-width:767px){
.custom-star-rating{
gap:6px;
}

.star{
font-size:calc({{ section.settings.star_size }}px - 2px);
}

.rating-text{
font-size:calc({{ section.settings.font_size }}px - 2px);
}
}
</style>

{% schema %}
{
  "name": "Custom Star Rating",
  "settings": [
    {
      "type":"range",
      "id":"rating",
      "label":"Rating",
      "min":0,
      "max":5,
      "step":0.1,
      "default":4.7
    },
    {
      "type":"text",
      "id":"review_count",
      "label":"Review Count",
      "default":"4,777"
    },
    {
      "type":"text",
      "id":"review_label",
      "label":"Review Label",
      "default":"Aggregated Reviews"
    },
    {
      "type":"checkbox",
      "id":"show_rating",
      "label":"Show Rating Value",
      "default":true
    },
    {
      "type":"range",
      "id":"star_size",
      "label":"Star Size",
      "min":10,
      "max":40,
      "step":1,
      "default":22
    },
    {
      "type":"range",
      "id":"font_size",
      "label":"Font Size",
      "min":10,
      "max":30,
      "step":1,
      "default":18
    },
    {
      "type":"color",
      "id":"star_color",
      "label":"Star Color",
      "default":"#d39b73"
    },
    {
      "type":"color",
      "id":"empty_star_color",
      "label":"Empty Star Color",
      "default":"#bdbdbd"
    },
    {
      "type":"color",
      "id":"text_color",
      "label":"Text Color",
      "default":"#ffffff"
    }
  ],
  "presets":[
    {
      "name":"Custom Star Rating"
    }
  ]
}
{% endschema %}