How can I add a 'Sold Out' label and overlay to items on my website?

[ModStageApparel]

I want to add a Sold Out label & overlay to sold out items on the website. I’ve tried a few different codes and all have issues covering the entire product photo (see below).

The website is - www.thrivesociete.com

Web -

Mobile -

Any help would be appreciated. Thanks!

[suyash1]

@ModStageApparel - do you have any code added for any product? if yes then can you please share the page link?

[BSS-Commerce]

Hi @ModStageApparel

Can you share with us the link to the demo of your sold-out product?

[ModStageApparel]

Hi @suyash1 ,

Here is a link to a product page with Sold Out products - https://thrivesociete.com/collections/shabby-x-thrive

Thanks!

[ModStageApparel]

Hi @BSS-Commerce ,

Here is a link to a product page with Sold Out products - https://thrivesociete.com/collections/shabby-x-thrive

Thanks!

[BSS-Commerce]

Hi @ModStageApparel

You should try following these steps:

B1 : Online store > Theme > Edit code

Step 2: Search for “collection.liquid” or “main_collection.liquid”

Find the render to display title:

For example :

{% for product in collection.products %}
  <div class="product">
    <h2>{{ product.title }}</h2>
    <p>{{ product.description }}</p>
    <p>Price: {{ product.price }}</p>
    <a href="{{ product.url }}">View product</a>
  </div>
{% endfor %}

Then replace it with the following code:

{% for product in collection.products %}
  {% if product.available %}
    <div class="product">
      <h2>{{ product.title }}</h2>
      <p>{{ product.description }}</p>
      <p>Price: {{ product.price }}</p>
      <a href="{{ product.url }}">View product</a>
    </div>
  {% else %}
    <div class="product sold-out">
      <h2>{{ product.title }}</h2>
      <p>This product is sold out</p>
    </div>
  {% endif %}
{% endfor %}

Step 3: Save and view the results, hope you get the results you want