Product badges are a simple way to highlight promotions and help customers quickly identify discounted products.
In Maison, the Sale badge is generated automatically when a product has a valid discount:
Compare at price > Price
For example:
| Price | Compare at price | Result |
|---|---|---|
| $80 | $100 | Sale badge displayed |
| $100 | $100 | No Sale badge |
| $100 | Empty | No Sale badge |
Maison can display the discount badge as:
-
Label — displays
Sale -
Amount — displays the amount saved, such as
-$20 -
Percentage — displays the discount percentage, such as
-20%
STEPS:
Add a Sale badge to a product
To put a product on sale:
- From your SHOPLINE admin, go to Products.
- Open the product you want to discount.
- Locate the product's Price settings.
- Enter the discounted selling price in Price.
- Enter the original price in Compare at price.
For example:
Price: $80
Compare at price: $100
- Click Update or Save.
SHOPLINE now treats the product as discounted because Compare at price is higher than Price.
If the Show discount badge setting is enabled in Maison, the Sale badge is displayed automatically.
Set sale pricing for products with variants
If your product has multiple variants, make sure the required variants have the correct pricing.
For example:
| Variant | Price | Compare at price |
|---|---|---|
| Small | $80 | $100 |
| Medium | $80 | $100 |
| Large | $100 | $100 |
In this example:
- Small is on sale.
- Medium is on sale.
- Large is not discounted.
On the Product page, Maison updates the discount badge according to the currently selected variant.
This means the badge can appear or disappear when the customer changes variants.
Enable the Sale badge on the Product page
Maison uses the Product badges block to display Sale and Sold out badges on Product pages.
To check the Product page setting:
- Open the Maison theme editor.
- Open the required Product template.
- Open the main Product section.
- Locate the Product media area.
- Open the Product badges block.
- Enable Show discount badge.
- Choose the required Discount badge style.
- Click Save.
Available Discount badge styles are:
| Style | Example |
|---|---|
| Label | Sale |
| Amount | -$20 |
| Percentage | -20% |
The Maison default Product template uses Percentage.
Enable the Sale badge on Product cards
Product cards have their own Product badges block.
This controls Sale badges in areas such as:
- Collection product lists
- Search results
- Featured collections
- Product sliders
- Other sections that use Maison Product cards
To enable it:
- Open the relevant section in the Maison theme editor.
- Expand the Product card structure.
- Open the Product card's Product badges block.
- Enable Show discount badge.
- Select the required Discount badge style.
- Click Save.
Choose the Discount badge style
Maison provides three ways to display a discount.
Label
Select Label to display:
Sale
This is useful when you want a simple promotional badge without showing the exact discount.
Amount
Select Amount to display the amount the customer saves.
For example:
-$20
Maison calculates the value from:
Compare at price - Price
Percentage
Select Percentage to display the discount percentage.
For example:
-20%
Maison calculates the percentage automatically from Price and Compare at price.
The default Maison setup uses Percentage.
Change the Sale label text
If you use the Label style for the discount badge, Maison displays the default text:
Sale
If you want to replace Sale with another word or phrase, you can change the theme's default text.
To change the Sale label:
- Open the Maison theme editor.
- Click Edit default text.
- Open Products.
- Open Products General.
- Find Sale.
- Replace the default text with the label you want to display.
- Save your changes.
For example, you can change:
Sale
to:
Special offer
or:
Promotion
After saving, Maison will use the new text for the Sale label wherever this default text is used.
Display the original Compare at price
The Sale badge and the crossed-out Compare at price are controlled separately.
If you also want customers to see the original price:
- Open the relevant Price block.
- Enable Show compare price.
- Optional: Configure Show sale price first.
- Click Save.
For example, the storefront can show:
$80 $100
together with:
-20%
The Show compare price setting controls the price display only. The Sale badge itself is controlled by the Product badges block.
Preview the Sale badge
After saving the product and theme settings:
- Open or preview the product on your storefront.
- Confirm that the discounted Price is displayed.
- Confirm that the Compare at price is higher than the Price.
- Check that the Sale badge appears in the expected style.
Also check the product in:
- Collection pages
- Search results
- Featured collection sections
if you want the same badge to appear on Product cards.
Remove a Sale badge
When the promotion ends, you can remove the Sale badge by removing the discount pricing.
- From your SHOPLINE admin, go to Products.
- Open the product.
- Locate the Price settings.
- Clear the Compare at price field.
- Set Price back to the normal selling price.
- Click Update or Save.
For example, change:
Price: $80
Compare at price: $100
to:
Price: $100
Compare at price: Empty
Maison no longer detects an active discount, so the Sale badge disappears automatically.
Hide Sale badges without changing product prices
If you want to keep the discounted pricing but hide the badge:
- Open the Maison theme editor.
- Open the relevant Product or Product card settings.
- Find the Product badges block.
- Disable Show discount badge.
- Click Save.
The product can remain discounted while the badge is hidden.
This is useful when you want to show sale pricing without a visual discount badge.
How the Maison Sale badge works
Maison uses the following logic:
Is Show discount badge enabled?
│
├── No
│ └── Do not display Sale badge
│
└── Yes
│
├── Compare at price > Price
│ └── Display discount badge
│ ├── Label → Sale
│ ├── Amount → -$XX
│ └── Percentage → -XX%
│
└── Compare at price <= Price
└── Do not display Sale badge
Sale badge vs. Sold out badge
The Product badges block also contains:
- Show sold-out badge
- Show discount badge
These settings work independently.
A product can therefore display:
- A Sale badge
- A Sold out badge
- Both badges where applicable
- No badges
Troubleshooting
If the Sale badge does not display correctly, check the following:
- Make sure Compare at price is greater than Price.
- Make sure the product or relevant variant has been saved after changing its price.
- Make sure Show discount badge is enabled in the Product badges block.
- For Product pages, check the Product template's Product badges settings.
- For Collection, Search, or Featured collection cards, check the Product card's Product badges settings.
- If the badge displays
Saleinstead of a percentage, check Discount badge style. - If the badge displays a money amount instead of a percentage, change the style to Percentage.
- For multi-variant products, check the pricing of the currently selected variant.
- If the original price is not displayed, enable Show compare price in the Price block.
- Remember that Show compare price does not control whether the Sale badge itself is displayed.
- If the badge remains after a sale has ended, clear the Compare at price and save the product.
- Test the result on both the Product page and Product cards.
Need Further Assistance
If you encounter any issues or need additional help with your Maison theme, please reach out to our support team via our Ticket System for assistance within 8 hours.
Share:
How to Set Up Shoppable Media Section in Maison
How to Set Up Gift Wrapping in Maison