Is there a way to add Unavailable instead of "Sold Out"? - Dawn Theme

[randytheasian]

URL: https://www.meta25.studio/collections/vol-5

[randytheasian]

Instead of Sold Out, I’d like to display it “Unavailable”. Meanwhile, I still want to keep the word “Sold Out” for other products.

[TaskHusky]

Hello Randy,

Yes. There is a real quick and simple way to do this. I’ve created a video showing you how to get there.

https://www.loom.com/share/0980548cfcd94f8a83334f745fc992b8

[randytheasian]

Great! But I want some products to remain as “Sold Out”.

[TaskHusky]

Hello @randytheasian ,

Yes, that is possible. It requires additional modifications. Here is how you’d achieve it:

We’ll need to modify a few key areas where the sold out badge appears.

First, let’s look at the card-product.liquid snippet where sold out badges are displayed. We need to modify two instances:

{%- if card_product.available == false -%}
<span
id=“NoMediaStandardBadge-{{ section_id }}-{{ card_product.id }}”
class=“badge badge–bottom-left color-{{ settings.sold_out_badge_color_scheme }}”

{{- ‘products.product.sold_out’ | t -}}

and

{%- if card_product.available == false -%}
<span
id=“Badge-{{ section_id }}-{{ card_product.id }}”
class=“badge badge–bottom-left color-{{ settings.sold_out_badge_color_scheme }}”

{{- ‘products.product.sold_out’ | t -}}

Here’s how it should modify these sections to handle the new condition:

{%- if card_product.available == false -%}
<span
id=“NoMediaStandardBadge-{{ section_id }}-{{ card_product.id }}”
class=“badge badge–bottom-left color-{{ settings.sold_out_badge_color_scheme }}”

{%- if card_product.tags contains ‘Unavailable’ -%}
{{- ‘products.product.unavailable’ | t -}}
{%- else -%}
{{- ‘products.product.sold_out’ | t -}}
{%- endif -%}

{%- endif -%}

You’ll also need to modify the price snippet since it shows sold out badges as well:

{{ 'products.product.sold_out' | t }}

Should be updated to:

{%- if product.tags contains 'Unavailable' -%} {{ 'products.product.unavailable' | t }} {%- else -%} {{ 'products.product.sold_out' | t }} {%- endif -%}

Make sure your theme’s locale files (typically in locales/en.default.json or similar) have both translations defined:

{
“products”: {
“product”: {
“sold_out”: “Sold Out”,
“unavailable”: “Unavailable”
}
}
}