Changing 'Sold Out' to 'Coming Soon' but only for certain products.

Melissa_Powell
New Member
1 0 1

I would love to change the 'Sold Out' message (the overlay on the product image) to 'Coming Soon', but only for some products.

Is there a way to do this? I have googled my little heart out, but haven't come up with anything. Please help!

 

Thanks!

Replies 19 (19)
JoJos_Greens
Excursionist
14 0 5

Did you ever receive an answer to this issue - I am experiencing the same problem, but want to change the TXT displayed to 'Order Now'

stephanierobo
Tourist
7 0 1

This seems like such a great solution and I want to utilize it except for the fact that I rely heavily on the "types" feature for sorting my products into automated collections, so changing the types to "Coming Soon" would be detrimental to my catalog's organization.

Do you happen to have a suggestion of how to tweak this method so that it can be done by making a separate product template and then just changing it so that "all products" (aka any products assigned to that template) that are sold out will show as coming soon? I've been trying to change this line of code in the Debut theme:

<span id="AddToCartText-{{ section.id }}">
{% unless current_variant.available %}
{{ 'products.product.sold_out' | t }}
{% else %}
{{ 'products.product.add_to_cart' | t }}
{% endunless %}

 

to:

<span id="AddToCartText-{{ section.id }}">
{% unless current_variant.available %}
{{ 'products.product.coming_soon' | t }}
{% else %}
{{ 'products.product.add_to_cart' | t }}
{% endunless %}

 

But the sold out button keeps showing "Translation missing: en.products.product.coming_soon" instead of just "coming soon" so I know I'm missing a step

 

Any help would be greatly appreciated!

 

 

JoJos_Greens
Excursionist
14 0 5

I recently received support for this from Shopify Theme Support for the Minimal Theme.

Check out the website jojosgreens com au
Navigate to 'Live Microgreens\Fresh Pots' and you can see the results.
Click to Order (Order Now) is actually Sold Out, but for that specific Product Type, and was hardcoded.

Happy to forward you the Shopify Support emails that explain the code changes if you wish.

Feel free to email me @

geoff @ jojosgreens com au

stephanierobo
Tourist
7 0 1

Thanks so much @JoJos_Greens for responding! Unfortunately I'm looking for a way to do this in the code without using "Product Type" as any sort of factor in this because I use the "Product Type" feature in order to sort automatic collections in my catalog. 

I was able to figure out how to just change the text for the "Sold out" button on the product page itself to say "Coming soon" without touching the product types by instead just creating a new product template and assigning it to the products I wished for the change to affect. But I now would like to go the next step and change it on the product grid the way yours looks. Did they instruct you to edit this piece of code within the product-card-list.liquid snippet?

<div class="product-card product-card--list">
  <a class="full-width-link" href="{{ product.url | within: collection }}">
    <span class="visually-hidden">{{ product.title }}</span>
  </a>

  <div class="list-view-item__link">
    <div class="list-view-item__image-column">
      <div class="list-view-item__image-wrapper product-card__image-wrapper">
        <img class="list-view-item__image" src="{{ product.featured_image.src | img_url: '95x95', scale: 2 }}" alt="">
      </div>
    </div>

    <div class="list-view-item__title-column">
      <div class="list-view-item__title" aria-hidden="true">
        <span class="product-card__title">{{ product.title }}</span>
      </div>
      {% if product.compare_at_price > product.price %}
        <div class="list-view-item__on-sale">{{ 'products.product.on_sale' | t }}</div>
      {% endif %}
      {% if section.settings.show_vendor %}
        <div class="list-view-item__vendor medium-up--hide">{{ product.vendor }}</div>
      {% endif %}
      {% unless product.available %}
        <div class="list-view-item__sold-out">{{ 'products.product.sold_out' | t }}</div>
      {% endunless %}
    </div>

 

JoJos_Greens
Excursionist
14 0 5

See attached image - Screen grab of the email

2021-09-10_142035.jpg

stephanierobo
Tourist
7 0 1

Thank you so so much @JoJos_Greens ! This was super helpful

Also, I came across this tutorial the other day that I think you could potentially benefit from, it allows you to get rid of the add to cart altogether on certain product pages and to redirect to a contact form:

https://help.shopify.com/en/manual/online-store/themes/os/customize/replace-add-to-cart

 

JoJos_Greens
Excursionist
14 0 5

Any time !

Thanks for the Add to Cart replacement idea - Very handy !

Will definitely look into it.

I was also emailed this after I enquired about another of their solutions

https://apps.shopify.com/pre-order-sales-beta

Could be good ?

FilipposD
Explorer
45 1 17

For anyone interested in adding this setting for specific products, there's another solution.

It doesn't require a specific product.type, or a template to be created and set for every product.

1. Go to Settings > Metafields and create a new metafield like this.

FilipposD_0-1631551743315.png

2. Go to a product that you want to display as "Coming Soon" when inventory is 0, and set the value to True.

FilipposD_1-1631551856048.png

3. Alter the Liquid files (just like previous answers - product, collection, search results etc.) but now you can use this property to determine if "Coming Soon" should be displayed instead of "Out of Stock":

{% if product.metafields.my_fields.coming_soon_ == true %}
...

  

Palle
New Member
2 0 0

My theme had the a bit of a different format. Here is what I tried but it is still not working for me.

(Im pretty new to liquid code, so maybe I'm just making a very basic mistake.)

I'd appreciate any help and/or guidance

 

<span data-add-to-cart-text>
                          {% if current_variant.available %}
                            {{ 'products.product.add_to_cart' | t }}


                                                    
                         {% elsif 'products.product.sold_out' and product.metafields.my_fields.not_available_for_retail_ != true %}
           <div class="badge badge--sold-out"><span class="badge-label">{{ 'products.product.sold_out' | t }}</span></div>
           {% elsif sold_out and product.metafields.my_fields.not_available_for_retail_ == true %}
               <div class="badge badge--sold-out"><span class="badge-label">{{ 'product.metafields.my_fields.not_available_for_retail_' }}</span></div>


 {% endif %}
                                     
                        </span>

 

rozeart30
Excursionist
14 0 5

This is exactly what we needed to do for items that we are not currently making in bulk.  

But - I need a few changes.

How do we get the contact link above our "BUY WITH SHOP PAY" button?

Also, in the Product Grid - the SOLD OUT overlay is on the product image, but when you click on the image, it doesn't show SOLD OUT.  Is there a way to add the overlay to the product when the product is clicked on?