Changing "Sold Out" to "Coming Soon" for tagged products

Store Design
, , , , , ,
1

We have a Shopify store on the Dawn theme and I’m trying to change the “Sold Out” text on products that are tagged “coming soon” to show “Coming Soon” instead. I found a thread on the community forms that suggested adding this code to the main-product.liquid file to achieve this result:

    {% for tag in product.tags %}
      {% if tag == 'coming soon' %}
        <style>
          .product-form__submit > span { display: none; }
          .product-form__submit:after {
            content: 'Coming Soon';
            display: flex;
            align-items: center;
            justify-content: center;
          }
        </style>
      {% endif %}
    {% endfor %}

This correctly changes the text in the form submit / Buy Button area to show “Coming Soon” but does not change the “Sold Out” tag that appears next to the price: https://keenbeanstudio.myshopify.com/products/roll-camera-spy-thriller-story-pack or the matching tag on the category pages: https://keenbeanstudio.myshopify.com/collections/games

I want to keep the option to show products as Sold Out (by simply NOT applying the product tag to those products). I would like to use the Coming Soon tag just for items that have not been made available yet and have 0 inventory in our system until the first shipment arrives.

Is it possible to change the code above to affect the black oval “Sold Out” text as well as the buy button? Or is there a better way to reach this goal?

Thank you in advance!

2

Hi, @KBSBoardGames

You can change any text by editing dafault theme content.

AnneLuo_0-1736905793265.png
AnneLuo_0-1736905793265.png1092×469 49.5 KB

AnneLuo_1-1736905818900.png
AnneLuo_1-1736905818900.png794×627 25.9 KB

Hopefully it will help you. If yes then Please don’t forget hit Like and Mark it as solution!

3

I saw this as an option, but am I correct in assuming that this will change ALL “sold out” products to display “coming soon”, and not just the ones that I mark with the “coming soon” tag? This would be an issue, as I need to have “Sold Out” for products that are sold out, and “Coming Soon” for products that are not yet available. Please let me know, thank you!!

4

This method is suitable for products that are sold out. If you want to display upcoming products in some products, you need to add tags to the products and modify the code logic. Can you share the product link you changed?

5

Sure, I created a product tag called “coming soon” and it is applied to this product: https://keenbeanstudio.myshopify.com/products/roll-camera-spy-thriller-story-pack

As you can see, my code from the original post is correctly changing the buy button text to read “coming soon” instead of “sold out” but not the text near the price:

1.jpg
1.jpg889×786 91.3 KB

And on the category page, here is the same “sold out” that I would like to show “coming soon” when this tag is applied.

2.jpg
2.jpg1138×785 127 KB

Thanks again for your help!

6

Did you add the ‘coming soon’ tag for your products? I can help you with. But it needs to add some custom code.So I need to access your store as a collaborator if possible.