How to disable your built-in Shopify theme product badges

Flair customer Sabryna recently wrote in to say:

We would like something that grabs your attention more which is why we opted for your app :). I was wondering if we place the code allowing for the flair badges if it would replace the current blue [on sale product badge] circle?

In this case, Sabryna was looking to replace her theme's built-in product badges with custom Flair product badges. But if you have ever wanted to remove your built-in Shopify theme product badges for any reason, this post is for you.

In today's post, I'd like to share a couple of tips for how you can hide or disable your built-in Shopify theme product badges.

We'll discuss:

Why would you want to remove your built-in Shopify theme product badges?
Disabling your Shopify theme product badges with theme settings
Manually disabling your Shopify theme product badges

Why would you want to remove your built-in Shopify theme product badges?

Perhaps you want to use your own product badges or a custom Shopify product badges app like Flair?

If you are adding your own product badges, you could in theory show both the built-in and the custom product badges together. But showing multiple different types of product badges might act as a distraction. A single well-placed product badge may be more effective than showing multiple competing product badges.

Or maybe you don't like the way the product badges look in your theme? Often a theme's badges will be placed directly on top of your product images. This could obstruct or interfere with your customer's ability to see your products clearly.

Whatever the motivation, you should be able to disable your theme's product badges if you want to. I'll cover two ways to disable your Shopify theme's built-in product badges below.

Disabling your Shopify theme product badges using the theme settings

Many themes include support for disabling any product badges directly in the theme's settings.

Let's take a look at how to disable product badges in the Shopify Minimal theme.

The Minimal theme includes the following built-in product badges:

On Sale items
Sold Out items

To customize your theme's settings, visit Online Store > Themes in your Shopify admin, and then click Customize for the corresponding theme.

Then visit one of your collections to bring up a settings menu on the left like this one:

To disable the built-in badges you just need to uncheck these two boxes:

Show product sale circle
Show product sold out circle

The Minimal theme also has separate settings for each featured collection such as if you feature best sellers on your front page. You may need to customize the product badge settings separately for each featured collection depending on your theme.

The details for customizing the product badges may vary for your particular theme. However, if your theme supports product badge customization it should follow a similar pattern to this one.

Manually disabling your Shopify theme product badges

Not all themes support customizing the built-in product badges. If that is the case for your theme, don't worry there is still hope.

You will just need to look under the covers in your theme to see if you can easily remove or comment out the section that shows the product badges.

This is a bit more of an advanced operation. You should either be comfortable editing your theme's Liquid files, or be a bit adventurous to try this option. It is always a good idea to create a backup copy of your theme if you need to revert your changes.

To demonstrate how to remove product badges manually let's take a look at the Brooklyn Shopify theme.

The Brooklyn theme does not include any customization for its product badges, so we'll be taking matters into our own hands.

The Brooklyn theme includes built-in badges for:

Sold Out items
On Sale items

For this approach, you need to make all changes in the Shopify theme editor. To access the theme editor, visit Online Store > Themes in your Shopify admin, and then visit Actions > Edit code for the corresponding theme.

Shopify themes typically have a single snippet that is used to display products in collection-like views. This same snippet is often used for showing collection items, featured products and search results.

Here is an example collection product loop used in the Brooklyn theme:

{% for product in collection.products %}
  {% include 'product-grid-item' %}

As you can see on line 2, the name of the collection product snippet we are looking for is snippets/product-grid-item.liquid.

Other common names for the collection product snippet include:

snippets/product-card-grid.liquid
snippets/product-loop.liquid

The snippets/product-grid-item.liquid in the Brooklyn theme contains the following code which is responsible for showing the product badges:

{% if sold_out %}
  <div class="grid-product__sold-out">
    <p>{{ 'products.product.sold_out_html' | t }}</p>
  </div>
{% elsif on_sale %}
  <div class="grid-product__on-sale">
    {% capture saved_amount %}{{ product.compare_at_price | minus: product.price | money_without_trailing_zeros }}{% endcapture %}
    <p>{{ 'products.general.save_html' | t: saved_amount: saved_amount }}</p>
  </div>
{% endif %}

So to stop these badges from showing you can simply delete this section and save the file.

However, a safer approach is to just comment out the code so it won't be executed. For example, here is that same code wrapped in a Liquid comment block:

{% comment %}
{% if sold_out %}
  <div class="grid-product__sold-out">
    <p>{{ 'products.product.sold_out_html' | t }}</p>
  </div>
{% elsif on_sale %}
  <div class="grid-product__on-sale">
    {% capture saved_amount %}{{ product.compare_at_price | minus: product.price | money_without_trailing_zeros }}{% endcapture %}
    <p>{{ 'products.general.save_html' | t: saved_amount: saved_amount }}</p>
  </div>
{% endif %}
{% endcomment %}