How to remove black pill icon and adjust product price position?

Store Design
1

Screenshot (9).png
Screenshot (9).png770×423 85.6 KB

Screenshot (7).png
Screenshot (7).png1126×541 198 KB

How do i remove this black pill beside all my products and prices?? Also how can i move the compare price to the right and the sale price to the left? Please help!

1 Like
2

Welcome to shopify community.

Please share your store URL and if your store is password protected then please provide password too.

Thank you.

3

Hi @conlogan ,

It helps to display the sale label, but if you want to remove it, follow the instructions below.

Go to Assets > base.css and paste this at the bottom of the file:

.badge.price__badge-sale {
	display: none !important;
}

Or if you want it to display text, you can change it to the following code:

.badge.price__badge-sale {
    color: #fff !important;
}

Hope it helps!

4

Hey thank you so much! How do I switch the position of the compare price
and the sale price? I see most of stores have it the other way that I have
it

5

Hi @conlogan ,

Please add code:

.price--on-sale .price__sale {
    flex-direction: row-reverse !important;
}
6

Greetings, @conlogan .

Thank you for reaching out and posting this question!

I understand that you’re looking to remove the black sale badges beside the products and move the Compare at prices to the right. Before moving forward with removing the sales badge, I’d like to clarify that the badge is looking like a black pill due to the font color and badge color, which can be changed in the Theme settings. Did you want to try changing the colors, or did you want to move forward with removing the badges?

If you prefer removing the badges completely, then it looks like the community shared some custom coding to help you with this. Did you get a chance to try any of the suggestions offered by the community? If not, then we’ll need to take a closer look at where to get support for your theme. Which theme are you using at the moment?

If you’re using a Shopify-supported theme, then removing the sale badges and/or moving the Compare at prices is something that our Theme Support team can help you with. If your store is subscribed to a plan, then you’re eligible to use the complimentary design time included with the subscription. While we’re not able to provide account-specific support via the Shopify Community at this time, we’d be happy to continue assisting you through live chat, email, or callback. Please visit the Shopify Help Center and log in to your account to create a support request.

If you’re using a third-party/custom theme, then we’d recommend reaching out to the theme designer and checking if they can help you with the customizations. However, if the theme designer doesn’t offer customization support or you’ve run out of the complimentary design time included with your subscription, then you can consider hiring a developer to help you with modifying the theme or seeing if the suggestions from the community can help you with this. That being said, If you need help finding a developer, then please take a look at our directory of certified developers on Shopify Experts.

I’d love to hear more about your business! Do you have a marketing plan prepared for your store?