That is why you see the green Sale badge at the top-right and the unwanted white Sale badge at the bottom-left.
Fix
1. Keep your green top-right Sale badge
Keep this section unchanged:
{% if card_product.available == false %}
Sold Out
{% elsif card_product.compare_at_price > card_product.price %}
Sale
{% endif %}
Your CSS already correctly styles this badge in green.
2. Replace the Best Seller block
Find this entire section:
{%- if card_product.tags contains 'best-seller' -%}
Best Seller
{%- endif -%}
{%- if card_product.available == false -%}
{{- 'products.product.sold_out' | t -}}
{%- elsif card_product.compare_at_price > card_product.price and card_product.available -%}
{{- 'products.product.on_sale' | t -}}
{%- endif -%}
Replace it with:
{%- if card_product.tags contains 'best-seller' -%}
Best Seller
{%- endif -%}
This block will now show only Best Seller, not another Sale badge.
3. Delete Shopify’s final duplicate badge block
Near the bottom of card-product.liquid, delete this entire section:
{%- if card_product.available == false -%}
{{- 'products.product.sold_out' | t -}}
{%- elsif card_product.compare_at_price > card_product.price and card_product.available -%}
{{- 'products.product.on_sale' | t -}}
{%- endif -%}
Final result
After saving:
Green Sale badge: top-right
Pink Best Seller badge: bottom-left
White duplicate Sale badge: removed
Sold Out badge: top-right using your custom badge design
The white colour was coming from Shopify’s theme colour scheme class:
color-{{ settings.sale_badge_color_scheme }}
It was not caused by your custom green badge CSS.
Pasted text(1).txt
Document
this is the whole code give me the correcte code via text or file
I corrected the complete product-card code and removed the duplicate white Sale badge. The corrected setup keeps:
Sale / Sold Out badge at the top-right
Best Seller badge at the bottom-left
Only one Sale badge per product
Clean badge IDs and accessibility references
The duplicate badge was caused by multiple Sale badge blocks inside the uploaded card-product.liquid.
Download files
Download the corrected card-product.liquid
boho-product-badges.css
Download both files as a ZIP
Installation
Go to Online Store → Themes → Edit code.
Open snippets/card-product.liquid.
Replace the complete code with the corrected Liquid file.
Open assets/base.css.
Paste the contents of boho-product-badges.css at the bottom.
Save and refresh the storefront.
Products tagged best-seller will show the pink badge. Products with a higher compare-at price will show the green Sale badge.
Library
/
Boho
/
boho-product-badges.css
/* BOHO product-card badges
Add this at the bottom of assets/base.css.
Sale/Sold Out: top-right.
Best Seller: bottom-left.
*/
.card__media {
position: relative;
overflow: hidden;
}
.product-badges {
position: absolute;
top: 12px;
right: 12px;
z-index: 20;
}
.product-badges .badge {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 6px 14px;
border: 0;
border-radius: 999px;
color: #ffffff;
font-size: 12px;
font-weight: 600;
line-height: 1;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.badge--sale {
background: #324e3e;
}
.badge--sold-out {
background: #1f1f1f;
}
.boho-card-badges {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.boho-best-seller-badge {
background: #c72f52;
color: #ffffff;
border: 0;
border-radius: 0;
padding: 7px 18px 7px 10px;
font-size: 11px;
font-weight: 600;
line-height: 1;
letter-spacing: 0.08em;
text-transform: uppercase;
clip-path: polygon(0 0, 100% 0, 86% 100%, 0 100%);
}
Library
/
Boho
/
boho-product-badges.css
/* BOHO product-card badges
Add this at the bottom of assets/base.css.
Sale/Sold Out: top-right.
Best Seller: bottom-left.
*/
.card__media {
position: relative;
overflow: hidden;
}
.product-badges {
position: absolute;
top: 12px;
right: 12px;
z-index: 20;
}
.product-badges .badge {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 6px 14px;
border: 0;
border-radius: 999px;
color: #ffffff;
font-size: 12px;
font-weight: 600;
line-height: 1;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.badge--sale {
background: #324e3e;
}
.badge--sold-out {
background: #1f1f1f;
}
.boho-card-badges {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.boho-best-seller-badge {
background: #c72f52;
color: #ffffff;
border: 0;
border-radius: 0;
padding: 7px 18px 7px 10px;
font-size: 11px;
font-weight: 600;
line-height: 1;
letter-spacing: 0.08em;
text-transform: uppercase;
clip-path: polygon(0 0, 100% 0, 86% 100%, 0 100%);
}