Remove sale badge from all collection pages

Technical Q&A
, , , ,
1

I have removed the sale badges from product pages but how do I remove them from all collection pages? Below is an example.

GP-F10 Hydraulic Gear Pumps - 1.3-5.1 cc displacement – HTX Fluid Power

2

Got it :slightly_smiling_face: — you’ve removed the sale badges from product pages, but they’re still showing on your collection pages in Shopify. I’ll walk you through how to remove them.

Step 1 — Locate the Code for Sale Badges

Sale badges are usually rendered via Liquid code inside your collection templates or product-grid item snippets.

  1. Go to Online Store → Themes → Actions → Edit code.

  2. Look for these files in your theme:

    • Sections → collection-template.liquid or similar

    • Snippets → product-card.liquid, product-grid-item.liquid, or similar

In Shopify’s Dawn or similar modern themes, sale badges are often inside product-card.liquid or card-product.liquid.

Step 2 — Find the Badge Markup

Inside one of those files, search for terms like:

{{ 'sale' | t }}

or:

{% if product.compare_at_price > product.price %}

or:

<span class="badge sale-badge">Sale</span>

This conditional block is what triggers the badge when a product has a discounted price.

Step 3 — Remove or Comment Out the Badge Code

There are two safe ways:

Option A — Completely Remove the Code

Delete the entire block that outputs the badge, e.g.:

{% if product.compare_at_price > product.price %}
  <span class="badge sale-badge">Sale</span>
{% endif %}

Option B — Just Hide It with CSS (safer & reversible)

  1. Go to Online Store → Themes → Edit code → Assets → base.css (or theme.css / styles.css).

  2. Add this at the bottom:

    .sale-badge,
.badge--sale {
  display: none !important;
}

Step 4 — Save and Test

Step 5 — Optional: Remove Only on Collection Pages

If you still want badges on product pages but not on collection pages, wrap the Liquid code with a page check:

{% unless template.name == 'collection' %}
  {% if product.compare_at_price > product.price %}
    <span class="badge sale-badge">Sale</span>
  {% endif %}
{% endunless %}

This keeps badges on product pages but hides them on collection pages.

Kindly let me know if you need more information

3

None of these options worked.

4

You can do that by adding this code to Custom CSS in Sales channels > Online Store > Themes > Customize > Theme settings.

.card__badge { display: none !important; }

Custom CSS
Custom CSS1920×1738 136 KB

Best regards,

Dan from Ryviu: Reviews & QA