Align Product Review Stars status title to be under the stars In Product Card

Store Design
, , , ,

Topic summary

A user wants to center-align product review star ratings and their status titles within product cards on collection and product pages, ensuring consistent alignment across all cards.

Solution Provided:

  • Add custom CSS code to the theme’s base.css file (Online Store → Theme → Edit code → assets → base.css)
  • Initial CSS targets .spr-badge with display: contents for mobile viewports (max-width: 525px)

Follow-up Adjustment:

  • User requested additional bottom margin for the status title
  • Updated CSS adds margin-bottom: 20px to .spr-badge-caption span element

Status: The issue appears resolved with the provided CSS customization, which addresses both alignment and spacing requirements for the review star display.

Summarized with AI on November 23. AI used: claude-sonnet-4-5-20250929.
1

Hi guys,

I would like to align Product Review Stars status title to be under the stars In Product Card in collections and product page to that all stars in all products cards are aligned and in the center, in mobile view .

InkedScreenshot_20230123-151552_Chrome (1)_LI.jpg
InkedScreenshot_20230123-151552_Chrome (1)_LI.jpg1080×1920 177 KB

Thank you,

https://allianceautoproducts.com/

2

Hallo @Alliance

You can add code by following these steps to change

  1. Go to Online Store → Theme → Edit code > assets > base.css

paste below code at bottom(base.css)


@media only screen and (max-width: 525px) {
.spr-badge {
display: contents !important;
}
}

If you require any further information, feel free to contact me.

Best regards,

1 Like
3

Great. Only add buttom margin to the title status. Thank

4

@Alliance

paste below code at bottom(base.css)

@media only screen and (max-width: 525px) {
span.spr-badge-caption {
margin-bottom: 20px;
}
}

1 Like