How to alter sale badge shape and remove it in Impulse Theme?

Store Design
, ,

Topic summary

Topic: Customizing the “sale” badge in the Shopify Impulse theme (shape, visibility, and color).

Key requests:

  • Make the sale badge round instead of oval.
  • Remove sale badges entirely while keeping strike‑through sale prices on product listing pages.
  • Change the sale badge background color to #ffb7cd (separate user).

Solutions proposed:

  • Hide the sale badge by adding to the CSS: .grid-product__tag–sale { display: none !important; }
  • Make the badge round by adding CSS specifying size and clipping: width/height 50px, clip-path: circle(), shape-outside: circle(), with centered flex alignment.
  • Store URL was requested and provided for context: carolinegardner.com.

Unresolved issue:

  • A user edited theme.css.liquid to set color variables (e.g., --colorSaleTag and .grid-product__tag–sale background-color using settings/color variables), but the preview shows no change. No confirmed fix or troubleshooting steps yet.

Status:

  • Practical CSS snippets shared for hiding and rounding the badge.
  • Color change problem remains open with no resolution reported.
Summarized with AI on January 6. AI used: gpt-5.
6

Yes sure, add this code to make the circle round:

.grid-product__tag--sale {
    width: 50px;
    height: 50px;
    shape-outside: circle();
    clip-path: circle();
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
1 Like