Refresh theme - update product page review rating text

[mrtkmk]

Hi, I would like to update the review rating section on my site on the product page in the following ways:

1) Update the text

- I would like to change the text from just the number of ratings to also having the word "reviews". I've given an example below

2) Change the colour of the stars

- I would like to change the colour of the stars from black to yellow

Store link: https://www.farandwideofficial.com/products/family-passport-holder-black-for-4

Any help would be appreciated! 

Thanks

[made4Uo]

Hi @mrtkmk,

With minimal access to html, we can only use editing this with CSS code. You can use the code below

1. From your Admin page, go to Online store > Themes > click the three dots > Edit code
2. Find the Asset folder, and open the base.css file
3. Add the code below at the very end of the file

p.rating-count.caption > span:first-child:after {
    content: " Reviews)";
    margin-left: -0.5rem;
    position: absolute;
    padding-left: 1rem;
    z-index: 12;
    background: white;
}

.rating > .rating-start.color-icon-text::before {
    background:linear-gradient(90deg, #eeeeee 0,#fdc10a 0)
}

The result should look like this:

[mrtkmk]

Thank you! That's appreciated. One more question if you don't mind...

Do you know how to increase the font size on mobile for the rating text. The "(39 reviews)" is very small (not sure why they designed it this way).

Thanks 🙂

[made4Uo]

Hi @mrtkmk,

Yes, this can be done. Please add the code below

1. From your Admin page, go to Online store > Themes > click the three dots > Edit code
2. Find the Asset folder, and open the base.css file
3. Add the code below at the very end of the file

span.rating-star.color-icon-text {
    font-size: 20px;
}

p.rating-count.caption span:first-child {
    font-size: 17px;
}

[mrtkmk]

Hi, apologies for the slow response. Thank you for your help. I have only just gotten around to making the additional changes. 

The code to change the colour of the stars did not work properly. It appears as follows:

So the stars have gone but the colour is correct.

Any additional advice would be appreciated! 

[made4Uo]

Hi @mrtkmk,

Can you provide the preview link of the theme you are working?