How can I center align the sale badge on product pages?

Store Design
,
1

The sale badge next to my price is off alignment on mobile and desktop.

moosh44_0-1701408244679.png
moosh44_0-1701408244679.png1739×304 64.5 KB

How can I make it center with the product price so the badge sits in the middle, like in the second pic.

This is my URL: https://movinfitness.com/products/the-resistance-pro-gym

Thanks in advance :slightly_smiling_face:

2

Hi @moosh44

This is Henry from PageFly - Landing Page Builder App

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file → Save

.price.price–large.price–on-sale.price–show-badge {

display: flex !important;

flex-direction: column;

align-items: center;

}

Hope that my solution works for you.

Best regards,

Henry | PageFly

3

That seemed to center it under the price field, I’m looking to put it in line with the price field but centered e.g. I am trying to make it like the second pic here:

moosh44_0-1701408190149.png
moosh44_0-1701408190149.png1739×135 62.4 KB

4

hy, @moosh44

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file → Save

span.badge.price__badge-sale.color-accent-1 {
    margin-top: 2px !important;
}