Display stock availability in debut

Solved
snostorm1792
Tourist
3 0 1

Hello,
I would like to be able to display something like an "in stock" label for customers to see when they view a product that is in stock, and if possible, on the catalogue/collection pages as well. I am using the debut theme.

Currently, the theme only displays a "sold out" label for products which are out of stock on the individual product pages as well as on the various catalogue/collection pages. I would simply like to add this exact type of label for the reverse condition in order to make it clear which products are available and which products are not.

How would I go about doing this?
Thank you.

0 Likes
Hello snostorm1792,
If there is no default functionality to display in stock we have customize theme to display that.
You have to customize product-template.liquid file.
Mail me if any help needed: pallavi@oscprofessionals.com
If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
0 Likes
dmwwebartisan
Shopify Partner
5796 1327 1699

This is an accepted solution.

Hi

 

In order to enable the inventory tracking option, navigate to your HTML/CSS editor and select the product-template.liquid. Scroll to line 111 and paste the following code:

<div id="variant-inventory">
 {% if product.variants.first.inventory_management == "shopify" %}
    {% if product.variants.first.inventory_quantity > 0 %}
       We currently have {{ product.variants.first.inventory_quantity }} in stock.
    {% else %}
       The product is out of stock
    {% endif %}
 {% else %}
    This product is available
 {% endif %}
</div>

If your product does not have inventory tracking enabled, it will simply read as, "This product is available." 

 

Hope this will work for you.

 

Thanks!

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
snostorm1792
Tourist
3 0 1

Thank you so much for the reply! I pasted the code as instructed on line 111 in the product-template.liquid file, but it doesn't seem to make a difference when I save the code and refresh my shopify store, neither within the individual products nor on the catalogue page. Did I paste the code correctly? I apologize in advance for this rudimentary and possibly stupid question, I have very little experience in programming. Please see images below.

 

Screenshot 2020-06-02 at 12.39.44.pngScreenshot 2020-06-02 at 12.40.31.png

0 Likes
dmwwebartisan
Shopify Partner
5796 1327 1699

This is an accepted solution.

Hi

paste code line No 131 and check your product page.

 

Thanks!

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
snostorm1792
Tourist
3 0 1

Thank you so much. That solved it. I gave you a couple of likes and designated your replies as solutions to my question as thanks for your helpfulness.

12varungupta199
New Member
1 0 0

Hi,

 

I followed these steps which you suggested above and it worked for me too. However I want this message to appear next to the quantity selector or near the top of the page so the customers can see it as soon as they land on the page. Is there a way to do that? Since this morning i have tried to paste this code on every possible line on the page and every time the message appear at the bottom of the page. Any input would be valuable.

 

Thanks

 

Here's the code;

 

{% comment %}
The contents of the product.liquid template can be found in /sections/product-template.liquid
{% endcomment %}

{% section 'product-template' %}
{% section 'product-recommendations' %}

{% if collection %}
<div class="text-center return-link-wrapper page-width">
<a href="{{ collection.url }}" class="btn btn--secondary btn--has-icon-before return-link">
{% include 'icon-arrow-left' %}
{{ 'products.product.back_to_collection' | t: title: collection.title }}
</a>
</div>
{% endif %}

<script>
// Override default values of shop.strings for each template.
// Alternate product templates can change values of
// add to cart button, sold out, and unavailable states here.
theme.productStrings = {
addToCart: {{ 'products.product.add_to_cart' | t | json }},
soldOut: {{ 'products.product.sold_out' | t | json }},
unavailable: {{ 'products.product.unavailable' | t | json }}
}
</script>

{% assign current_variant = product.selected_or_first_available_variant %}

<script type="application/ld+json">
{
"@context": "http://schema.org/",
"@type": "Product",
"name": {{ product.title | json }},
"url": {{ shop.url | append: product.url | json }},
{%- if product.featured_media -%}
{%- assign media_size = product.featured_media.preview_image.width | append: 'x' -%}
"image": [
{{ product.featured_media | img_url: media_size | prepend: "https:" | json }}
],
{%- endif -%}
"description": {{ product.description | strip_html | json }},
{%- if current_variant.sku != blank -%}
"sku": {{ current_variant.sku | json }},
{%- endif -%}
"brand": {
"@type": "Thing",
"name": {{ product.vendor | json }}
},
"offers": [
{%- for variant in product.variants -%}
{
"@type" : "Offer",
{%- if variant.sku != blank -%}
"sku": {{ variant.sku | json }},
{%- endif -%}
"availability" : "http://schema.org/{% if variant.available %}InStock{% else %}OutOfStock{% endif %}",
"price" : {{ variant.price | divided_by: 100.00 | json }},
"priceCurrency" : {{ cart.currency.iso_code | json }},
"url" : {{ shop.url | append: variant.url | json }}
}{% unless forloop.last %},{% endunless %}
{%- endfor -%}
]
}
</script>
<h1> </h1>
<h1> </h1>
<h1> </h1>
<h1> </h1>
<h1> </h1>
<h1> </h1>
{% comment %} ADD Inventory tracking {% endcomment %}

<div style="text-align: center" id="variant-inventory">
{% if product.variants.first.inventory_management == "shopify" %}
{% if product.variants.first.inventory_quantity > 0 %}
{{ product.variants.first.inventory_quantity }} remaining in stock.
{% else %}
This product is currently out of stock. You can either pre-order this item or wait for it to be available again.
{% endif %}
{% else %}
This product is available
{% endif %}
</div>

{% comment %} END Inventory tracking {% endcomment %}

 

0 Likes
LetsGetAGift
New Member
8 0 0

Hi there,

Sorry to drag up an old thread however, out of all the threads that I've found, you're the one that has been able to help me! 

I have a quick question for you though if you have a moment.  Using this code, the stock only shows for the top item.  For example, I have two footballs. One red, one blue.  When I select red, I get the message saying there is three in stock. However, I have no stock of the blue football. When I select the blue football, your code still says that I have three in stock, yet the Debut theme code correctly shows that the item is sold out.

Could you explain how I get this to work with the individual variants please?

Thanks in advance for your time

0 Likes
soapsforchange
New Member
1 0 0

I am using the debut theme. You can add the following to your product-template.liquid file. This will print out the stock of *all* of the variants on the product page: 

 

          {% comment %} Inventory tracking on product page {% endcomment %}
            <div id="variant-inventory" class="{% unless current_variant.available %} hide {% endunless %}">
              {% if product.variants.size > 1 %}
               {% for v in product.variants %}
        {% if current_variant.inventory_management == "shopify" and current_variant.inventory_policy != "continue" %}
        {{ v.title }}: {{ v.inventory_quantity }} in stock. <br>
              {% else %}
              Product {{ v.title }} is available. <br>
              {% endif %}
   {% endfor %}
              {% else %}
               {% if current_variant.inventory_management == "shopify" and current_variant.inventory_policy != "continue" %}
               We have {{ current_variant.inventory_quantity }} in stock.
               {% else %}
               This product is available.
               {% endif %}
              {% endif %}
            </div>
0 Likes
foundryinterior
New Member
1 0 0

Hi, I was able to add the stock availability to my product page but it is listed at the very bottom - hard to find and unnoticed by my customers. Is there a way to show the available stock listed under the Description area, higher up on the page?

https://foundry-interior.myshopify.com/collections/featured-items/products/kilim-lg-floor-pouf-36x36...

 

Thanks!

S

0 Likes