Center Klaviyo Star Rating Widget on Mobile

Store Design
, , , , , ,

Topic summary

Goal: Center the Klaviyo star rating widget and its count on mobile, with the count above the heart icon.

Proposed solution: Add a mobile-only CSS rule via theme assets.

  • Path: Admin > Online Store > Themes > (your theme) > Edit code > Assets > main.css/base.css/style.css/theme.css.
  • Add at the bottom: a media query for max-width 767px targeting span.klaviyo-star-rating-widget with text-align: center !important.

Outcome: The responder shared an after-screenshot showing the widget centered on mobile.

Notes:

  • A product page link and before/after images are provided to illustrate the layout and result.
  • No confirmation from the original poster yet; resolution appears likely but not explicitly marked as solved.
Summarized with AI on December 24. AI used: gpt-5.
1

Hello, I would like to center the Klaviyo Star Rating Widget on mobile only, so that the ratings count appears above the heart rating and they are both centered. Here is a screenshot of how it looks now.

Taiku_0-1721666595852.png
Taiku_0-1721666595852.png828×1792 186 KB

Here is a link to a product page: https://taiku.shop/products/cartoon-toast-cat-plush-toy

Thank you!

1 Like
2

Hi @Taiku

Check this one.

  1. From you Admin page, go to Online Store > Themes
  2. Select the theme you want to edit
  3. Under the Asset folder, open the main.css(base.css, style.css or theme.css)
  4. Then place the code below at the very bottom of the file.
@media only screen and (max-width: 767px){
span.klaviyo-star-rating-widget {
    text-align: center !important;
}
}

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!