How can I add a 'Coming Soon' banner on my new collection using Dawn theme?

[joshuasamuels]

Hi. I am about to go live with my new collection, which will be my first on Shopify. I use the Dawn theme, and have realised I can’t mark items as “Coming Soon” on my website, which was a feature I really liked on Big Cartel.

I would like a banner like the “Sold Out” banner shown from my site in the picture below.

Except of course, instead of saying “Sold Out” I would like the banner to say “Coming Soon”. This would be accompanied by a setting where ofcourse customers can’t checkout/purchase any item marks with “coming soon”. Essentially I would like this feature so while I am marketing a collection before release, potential customers can go on my website, and see all items, and all the details of each item, so they can make a proper decision about what they would want to buy. Just to be clear - I do not want a “pre-order” type deal.

Currently, using the Dawn theme, my only options when adding a new product are “Draft” and “Active”, it would be great is there was another option, like there was on Big Cartel, where I can select “Coming Soon”.

This app below is the only example of shopify i can find, though it doesn’t exactly do what I’d like. Firstly, I would like my theme to remain the same for products, and I don’t want to pay £9 a month to only use one small feature from their app (i wont use pre-order).

https://apps.shopify.com/coming-soon-products?gclid=CjwKCAjwpqCZBhAbEiwAa7pXeTRNV_4YPGc5traEGiTZ6BfwKWFh6vWDrNKUyuufzvRB_DbfLUJjzRoCwBMQAvD_BwE

Would be great if someone could please help me with a work-around! Hope this makes sense and thanks in advance!

[Kani]

Hi @joshuasamuels

1: Online store > themes > Actions > Edit code > Snippets > card-product.liquid

2:

replace

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

with

{% if card_product.tags contains '__label:coming soon' %}
     coming soon
{% else %}
     {{ 'products.product.sold_out' | t }}
{% endif %}

3: add tag ‘__label:coming soon’ to products

[joshuasamuels]

Hi Kani,

Thank you so much for the support.

This seems really promising, though having now followed this, it hasn’t
worked just yet, unfortunately… Any thoughts as to why it hasn’t?

Thanks again!

Joshua

[Kani]

Maybe you should show me what you did. you code, your product tags, your url

[joshuasamuels]

How is best for me to do that? Perhaps we could video call?

[PilarSantos]

Hello Kani! Thanks a lot for your solution… I tried to apply it on my online shop but I don´t have in Snippets this name: card-product.liquid, can you please tell me if I have to search for another name maybe? Thanks a lot for your support!

[Kani]

Hi @PilarSantos I don’t have blockshop theme, if you don’t mind pls send your theme file to my mail 565746947@qq.com, I will check it and let you know

[PilarSantos]

Hello Kani,

I sent you the file to your Email. Thanks a lot for your help :).

If you need anything else, please let me know

[Kani]

Hi @PilarSantos

In your theme it called ‘framework–product–item.liquid’

[PilarSantos]

Oh! I will try it with that, thanks a loot for your super help

[PilarSantos]

Thanks a loot

[rosina89]

hi kani, thanks so much for this! it worked for me too. i was wondering:

1. i see the label is now visible on the overview page of all products but if i click on the product itself, it still shows the ‘sold out’ button. is there a way to display the coming soon button on the product page itself aswell?
2. is there a way to change the background colour of the specific coming soon button so it stands out from the sold out button? im using the dawn template so i only have a colour scheme for a sold out and sale button which i can edit.. thanks!

[pisstocity]

Second this.

@Kani

[pisstocity]

I can confirm this code worked but as Rosina89 mentioned in her comment, there are a few prevalent issues for us non-coders.

(1) Is it possible to change the colour of the coming soon to green instead of the sold out badge default colour scheme? I presume this may actually require creating an actual coming soon badge.

(2) When the customer clicks on the product, it takes them to the product page. The code written only changes the text of the badge on the front page, but does not change the buttons or the badges on the product page. The buttons and badges on the product page still remain as ‘Sold Out,’ which is undesirable and confusing. I have tried playing around using an if function, similar to your code under buttons but no luck as I am not familiar with code at all.

Would you be able to detail a guide or solution on how to resolve issues (1) and (2)? @Kani

Thank you

[Kani]

Hi @rosina89 @pisstocity

You can simply do it like this.

1: Snippets > price.liquid

replace #89

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

with

{% if product.tags contains '__label:coming soon' %}
         coming soon
    {% else %}
         {{ 'products.product.sold_out' | t }}
{% endif %}

also add class ‘price__badge-coming-soon’ for card-product.liquid label, so update code is

{% if card_product.tags contains '__label:coming soon' %}
              coming soon
              {% else %}
              {{ 'products.product.sold_out' | t }}
              {% endif %}

2: Assets > base.css

add at last

.price__badge-coming-soon {
  background: red;
  color: #fff;
  border-color: red;
}

[pisstocity]

This is the solution. Absolute 10/10 and works!

Would the same if function also be possible on the ‘Sold Out / Add to Cart’ Button? I tried playing around with this but was unsuccessful. I don’t think it likes multiple if functions, as it already has one in place.

[kobe_1]

Hi, I have the Shapes theme and cant seem to find card-product.liquid either. Please let me know if mine would be under a different name. Thank youu!

[lottiejane]

Hi @Kani ,

We’ve used your suggestion to get the Sold out badge altered, but now we are looking at the greyed out CTA which still displays shows as ‘Sold out’, do you have a suggestion for this?

Thanks!