Shopify Star Ratings: Custom Code vs. Apps for Your Store

Hey store owners! Ever found yourself scrolling through a product page, eyeing those little star ratings, and thinking, 'I need that for my store!'? You're not alone. It's a super common request, and recently, our community saw a great discussion kick off when @saqlain1 asked for some custom code to get a fully customizable star rating system going. They even shared a screenshot of exactly what they were envisioning – clear, prominent stars with review counts.

This thread quickly became a goldmine, showcasing two main paths to achieving those coveted star ratings: diving into custom code or opting for a streamlined app solution. Let's break down what our experts shared and help you decide which route is best for your Shopify store.

The DIY Approach: Crafting Custom Star Ratings with Code

If you're comfortable getting your hands a little dirty with your theme's code, creating a custom section for star ratings offers incredible flexibility. One of the most comprehensive solutions came from @ajaycodewiz, who not only provided a robust code snippet but also detailed instructions on how to implement it as a Shopify OS 2.0 section. This approach lets you control everything from the star color to the spacing and even the background.

Here's how you can add @ajaycodewiz's custom star rating section to your theme:

Step-by-Step: Adding the Custom Star Rating Section

1. Access Your Theme Code: From your Shopify admin, go to Online Store > Themes. Find your current theme (e.g., Kalles, as @ajaycodewiz tested on) and click the … button, then select Edit code.
2. Create a New Section: Under the Sections directory, click Add a new section. Name it custom-star-rating.
3. Paste the Code: Delete any starter content that Shopify automatically creates in this new file. Then, paste the following code into the custom-star-rating.liquid file. Make sure to hit 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 %}

4. Add to Your Page: Now for the fun part! Go back to your Shopify admin, then Online Store > Themes, and click Customize. In the theme editor, click Add section and you'll find your new Custom star rating section ready to be dropped onto any page.

What’s really neat about this specific custom section is how much you can tweak directly from the theme editor. @ajaycodewiz built in a ton of settings:

• Adjust the exact rating (e.g., 4.7, which gives you precise partial stars) and the total number of stars shown.
• Control star fill color, empty star color, star size, and the space between them.
• Toggle the numerical rating (like (4.7)) on or off.
• Customize the review count text and its label.
• Set text color and size.
• Even manage the layout with background color, corner radius, padding, and alignment.

Another community member, @oscprofessional, also offered a similar custom code solution, focusing on dynamic ratings and review counts, custom star/text colors, and adjustable sizes. It's fantastic to see multiple options for those who prefer to build their own!

The "Plug-and-Play" Solution: Leveraging Shopify Apps

While custom code offers ultimate control, for many store owners, the simplest and most robust solution comes from dedicated Shopify apps. As @Ellie-BOGOS pointed out, you probably don't even need custom code because most review apps offer free plans that include star rating badges. These apps handle all the heavy lifting – styling, star icons, and even crucial SEO schema – automatically.

@devcoders also chimed in, suggesting apps and mentioning the possibility of building custom solutions with Metaobjects and Metafields for advanced control, though for most, an app is a quicker path.

Recommended Review Apps with Free Plans:

Our community experts highlighted a couple of excellent choices:

• Ryviu: Reviews & Loyalty App: Recommended by @Ellie-BOGOS and further detailed by @Dan-From-Ryviu, this app is known for its quick setup and ready-to-use star rating widgets. What's cool is it often includes built-in Loyalty & Rewards programs, helping you not just collect reviews but also boost customer retention. @Dan-From-Ryviu even shared screenshots showing how customizable their star rating block is within the app's settings.
  
• Judge.me: Another highly recommended app with a very generous free plan. It provides a built-in Star Rating Badge widget that you can customize and place anywhere using the theme editor, similar to how you’d add a custom section.

Choosing Your Path: Code or App?

So, when should you choose one over the other? If you're looking for deep, pixel-perfect control over every design element and have some coding chops (or a developer on hand), the custom code approach is fantastic. It means less reliance on third-party apps and potentially faster page loads if implemented efficiently. Plus, as @devcoders mentioned, for truly unique, complex setups, combining custom code with Metaobjects and Metafields can provide unparalleled flexibility.

However, if you prioritize ease of setup, ongoing maintenance, automatic SEO benefits, and integrated features like review collection, loyalty programs, or photo reviews, then a dedicated app is likely your best bet. Many apps are designed to be "set it and forget it," freeing up your time to focus on other aspects of your business. Plus, the free plans offered by apps like Ryviu and Judge.me make them incredibly accessible for new or growing stores.

Ultimately, @saqlain1's question sparked a really helpful conversation for anyone looking to enhance their product displays with star ratings. Whether you go the custom code route or opt for a feature-rich app, the goal is the same: to build trust and encourage purchases. Both options, as our community demonstrated, offer fantastic ways to achieve that customizable star rating you're dreaming of. Remember, getting your store set up with these kinds of features can really make a difference, so if you're just starting your journey, consider all the powerful tools available on Shopify to bring your vision to life!