How can I align review stars with vendor & SKU in the Warehouse theme?

Topic summary

A user seeks to horizontally align review star ratings with the vendor and SKU information in Shopify’s Warehouse theme, which currently displays these elements in a stacked vertical layout.

Solution Provided:

  • Custom CSS code targets screens wider than 640px
  • Uses float: left and negative margins to reposition the review badge element
  • Adjusts the SKU element’s left margin to accommodate the stars
  • Code should be added to the bottom of the theme.css file in the Assets folder

Key CSS Properties:

  • .product-meta__reviews-badge: Floated left with -26px top margin and 190px left margin
  • .product-meta__sku span: Adjusted with -12px left margin
  • Media query ensures changes only apply to larger screens

Outcome:
The solution was accepted and the user confirmed it worked successfully.

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

is it possible to align the Review Stars alongside the Vendor & SKU in this theme?

theme preview - https://sjmhffon19xwpa50-17838313.shopifypreview.com

i had asked a similar question for a different theme and got great support thank you - but we’re focusing on updating our current theme.

@Linda_Ladley

Hi,

Please go to Assets > theme.css file and add the code below to the bottom of the theme.css file.

@media screen and (min-width: 641px) {
  .product-meta__reviews-badge {
    display: block;
    float: left;
    margin-top: -26px !important;
    margin-left: 190px;
  }
  span.product-meta__sku {
    margin-left: -12px;
  }
}

@media screen and (max-width: 640px) {
  .product-meta__reviews-badge {
    display: block;
    float: left;
    margin-top: -30px !important;
    margin-left: 190px;
  }
  span.product-meta__sku {
    margin-left: -12px;
  }
}

Hope it helps.

Thanks.

1 Like

@DavidEKim Thank you so much - you’re an absolute star!