I am trying to add a sale badge to specific variants within the parent product page, trying to do it without hiring a dev for this. It just needs to be a simple “SALE” badge that would be on the top right corner of the variant (obviously not covering the name just something quick I made as an example).
You may want to check out the app Variant Badges — it offers functionality to add ‘Hot’, ‘New’, or ‘Popular’ badges to product variants, which seems aligned with what you’re looking for. The ‘Sale’ badge is not available yet but should be an upcoming feature.
Hi @BC_WEB ,
We may apply this functionality fully custom without any third party app .
The approach would be as follows:
Create custom metafields for badge variants
Add dynamic rendering of badges on the variant selector
Display labels like “Hot”, “New”, “Popular” or “Sale” on variant options directly
Step 1 : Create variant metafields
Namespace : custom
Key : badges
Type: single line text
Refer below screenshot :
Step 2 : Go to the product and assign the variant metafields badges .
Please refer the below screenshot .
Step 3 : Go to the Edit code and find the file where variant title code are present
Search the file product-variant-options.liquid(snippets)
Then search the below code
<label for="{{ input_id }}">
{{ value -}}
{{ label_unavailable }}
</label>
And replace above code with the below updated code
Code :
<label for="{{ input_id }}" class="variant-label-custom">
{{ value }}
{% assign current_variant = value.variant %}
{% if current_variant and current_variant.metafields.custom.badges != blank %}
<span class="variant-custom-badge badge-{{ current_variant.metafields.custom.badges | handleize }}">
{{ current_variant.metafields.custom.badges }}
</span>
{% endif %}
{{ label_unavailable }}
</label>
Step 4 : open base.css file and paste the below code at the bottom of the file
.variant-label-custom {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
overflow: visible;
}
.variant-custom-badge {
position: absolute;
top: -8px;
right: -10px;
font-size: 9px;
font-weight: 700;
line-height: 1;
padding: 4px 6px;
border-radius: 20px;
color: #fff;
text-transform: uppercase;
letter-spacing: 0.5px;
white-space: nowrap;
z-index: 5;
}
/* Dynamic badge colors */
.badge-sale {
background: #e11d48;
}
.badge-summer {
background: #f97316;
}
.badge-new {
background: #16a34a;
}
.badge-popular {
background: #2563eb;
}
Screenshot:
Output :
Hey @karan.dhingra,
This one’s tricky because most themes only show sale badges at the product level, not per variant, Shopify doesn’t natively expose a “this variant is on sale” boolean to liquid out of the box.
The way I’ve seen it done without a full dev:
In your variant picker (usually in main-product.liquid or product-variant-picker.liquid in 2.0 themes), loop through product.variants and compare variant.compare_at_price > variant.price. If true, append a small badge element next to the variant swatch.
Rough idea:
{% if variant.compare_at_price > variant.price %}SALE{% endif %}
Then style .sale-badge with absolute positioning to the top right of the variant container.
If you share which theme you’re on someone here can probably point at the exact file/line to edit.
Dawn, Sense, Refresh and Origin all handle the variant picker slightly differently.
Hi @BC_WEB 
For your case of displaying a small “SALE” badge on specific variants directly on the product page — without needing to hire a developer or build a custom solution — the Easify Product Options app can fully handle this setup and is very beginner-friendly to use 
I’ve created a similar demo to help you better visualize how it works:
- This is the result:
- This is the app setting:
First, you can create a Color Swatches or Image Swatches option to display your variants in a more visual and clean layout on the product page.
After that, inside each option value, you can use the Add badge feature to add labels like SALE, NEW, BEST SELLER, ECO, and more directly onto specific variant swatches.
The app also allows you to fully customize the badge style, text, and icons so it matches your store branding and design better
Once everything is set up, the selected variants will automatically show a small SALE badge on the corner of the swatch/image, similar to the example you shared, making discounted variants much easier for customers to notice while still keeping the product page clean and professional.
The setup process is quite simple and doesn’t require coding knowledge, so it’s a much easier alternative compared to building a custom-coded solution. 