How can I display star ratings horizontally on my website?

[elgobbo]

Hi,

I tried a lot of things, but I have troubles getting the stars of the Shopify Star Rating (str) in horizontal.

On Firefox, when I inspect I am able to do a "display:flex", but I cannot replicate into the Shopify theme code as I don't know the class name. 

So I don't know what this <span role= is and I don't know how to change the CSS to reflect the same thing as on Firefox...

All the class names I tried did not change anything.  If I do the "display:flex" for spr-stars it does not work...

Can someone please help ?

[PageFly-Theodor]

Hi @elgobbo ,
This is Theodore from PageFly - Shopify Page Builder App.

Can you give me URL store?

I’ll be so happy if my suggestion can help to solve your problem. If you have any further questions, please feel free to tell me.
Best regards,
Theodore | PageFly

[elgobbo]

Thanks for the quick response. www.recallclothing.com

[PageFly-Theodor]

Can you give me the specific page where you are having problems?

[elgobbo]

Any product page. Like https://recallclothing.com/products/supply-jacket-in-tan-corduroy-w-blanket-lining

[PageFly-Theodor · Accepted solution]

For solving the problem about Shopify Star Rating In Horizontal, let’s try this solution:
Online Store ->Theme ->Edit code -> theme.liquid

<style>
.spr-starrating{
align-items: center !important;
display: flex !important;
justify-content: flex-start;
}
.spr-starrating .spr-stars  span {
display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}
</style>

 

[elgobbo]

Thanks. I'll give it a try tomorrow and give a feedback.

[PageFly-Theodor]

If my solution helps you. Please give me a like and accpet solution so everyone can refer