Sale Badge color customization - Motion theme

Store Design
, , , , , , , , ,

Topic summary

A user working with the Motion theme needs to change the sale badge color across their entire store to a specific blue shade (#102294). They provided a reference image showing the desired color and their preview site link.

Solution provided:

  • Navigate to Online Store → Theme → Edit Code
  • Locate one of these CSS files: base.css, theme.css, style.css, main.css, or custom.css
  • Add the following CSS code at the end of the file:
.grid-product__tag.grid-product__tag--sale {
    background: #102294 !important;
}

This CSS targets the sale badge element and applies the custom background color using the !important flag to override existing styles. The issue appears resolved with this straightforward CSS customization.

Summarized with AI on November 1. AI used: claude-sonnet-4-5-20250929.
2

Hi @Sivadarshan ,

Go to Online Store, then Theme, and select Edit Code.
Search for base.css/theme.css/style.css/main.css/custom.css file Add the provided code at the end of the file.

.grid-product__tag.grid-product__tag--sale {
    background: #102294 !important;
}
1 Like