Supply Theme Changing SOLD OUT to COMING SOON

Highlighted
Tourist
3 0 2

I am using the Supply theme, to sell eBooks, so I don't need to show that Stock is SOLD OUT.

However in Supply theme if you put stock to 0, the thumbmail on the shopfront then has a red image/text over it saying SOLD OUT and on the product page, the Add to Cart button is replaced by a greyed out button saying SOLD OUT.

I love this functionality. It is perfect for me to use, but I just need to replace the SOLD OUT with COMING SOON (as digital product never go out of stock).

Newbie to Shopify, so struggling to find where to make this change in all the various snippets, liquid layouts etc. Not afraid of getting my hands dirty but just cannot find the location. I found one reference to a class called "Badge" but cannot find the Css anywhere.

I simply want to replace the graphic or the text (not sure whichit is),  but can't find where.

0 Likes
Highlighted
Shopify Expert
648 0 103

In the Admin section if you click on "Themes" in the sidebar, you'll see a drop down menu that looks like the attached screenshot.

Select "Edit Language" then "English" and you should find it under the "Products" tab.

Alternatively you could edit your products and specify "Don't Track Inventory" rather than adding the number 0.

0 Likes
Highlighted
Shopify Expert
648 0 103

Select "Don't Track Inventory" might be better.

0 Likes
Highlighted
Tourist
3 0 2

Thanks - I managed to sort this uot myself. For those others following this thread I did the following

1. Ensured that Shopify track inventory is selected and put the stock to 0 (this intiates the SOLD OUT graphic to be oeverlayed on the thumbnail and for the shopping cart button to be disabled and SOLD OUT added to it.

2. To then change the words in the ADD TO CART BUTTON from SOLD OUT to COMING SOON I then went into the products.liquid file and at line 169 you will see the code below. In line 173 I replaced the following code ( {{ 'products.product.sold_out' | t | json}}) with ('Coming Soon') see below.

 

  $quantityElements.show();
      } else {
        // Variant is sold out, disable the submit button
        $addToCart.addClass('disabled').prop('disabled', true);
        $addToCartText.html('Coming Soon');
        $variantQuantity.hide();
        $quantityElements.hide();
      }

To change the words on the Thumbnail image that appears on the Shopfront i went into SNIPPETS/Product-grid-item.liquid at line 130 you will find 

<div class="badge badge--sold-out"><span class="badge-label">{{ 'products.product.sold_out' | t }}</span></div>

I replaced the   {{ 'products.product.sold_out' | t }} with Coming Soon. See below for the final code.

<a href="{{ product.url | within: current_collection }}" class="product-grid-item">
    <div class="product-grid-image">
      <div class="product-grid-image--centered">
        {% if sold_out %}      
        <div class="badge badge--sold-out"><span class="badge-label">Coming Soon</span></div>
        {% endif %}
        <img src="{{ product.featured_image.src | img_url: image_size }}" alt="{{ product.featured_image.alt | escape }}">
      </div>
    </div>

That is all and it works fine.

THREAD CLOSED

Highlighted
New Member
2 0 0

Mic drop

0 Likes