Changing 'Sold Out' Badge To 'Coming Soon', BUT Only For Specific Product.Types

[stinem123]

Hi, I am making a new upgrade to my store, and just bought Stiletto Theme

I'm wondering if someone can help with some liquid coding, that edits "Sold Out" badges to say "Coming Soon", but ONLY for items with a custom product.type labeled "Coming Soon", or in a "Coming Soon" collection. Whichever route may be easiest. 

So if an item has the product.type "Coming Soon" and has 0 inventory, it will display "Coming Soon" on the badge. If the product doesn't have the "Coming Soon" product.type and 0 inventory, it will display the "Sold Out" badge as normal. 

Thank you very much! I really hope someone can help!

My site URL: https://q3xb6c8e96dydt9j-57068945600.shopifypreview.com/collections/alle-smykker/products/aaa-orerin... 

(Preview only available in two days)

[NomtechSolution]

1. In the code editor, find and open the product-card-grid.liquid file under the "Sections" directory.

{% if product.available == false %}
  {% if product.type == 'Coming Soon' or product.collections contains 'coming-soon' %}
    <span class="badge badge--coming-soon">Coming Soon</span>
  {% else %}
    <span class="badge badge--sold-out">{{ 'products.product.sold_out' | t }}</span>
  {% endif %}
{% endif %}
​

[stinem123]

Hi @NomtechSolution , thanks for your reply! I dont have a file called "product-card-grid.liquid"

Can you see which one of these I should use? 

[Ujjaval]

@stinem123 put that code into main-collection-product-grid.liquid file.

[stinem123]

Hi @Ujjaval thank you, I just cannot get it to work. I put the code at the bottom of into main-collection-product-grid.liquid file. But nothing changed

This is the collection with all the products there should have a "Coming Soon" bagde. Both the collection is named `Coming Soon´ and they all have the Product.Types marked ´Coming Soon´

https://go466w5ufuepb8mb-57068945600.shopifypreview.com/collections/coming-soon

Any suggestions what I do wrong, or can I do something else? I really hope someone can help, thank you so much! @NomtechSolution 

[Ujjaval]

@stinem123 add below code into theme.liquid file before closing </body> tag

<script>
$('.product-badge.product-badge--sold-out').text("coming soon");
</script>

[stinem123]

@Ujjaval I just tried this, but i changed all labels, also the "sold out" products

It should only change the label of the "coming soon" products... Any other suggestions?  

[Ujjaval]

@stinem123 can you send me the link of the coming soon label cause i can't able to find 

[stinem123]

@Ujjaval Do you mean the collection of the "coming soon" products?

This one: https://go466w5ufuepb8mb-57068945600.shopifypreview.com/collections/coming-soon

I removed last code you sent, because it changed all badges, also changed the badge of the "sold out" products. But I can put it back again if you need?

[Ujjaval]

@stinem123  Try below code in place of the previous code 

{% for collection in product.collections %}
    
  {% if collection.handle == "coming-soon" %}

  	<script>
		$('.product-badge.product-badge--sold-out').text("coming soon");
	</script>

{% endif %}

{% endfor %}

[stinem123]

@Ujjaval the code is on now, but nothing changed..

Here you can see: https://go466w5ufuepb8mb-57068945600.shopifypreview.com/collections/coming-soon

[leerNinja]

I think this doesn't work the way it is described because the `main-collection-product-grid.liquid` code references the `card-product.liquid` code under the snippets folder.

If you go into `card-product.liquid` you will see multiple places that check `card_product.available == false` and if the product is not available it will show the local text for sold_out. I was able to solve this by changing all of these sections to check for the type or the collection.

Wherever you see this part

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

Replace it with

{% comment %} Change the text of 'Sold Out' to 'Coming Soon' {% endcomment %}
{% if card_product.type contains 'Coming Soon' or card_product.collections contains 'coming-soon' %}
  Coming Soon!
{% else %}
  {{- 'products.product.sold_out' | t -}}
{% endif %}

Note that we are checking `card_product` instead of `product` here since that is the variable name in this code.

By doing all the sections here, you not only solve the badge that is on the top-left of the product thumbnail but also the button text too.

[EcomDev1]

Hell Stinem123,

I have checked your post. For this work you have some understanding of theme files.  You need to add this code on products page template(main-product.liquid).

Copy this code and replace file name by files which you have uploaded on files folder

{% if current_variant.inventory_quantity == 0 and current_variant.inventory_management == 'shopify' and product.type == 'Coming Soon' %}
<img src="{{ 'ComingSoon.png' |  file_img_url: 'master'  }}" alt="Coming Soon badge">
{% endif %}

{% if current_variant.inventory_quantity == 0 and current_variant.inventory_management == 'shopify' and product.type != 'Coming Soon' %}
<img src="{{ 'soldout.png' |  file_img_url: 'master'  }}" alt="Soldout badge">
{% endif %}

1st) First you need to uplode badges in files shopify back-end

2nd) Then you need to copy file name and replace in src tag 

3rd) Need to update that whole code on your products page template. You may use on any place. You needs some designing skill to manage design as you want.