Price not centered in "You may also like" section when compare price is shown (Sense theme)

Technical Q&A

Topic summary

A user reported a CSS alignment issue in the Shopify Sense theme where product prices with compare-at pricing (discounts) were not properly centered in the “You may also like” section, particularly noticeable on mobile and when resizing browser windows.

Solution provided:

  • Add custom CSS to assets/component-price.css
  • The code targets .related-products elements and uses flexbox properties to:
    • Stack price elements vertically (flex-direction: column)
    • Center sale prices (justify-content: center)
    • Center regular price items with auto margins

Outcome:
The CSS fix successfully resolved the centering issue, and the original poster confirmed it worked.

Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.
1

Hi everyone,

On my product page, there’s a “You may also like” section at the bottom with recommended products. When a product has a compare price (e.g. a discount), the price is not centered under the product title and star rating – especially on mobile, or even on desktop when resizing the browser window.

How and where can I fix this so that the price (including compare price) is centered below the star rating, just like with regular prices?

www.kyotsu.ch (e.g. https://kyotsu.ch/products/santokumesser > at the bottom)
PW: kyotsu.ch

Thanks a lot in advance!

Best regards,

Tobias

2

Hi @tobiaszellweger

Try with this: find in your theme file assets/component-price.css and at the end of it add following code:

.related-products .price>* {
    display: flex;
    flex-direction: column;
}

.related-products .price.price--on-sale .price__sale {
    flex-direction: column !important;
    justify-content: center;
}

.related-products  .price--on-sale .price-item--regular {
    margin: 0 auto;
}
1 Like
3

It worked, thank you so much! :blush:

1 Like