Changing the colour of stars reviews in theme

Topic summary

Goal: change the color of product review stars (carousel section) to green. Initial attempt—editing theme.css by replacing .spr-icon color variable with fill: #006400—did not work.

Key steps and context:

  • Store URL provided (no password): https://bangkokfirstaid.com/
  • Proposed fix targeted Judge.me star elements using CSS selector span.jdgm-star.jdgm–on { color: red; } placed near the end of theme.liquid/base.css.
  • First method (plain CSS at file bottom) did not take effect.

Working solution:

  • Insert the rule inside Liquid style tags in the theme: {% style %} span.jdgm-star.jdgm–on { color: red; } {% endstyle %}. This applied successfully, changing the star color (shown in screenshots). The color value can be adjusted as needed.

Outcome: issue resolved with inline CSS targeting the correct star class. Images were shared to demonstrate the result; they are illustrative, not required to understand the fix.

Summarized with AI on January 16. AI used: gpt-5.

Hi,

I would like to change the colour of the stars reviews for a green colour. I found in the CSS file theme.css the following code:

.spr-icon {
color: var(–product-review-star-color);
}

So I tried to replace this code by this one but it does not work:

.spr-icon { fill: #006400; }

Can somebody help me?

Many thanks

Hey @tboudier

Could you please provide your Store URL and, if applicable, the Password too? Your cooperation is greatly appreciated!

Best Regards,
Moeed

Hi Moeed,

Thank you for your help!

Sure, here it is: https://bangkokfirstaid.com/

There is no password and it concerns the carrousel section.

Hi @tboudier

Follow these Steps:

Go to Online Store Edit Code Find theme.liquid file or base.css

Add the following code in the bottom of the file above tag

span.jdgm-star.jdgm--on {
    color: red;
}

RESULT:

If I managed to help you then, don’t forget to Like it and Mark it as Solutions.

Hi Syedsumaimaly,

Thank you for your help.

I did it and unfortunately it did not work.

https://bangkokfirstaid.com/

Maybe I did something wrong? I attached a screenshot.

@tboudier Try this code..

{% style %}
span.jdgm-star.jdgm--on {
    color: red;
}
{% endstyle %}

If I managed to help you then, don’t forget to Like it and Mark it as Solutions.

1 Like

@syedsumaimaly

Thank you so much it works perfectly!

Have a great day!