Custom Star Ratings on Shopify: A Community Deep Dive into Code vs. Apps

Hey everyone, it's your Shopify migration expert here. I was just digging through the community forums, and a question from saqlain1 caught my eye: "Need star rating custom code." It's a classic – how do you get those eye-catching product star ratings onto your Shopify store, exactly how you want them?

Star ratings are more than just pretty icons; they're vital social proof that can significantly boost buyer confidence and conversion rates. When a potential customer sees a product with a solid 4.7-star rating and thousands of reviews, it instantly builds trust. That's why getting them right, both functionally and aesthetically, is so important.

The "Custom Code" Deep Dive: Crafting Your Own Star Rating Section

saqlain1 was looking for custom code, and the community definitely delivered! Two helpful members, oscprofessional and ajaycodewiz, stepped up with some fantastic Liquid and CSS solutions for creating a fully customizable Shopify OS 2.0 section. This is great for store owners who want granular control over every aspect of their star ratings without relying on third-party apps.

Building a Custom Star Rating Section with Code

Let's walk through how you can implement a robust custom star rating section, using ajaycodewiz's detailed solution as a prime example. This approach uses SVG stars, which gives you crisp, scalable icons at any size.

Here's how to add it to your theme:

1. In your Shopify admin, go to Online Store > Themes.
2. Find your current theme (like Kalles, where this was tested) and click … > Edit code.
3. Under the Sections directory, click Add a new section.
4. Name it custom-star-rating.
5. Delete the starter content that Shopify automatically creates for the new section.
6. Paste the following code into your newly created custom-star-rating.liquid file and click 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) -%}
    
  {%- endfor -%}
{%- endcapture -%}


  

    
      {{ stars }}
      {{ stars }}
    

    {%- if section.settings.show_number -%}
      ({{ rating }})
    {%- endif -%}

    {%- if section.settings.review_count != blank -%}
      {{ section.settings.review_count }} {{ section.settings.count_label }}
    {%- endif -%}
  




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

Once saved, you can go to your Online Store > Customize, then click Add section and select "Custom star rating" to drop it onto any page. The beauty of this solution is its customizability, all available right within the theme editor:

• Rating & Stars: Set the rating value (e.g., 4.7) and the total number of stars (e.g., 5). The partial star fill is precise, not just rounded.
• Colors & Size: Adjust filled and empty star colors, star size, and spacing between stars.
• Text: Show or hide the rating number, customize the review count and its label, and control text color and size.
• Layout: Choose alignment (left, center, right), set a background color, corner radius, and padding.

oscprofessional also provided a great solution, slightly different in its CSS and Liquid structure but offering similar customization. It's fantastic to see the variety of well-crafted custom code solutions available right within the community!

  {% assign rating = section.settings.rating | plus: 0 %}
  {% assign full_stars = rating | floor %}
  {% assign decimal = rating | minus: full_stars %}
  {% assign percentage = decimal | times: 100 %}

  

    {% for i in (1..5) %}
      {% if i <= full_stars %}
        ★

      {% elsif i == full_stars | plus: 1 and decimal > 0 %}
        
          ★
          ★
        

      {% else %}
        ★
      {% endif %}
    {% endfor %}
  

  

    {% if section.settings.show_rating %}
      ({{ section.settings.rating }})
    {% endif %}

    {{ section.settings.review_count }}

    {% if section.settings.review_label != blank %}
      {{ section.settings.review_label }}
    {% endif %}
  




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

The "App" Advantage: When Simplicity and Features Reign

While custom code offers ultimate control, a few community members, like Ellie-BOGOS and devcoders, were quick to point out a simpler, often more feature-rich alternative: dedicated review apps. These apps often come with free plans and handle a lot of the heavy lifting for you.

The main benefits of using an app are:

• No Coding Needed: Most apps offer ready-to-use widgets that you can easily add via the theme editor or simply install and activate.
• Comprehensive Features: Beyond just displaying stars, these apps often include review collection, moderation, photo/video reviews, Q&A, and even SEO schema markup automatically.
• Ongoing Support & Updates: Apps are maintained by their developers, meaning they'll stay compatible with Shopify updates and offer support if you run into issues.

Ellie-BOGOS specifically recommended two solid options with generous free plans:

• Ryviu: Reviews & Loyalty App: Known for quick setup and ready-to-use star rating widgets. It also packs in loyalty and rewards programs, which is a nice bonus for customer retention. Dan-From-Ryviu also chimed in, showcasing Ryviu's detailed customization options, allowing you to tweak the star rating block to your heart's content.

• Judge.me: Another powerful app with a very generous free plan. It provides a customizable Star Rating Badge widget that integrates smoothly into your theme editor.

Choosing Your Path: Custom Code vs. Apps

The community discussion highlighted that there isn't a single "best" solution; it really depends on your specific needs and technical comfort level. devcoders also touched upon using Metaobjects and Metafields for truly bespoke solutions, which is a powerful advanced option if you need to integrate reviews with custom data structures.

• Go Custom Code if: You have very specific design requirements that no app can meet, you want minimal third-party dependencies, or you (or your developer) are comfortable with Liquid, CSS, and potentially JavaScript. This gives you absolute control.
• Choose an App if: You want a quick, easy setup with minimal coding, need comprehensive review management features (collection, display, moderation), or want built-in SEO benefits and ongoing support. The free plans of many apps are more than sufficient for most small to medium-sized stores.

Ultimately, whether you decide to roll up your sleeves with custom code or leverage the power of a dedicated app, the goal is the same: to effectively showcase your product ratings and build trust with your customers. Both paths are perfectly valid, and the right choice for you will come down to your store's unique requirements and resources. It's awesome to see the Shopify community providing such diverse and helpful solutions for a common merchant need!