How do I align the '50% OFF' with the price, so that its perfectly centered?

Topic summary

Topic: Aligning the “50% OFF” sale label with the product price and reducing extra spacing under pricing.

  • Issue: The sale badge appeared slightly above the price instead of centered. The user also wanted to shrink the white space between the price and the stock notification.

  • Context: A screenshot was shared for reference, and the store product URL was provided to diagnose the layout.

  • Solution provided: Edit the theme stylesheet (Online Store > Themes > … > Edit Code > base.css). Add a CSS rule targeting product-info .price.price--large.price--on-sale to use Flexbox and adjust spacing.

  • Code specifics: display: flex; justify-content: center; align-items: center; margin-bottom: -12px;. This centers the badge with the price and decreases the bottom margin.

  • Outcome: The change resolved the alignment and spacing issues. The user confirmed success, and the thread is effectively resolved.

Summarized with AI on December 14. AI used: gpt-5.

@Hi @bdvecom ,

Foladun here from the Customer Account Deluxe App team. :waving_hand:

Could you please share the store URL and password if required, so I can assist further?

Best regards,
Foladun | Customer Account Deluxe