How to hide sold out product tag

[mari123]

Hi there, does anyone know how to hide "Sold out" ("Loppuunmyyty") product tag on the product card from the collection pages? We are using theme Impulse and would like to make this tag invisible.

[kgbfashionista]

Hi,

Head over to product-grid-item.liquid file and find this:

{%- unless product.available -%}
<div class="grid-product__tag grid-product__tag--sold-out">
{{ 'products.product.sold_out' | t }}
</div>
{%- endunless -%}

Delete this bit and you are done.

[mari123]

Hi, thank you! Is there any other way? Just to be able to make this visible again later?

[kgbfashionista]

Sure. You can use this:

{% comment %}

---that code---

{% endcomment %}

When you would want to have that piece of code again, simply delete comment tags.

[mari123]

Thank you, this worked perfectly! Any tips still how to display / hide this tag from a specific collections? For example we would like to show 'sold out' tag on this collection page, but not on this one. Is this somehow possible?

[kgbfashionista]

Sure thing. You can modify code to this:

{% if collection.handle contains 'secret-sale' %}
{%- unless product.available -%}
<div class="grid-product__tag grid-product__tag--sold-out">
{{ 'products.product.sold_out' | t }}
</div>
{%- endunless -%}
{% endif %}

In this case the Sold Out badge will only show in that collection.

[kgbfashionista]

If you want this to be assigned to more than a few collections, then I would suggest using metafields on collections, simply to mark them, just like you use tags on products.

For example, you can assign collection metafield with namespace of sold_out_badge and key of show, and will have true / false values

In this case your code would look like this:

{% if collection.metafields.sold_out_badge.show.value == true %}
{%- unless product.available -%}
<div class="grid-product__tag grid-product__tag--sold-out">
{{ 'products.product.sold_out' | t }}
</div>
{%- endunless -%}
{% endif %}

Haven`t tested it, so let me know if that works.

[Transcy · Accepted solution]

Hello @mari123 ,

You can try to follow these steps:

Go to Online Store -> Themes -> Actions -> Edit code

Go to collection-template.liquid

Look for a line that contains something like {% if product.tags contains 'Sold Out' %} or similar.

Modify the code like this:

{% if product.tags contains 'Sold Out' %}
  <span class="hide-sold-out-tag">Sold Out</span>
{% endif %}

Save and preview

Transcy

[webdevgaurav]

Hi there, 

To hide the "Sold out" product tag on the product card from the collection pages in the Impulse theme, you can follow these steps:

1. Access your Shopify admin panel and go to "Online Store" -> "Themes."

2. Locate the Impulse theme and click on the "Actions" button, then select "Edit Code."

3. In the theme editor, navigate to the "Snippets" folder and click on "product-card-grid-item.liquid" or "product-card-list-item.liquid," depending on the view you're using for your collection pages.

4. Look for the code that generates the "Sold out" tag. It may vary depending on how your theme is set up, but you can typically find it within a `{% if product.available %}` or `{% unless product.available %}` statement.

5. Add the following CSS code above or within that `{% if %}` or `{% unless %}` statement to hide the "Sold out" tag:

```css
<style>
.product-card__sold-out-tag {
display: none !important;
}
</style>
```

This CSS code targets the class responsible for the "Sold out" tag and sets its display to none, effectively hiding it.

6. Save the changes and preview your collection pages to see if the "Sold out" tag is now invisible on the product cards.

Please note that the exact file and code locations may vary slightly depending on the customization options and version of the Impulse theme you are using. If you encounter any difficulties or have additional customization requirements, it's recommended to refer to the theme's documentation or reach out to the theme developer or Shopify support for more specific guidance.

I hope this will help. 

[Shopquestion234]

I dont have collection-template.liquid. Where can i add the code