Custom sold out badge

Store Design
, , ,
1

Hello I would like to have a custom SOLD OUT badge in my collection page. Please see the mockup below. I would like it to have the same exact spacing and placement as the reference. Any help would be appreciated thank you :slight_smile:

Screenshot 2025-09-17 at 10.23.52 PM
Screenshot 2025-09-17 at 10.23.52 PM576×966 47.7 KB

2

Website is constructionlayers.com

3

You can set up color for your sold out badge from your store admin > Sales channels > Online Store > Themes > Customize > Theme settings > Badges

Screenshot 2025-09-18 at 09.22.30
Screenshot 2025-09-18 at 09.22.302118×1774 364 KB

4

Hi @clayinfo

Got it :+1:

The Dawn theme doesn’t include a setting for a custom “SOLD OUT” badge on collection pages by default. We’ll need to add it with a bit of code.

Step 1: Edit product card file

Go to Shopify admin → Online Store → Themes → Dawn → Edit code
Open this file:
snippets/card-product.liquid

Inside the product image container (card__media), add this snippet:

{%- unless product.available -%}
  <span class="custom-soldout-badge">SOLD OUT</span>
{%- endunless -%}

Step 2: Add CSS styling

Open assets/base.css (or assets/component-card.css depending on your version), then add this at the bottom:

.custom-soldout-badge {
  position: absolute;
  top: 12px; /* adjust spacing */
  left: 12px; /* adjust placement */
  background: #000; /* background color */
  color: #fff; /* text color */
  font-size: 13px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 3px;
  text-transform: uppercase;
  z-index: 3;
  letter-spacing: 0.5px;
}

Now, whenever a product is out of stock, the “SOLD OUT” badge will automatically appear on your collection page with the exact spacing and placement you want.

5

Hi @clayinfo ,
You want a rectangular SOLD OUT badge in the top-left corner, same spacing as your reference.

  1. Add this Liquid condition in your product card template (card-product.liquid or product-grid-item.liquid):
{% unless product.available %}
  <span class="soldout-badge">SOLD OUT</span>
{% endunless %}

Place it inside the product card container, before or on top of the product image.
2. Add CSS in your theme stylesheet (base.css or theme.css):

.soldout-badge {
  position: absolute;
  top: 10px;     
  left: 10px;  
  background-color: #5a5a5a; 
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 4px 10px;
  text-transform: uppercase;
  border-radius: 2px;
  z-index: 10;
}

.product-card {
  position: relative; 
}
6

Thank you so much! This worked!

7

hello it worked but it doesnt applies to the first product of my collection page. that first product isnt soldout. i have other items that are soldout but i wasnt applied. Any solutions?

8

hello it worked but it doesnt applies to the first product of my collection page. that first product isnt soldout. i have other items that are soldout but i wasnt applied. Any solutions?