How can I fix misaligned sale icons on my collection page?

We have an issue when using the inbuilt “compare with” functionality for generating sale items, the sale icons that appear in the collection page are misaligned. Anyone have any ideas on how to fix this?

1 Like

@richardm2

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

The URL is www.notnormal.com.co

I have created a product in a collection which we haven’t launched yet which you can see at https://www.notnormal.com.co/collections/mdm-bags

Thanks in advance!

1 Like

@richardm2

sorry i can’t see

Can you try again now? The collection wasn’t enabled on the online store.

@richardm2

great thanks can you try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.css ->paste below code at the bottom of the file.
.price--on-sale .price-item--regular {
    color: #000;
}

.price.price--listing.price--on-sale {
    align-items: center;
}

.price--on-sale .price__sale {
    justify-content: center;
}

That’s much better thanks! Is there a way to show the original price before the sale price?

1 Like

@richardm2

yes its possible can you please show me price

Do you mean this?

1 Like

@richardm2

sorry i can’t see any attachment

It’s definitely there, just checked