Solved

Shopify Star Rating in Horizontal

elgobbo
Excursionist
21 2 2

Hi,

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

Screenshot 2023-12-17 at 23.04.26.jpg

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. 

Screenshot 2023-12-17 at 23.08.05.png

Screenshot 2023-12-17 at 23.10.25.png

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 ?

Accepted Solution (1)
PageFly-Theodor
Navigator
367 52 56

This is an 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>

Recall Clothing - Geneva - Rogue Territory - Supply Jacket in Tan Corduroy w- Blanket Lining 2023-12-18 05-32-07.png 

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

View solution in original post

Replies 7 (7)

PageFly-Theodor
Navigator
367 52 56

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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

elgobbo
Excursionist
21 2 2

Thanks for the quick response. www.recallclothing.com

PageFly-Theodor
Navigator
367 52 56

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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

elgobbo
Excursionist
21 2 2
PageFly-Theodor
Navigator
367 52 56

This is an 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>

Recall Clothing - Geneva - Rogue Territory - Supply Jacket in Tan Corduroy w- Blanket Lining 2023-12-18 05-32-07.png 

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

elgobbo
Excursionist
21 2 2

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

PageFly-Theodor
Navigator
367 52 56

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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.