Craft Theme - Changing 'Sold Out' badge to 'Coming Soon', BUT only for specific Product.Types

Store Design
1

Hello, I’m wondering where and how in my site code can I edit “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.

Thanks!

My site URL: https://www.sleepingwolvesart.com/

1 Like
2

Hello @KimH
it requires a little bit liquid coding on the theme to display coming soon as they have type coming soon.

3

@KimH - this will need code editing, do you know liquid code editing? if no then I recommend to get some one who knows it

4

Cute products!

Not a fan of the generic replies you’ve had here so will try and do a better job at giving you some help. I’ll admit this theme isn’t one I am super familiar with but I do have a copy. Mine could be old so take any comments here as a guide only.

The “sold out” wording can appear on the add to cart button too but since you talked about the badge I’ll assume this is just for the collection view.

You should have a snippet called “card-product.liquid”. That’s the snippet that does the work to show a product in a grid and is where the code for the badge is.

Try and find two lines that look something like this as that’s what you’ll be editing:

{%- if card_product.available == false -%}
{{ 'products.product.sold_out' | t }}

Change it to something like this:

{%- if card_product.available == false -%}
  {%- if card_product.type =="Coming Soon" -%}
    Coming soon!
  {%- else -%}
    {{ 'products.product.sold_out' | t }}
  {%- endif -%}

Now with all edits, please don’t test this in a live theme. Make a copy and do all your code tweaks in that. It helps you breaking the live site in case you make a mistake!

3 Likes
5

@Jason Thanks! And awesome, that’s the snippet I was looking for. Yes, just for collection view is fine for now. I can probably figure out hiding the “sold out add to cart button” on product pages for “coming soon” products later.

I was able to find the 2 lines, add the new statements, and it successfully changed the badges to “Coming Soon” for my products with that product.type!

The edit did however change my normal “sold out” badge color to white instead of whichever color is selected in the customize theme settings. Perhaps I missed something in the syntax that messed with the sold out badge color since there was also a “compare at price” statement after it?

Here’s what that section of code looks like in my theme copy btw to double check.

{%- if card_product.available == false -%}
  {%- if card_product.type =="Coming Soon" -%}
    Coming soon!
  {%- else -%}
    {{ 'products.product.sold_out' | t }}
  {%- endif -%}
  {%- elsif card_product.compare_at_price > card_product.price and card_product.available -%}
    {{ 'products.product.on_sale' | t }}
            {%- endif -%}

Either way, my main question was solved so thank you for your time @Jason !

I just changed to this Craft Theme so finding stuff has been daunting with different names, also since it’s been a few years since I last touched any code. My knowledge is pretty basic, so when it comes to more advanced code syntax I’m a little in the dark, so I appreciate the guide! :slightly_smiling_face:

1 Like
6

@KimH A big thank you for raising this question! This is something I was looking to implement as well. (though I am trying to get it tied to a Metafield instead of a Product Type).

  • Did you figure out the formatting? I had the same result, where the “Coming Soon” tag turned a different color.
  • Did you find a way to address the “Sold out” button on the Product page?
    • It looks like we could apply Jason’s code to the main-product.liquid file (I use Craft Theme, so there might be some differences).
    • I will let you know if I am successful at fixing it

Best,

7

Hi @Cyclops1717 ! Unfortunately, I wasn’t able to figure out the formatting on my own still. My “sold out” and new “coming soon” badges are both still white, but if you are successful in figuring it out please do let me know!

I did figure out how to hide the “Sold out” button on the product page though.
The simple way I did it with no coding for the Craft Theme 2.0 was by using the Theme editor to make a new product template called “coming-soon” and assigning that theme template to coming soon products in the bulk product editor, or individually when you edit a product.

From our dashboard we can go to > Online Store > Themes > Customize > From the Templates dropdown > Products > Create template. After making your new product template, under the “Product Information” section you can hide/delete/add blocks you want or don’t want to show. So I hid the Buy buttons, Qty selector, and Price blocks. Afterwards don’t forget to assign this new template to your coming soon products so they show on your site.

After the products are in-stock and no longer coming soon, I just change their theme template back to the Default product theme template or whatever custom template I had for that product type.

2 Likes