Visual Impact
• Displays an exact “-25 %” or “Save 40 %” cue that catches the eye faster than a generic “Sale” label
• Creates striking color plus number contrast that pops against product imagery and Horizon’s clean layout
• Signals deeper discounts at a glance, enticing bargain hunters without extra copy
• Maintains a polished, data driven aesthetic that feels more credible than subjective wording
Shopping Experience
• Reduces mental math shoppers instantly understand the value of the deal
• Helps comparison across items in collection grids where different products carry different markdowns
• Supports accessibility when percentage text sits within a high contrast badge that screen readers announce
• Encourages deeper browsing as customers scan for the biggest savings in a single scroll
Conversion Clarity
• Raises add to cart rates by quantifying savings and nudging quicker decisions
• Lowers bounce rates; a concrete discount feels more trustworthy than vague sale messaging
• Amplifies urgency larger percentages reinforce “buy now before it’s gone” psychology
• Boosts average order value when paired with tiered promo logic (e.g., “buy two, save 40 %”)
Marketing & Merchandising
• Enables granular A/B testing of threshold messaging see if 20 % or 30 % prompts stronger lift
• Aligns with email, SMS, and ad creatives that tout identical numeric discounts for seamless campaigns
• Highlights clearance or flash sale items in crowded collections without extra banners
• Informs future pricing strategy; track which percentage points drive the greatest conversion spikes
CODE : replace product-card-badges.liquid
{% comment %}
<!-- Designed by OnHOW YouTube Channel - Anas El Medlaoui -->
{% endcomment %}
<div
class="product-badges product-badges--{{ settings.badge_position }}"
style="
--badge-border-radius: {{ settings.badge_corner_radius }}px;
--badge-font-family: var(--font-{{ settings.badge_font_family }}--family);
--badge-font-weight: var(--font-{{ settings.badge_font_family }}--weight);
--badge-text-transform: {{ settings.badge_text_transform }};
"
>
{%- if product.available == false -%}
<div class="product-badges__badge product-badges__badge--rectangle color-{{ settings.badge_sold_out_color_scheme }}">
{{ 'content.product_badge_sold_out' | t }}
</div>
{%- elsif product.compare_at_price > product.price and product.available -%}
<div class="product-badges__badge product-badges__badge--rectangle onhow-percentage-badge">
-{{ product.compare_at_price | minus: product.price | times: 100 | divided_by: product.compare_at_price }}% OFF
</div>
{%- endif -%}
</div>
{% stylesheet %}
.product-badges {
position: absolute;
z-index: var(--layer-flat);
--badge-inset: max(var(--padding-xs), calc((var(--border-radius) + var(--padding-xs)) * (1 - cos(45deg))));
}
.product-badges--bottom-left {
bottom: calc(var(--badge-inset) + var(--padding-block-start));
left: calc(var(--badge-inset) + var(--padding-inline-start));
}
.product-badges--top-left {
top: calc(var(--badge-inset) + var(--padding-block-start));
left: calc(var(--badge-inset) + var(--padding-inline-start));
}
.product-badges--top-right {
top: calc(var(--badge-inset) + var(--padding-block-start));
right: calc(var(--badge-inset) + var(--padding-inline-start));
}
.product-badges__badge {
--badge-font-size: var(--font-size--xs);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: var(--color-foreground);
background: var(--color-background);
font-size: var(--badge-font-size);
font-family: var(--badge-font-family);
font-weight: var(--badge-font-weight);
text-transform: var(--badge-text-transform);
border-radius: var(--badge-border-radius);
}
.product-badges__badge--rectangle {
padding-block: var(--badge-rectangle-padding-block);
padding-inline: var(--badge-rectangle-padding-inline);
}
{% endstylesheet %}CODE : CSS
/* Change these color variables to customize your badge: */
:root {
--onhow-badge-gradient: linear-gradient(120deg,
#a4fcdc 0%, /* light color (start) */
#5a84ad 35%, /* middle color */
#536373 100%); /* dark color */
--onhow-badge-text-color: white; /* Text color */
}
/* Badge Styling */
.onhow-percentage-badge {
border-radius: 1.3rem !important;
background: var(--onhow-badge-gradient) !important;
font-weight: 700 !important;
border: none !important;
color: var(--onhow-badge-text-color) !important;
position: relative;
overflow: hidden;
transition: all 0.3s ease;
box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
text-transform: uppercase;
letter-spacing: 0.05em;
font-family: var(--font-body-family) !important;
margin: 0;
display: inline-block;
line-height: 1.1;
padding: 0.42rem 1.1rem !important;
font-size: 0.85rem !important;
}
.product-badges__badge.onhow-percentage-badge,
.product-badges .onhow-percentage-badge {
background: var(--onhow-badge-gradient) !important;
color: var(--onhow-badge-text-color) !important;
}
.product-badges__badge--rectangle.onhow-percentage-badge {
transform: scale(1.11);
margin-left: 8px;
margin-right: 8px;
background: var(--onhow-badge-gradient) !important;
color: var(--onhow-badge-text-color) !important;
}
/* this is for product page badge (incase they added it) */
.product-page .onhow-percentage-badge {
transform: scale(1.27);
font-size: 0.81rem !important;
padding: 0.38rem 1.1rem !important;
background: var(--onhow-badge-gradient) !important;
color: var(--onhow-badge-text-color) !important;
}
.onhow-percentage-badge:hover {
transform: scale(1.14);
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}
.product-page .onhow-percentage-badge:hover {
transform: scale(1.31);
}
.onhow-percentage-badge::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
rgba(255,255,255,0) 0%,
rgba(255,255,255,0.3) 50%,
rgba(255,255,255,0) 100%
);
transform: skewX(-20deg);
transition: all 0.75s ease;
}
.onhow-percentage-badge:hover::after {
left: 100%;
}
@media screen and (max-width: 749px) {
.onhow-percentage-badge {
padding: 0.38rem 0.94rem !important;
font-size: 0.75rem !important;
transform: scale(0.94);
}
.product-page .onhow-percentage-badge {
padding: 0.34rem 0.94rem !important;
font-size: 0.75rem !important;
transform: scale(1.01);
}
}