Add Sale Badge behind product page price on Impulse Theme

Store Design
, ,

Topic summary

A user wants to add a green “Vente” (Sale) badge next to the product price on their Shopify store using the Impulse theme.

Solutions Provided:

  • CSS-only approach: Multiple contributors shared CSS snippets that add the badge using the :after pseudo-element on .product__price.on-sale or by styling .product__price-savings. These can be added to Theme Settings > Custom CSS or product page section Custom CSS.

  • Liquid template modification: One suggestion involves editing main-product.liquid or product-template.liquid files to conditionally display the badge when compare_at_price > price, combined with CSS for styling.

Current Issue:

The original poster reports that while the CSS solution displays correctly in the theme customizer, they cannot save the theme after adding it to Custom CSS. The discussion remains open with no resolution to this saving issue yet provided.

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

Heyya!

I’m busy doing some CRO and I’d like to add a green Sale badge saying ‘‘Vente’’ behind the price on my product page as displayed in the example below. Though I cant seem te figure out how to make that work. Can anyone help me out with the coding, please?

Scherm­afbeelding 2025-03-22 om 15.46.24.png
Scherm­afbeelding 2025-03-22 om 15.46.24.png497×176 9.82 KB

1 Like
2

Impulse demo store has this:

Screenshot 2025-03-23 at 1.47.51 AM.png

But if your version does not have it, or it’s not how you like it, you can have it with simple CSS:

Screenshot 2025-03-23 at 1.52.05 AM.png

.product-section .product__price.on-sale:after {
  content: "Vente";
  background: #e7f8e6;
  color: #8dcd8a;
  display: inline-block;
  padding: 0.2em 0.5em;
  border-radius: 1em;
}
3

Hello @Vanadey !

Can you please tell me what you have know instead of “Vente” in your store? You can change the text in the default theme content.

I played a little bit with Impulse theme and added some custom css.

.product__price-savings {
  background-color: greenyellow;
  padding: 10px 15px;
  border-radius: 30px;
}

Group 74 (2).png
Group 74 (2).png1918×915 261 KB

4

Thank you, in the theme customizer it looks exactly like what I had in mind! But when added to the Custom CSS, but it wont let me save the theme after I added it.

My store is af16fc-1a.myshopify.com

Do you have an idea how to fix that?

1 Like
5

Hello @Vanadey

Go to your Shopify Admin
Navigate to: Online Store > Themes > Actions > Edit Code
Find the main-product.liquid or product-template.liquid file
Locate the price section, usually found inside product-price.liquid or directly in product-template.liquid
Modify the code to insert the sale badge
Insert this before or inside the price container:

{% if product.compare_at_price > product.price %}
Vente
{% endif %}

Go to theme.css or base.css and add:

.sale-badge {
background-color: green;
color: white;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
padding: 4px 8px;
border-radius: 4px;
position: absolute;
top: -10px;
left: 0;
}
6

That code could go into Theme Settings => Custom CSS

If using product page section Custom css, you can change selector:

.product__price.on-sale:after {
  content: "Vente";
  background: #e7f8e6;
  color: #8dcd8a;
  display: inline-block;
  padding: 0.2em 0.5em;
  border-radius: 1em;
}
1 Like