How can I delete the sold out badge on a collection page?

Store Design
1

Hi,

I’m building an affiliate site, so on the product page I’m using outlink to direct visitors to another website, but on the collection page, it will show as sold out because the quantity is zero. How can I remove that badge?

Soldout.jpg
Soldout.jpg375×421 14.9 KB

1 Like
2

Hello There,

Please share your store URL and password.
So that I will check and let you know the exact solution here.

3

To remove the “sold out” badge from the collection page in Shopify, you can follow these steps:

  1. Log in to your Shopify admin.
  2. Go to the “Online Store” and click on “Themes.”
  3. Find the theme you are using and click on “Actions” > “Edit code.”
  4. In the left-hand sidebar, click on “Snippets” and locate the file named “product-card-grid.liquid” or similar (the exact name may vary depending on your theme).
  5. Open the “product-card-grid.liquid” file and search for the code that generates the “sold out” badge. It might look something like this:
{% if product.available %}
{% comment %}Code for displaying available products{% endcomment %}
{% else %}
<span class="sold-out-badge">Sold Out</span>
{% endif %}
  1. Remove or comment out the code block that generates the “sold out” badge. You can comment it out by wrapping it with {% comment %} and {% endcomment %} tags like this:
{% comment %}
{% if product.available %}
{% comment %}Code for displaying available products{% endcomment %}
{% else %}
<span class="sold-out-badge">Sold Out</span>
{% endif %}
{% endcomment %}
  1. Save the changes and preview your collection page to ensure the “sold out” badge is no longer displayed.

Please note that modifying the theme code requires some technical knowledge. If you are not familiar with editing code, it’s recommended to reach out to a Shopify expert or developer for assistance. Additionally, make sure to create a backup of your theme files before making any modifications.

1 Like
4

@bugoutgears - can you please share your page link where you have this badge? it will need css

5

Hi @bugoutgears ,

Can you share your store url

6

  1. Locate the code that generates the product listing in the collection loop. This code will vary depending on your theme, but it should be within a {% for product in collection.products %} loop.

  2. Look for the code that displays the “sold out” badge or any related indicators. It might be a conditional statement that checks the product’s inventory quantity.

  3. Add a conditional statement around the code that displays the “sold out” badge to exclude products that are intended as affiliate links. You can use a tag or metafield to identify these products. For example:

{% if product.metafields.custom.is_affiliate_link != true %}
  
{% endif %}

Replace product.metafields.custom.is_affiliate_link with the appropriate metafield or tag used to identify affiliate link products in your store.

7

Hello @bugoutgears

Could you please provide your store URL and, if it is password protected, please share the password so I can review it and provide a solution?

8

Hi All,

As an alternative solution at customize of your theme go to section where those appear and add this at Custom CSS:

.badge {
display: none;
}

It worked for me very well for a collection that was being displayed on frontpage.

Cheers,

Goncalo