DEBUT | Display Inventory Quantity On The Product Page

[Edparis]

Hello,

I am trying to show inventory quantities on the product page. I'm using DEBUT theme.

Thanks !

[ZestardTech]

Hello There,
Please share your store URL and Password.
So that I will check and let you know the exact solution here.

[ZestardTech]

Hello @Edparis 

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Paste the following code sections above the price tag within the 'main-product.liquid' file:

<p>Inventory: {{ product.variants.first.inventory_quantity }}</p>

[Edparis]

Thanks a lot ! I'm not sure where to put it code in my product .template. liquid  I don't have much lines :

<!-- sh_cfm-added -->
{% render 'sh_cfm-product-snippet' %}
<!-- /sh_cfm-added -->
{% comment %}
The contents of the product.liquid template can be found in /sections/product-template.liquid
{% endcomment %}

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

<div id="backToCollection"></div>

<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 }}
};

if(sessionStorage.backToCollection) {
theme.backToCollection = {};
theme.backToCollection.collection = JSON.parse(sessionStorage.backToCollection);
var productCollections = {{ product.collections | json }};
var showCollection = false;
if (productCollections) {
productCollections.forEach(function(collection) {
if (collection.title === theme.backToCollection.collection.title) {
showCollection = true;
}
});
}
if(showCollection) {
var backToCollectionHTML = '<div class="text-center return-link-wrapper page-width"><a href="' + theme.backToCollection.collection.link + '" class="btn btn--secondary btn--has-icon-before">{% include 'icon-arrow-left' %}{{ 'products.product.back_to_collection' | t }} ' + theme.backToCollection.collection.title + '</a></div>';
var backToCollectionContainer = document.getElementById('backToCollection');
backToCollectionContainer.insertAdjacentHTML('afterbegin', backToCollectionHTML);
}
}
</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>

{%section'slideshow-LAFIDELE'%}
{%section'featured-row-FIDELE-1'%}
{%section'featured-row-FIDELE-2'%}
{%section'Slideshow-LAFIDELE-1'%}
{%section'featured-row-FIDELE-3'%}
{%section'featured-row-FIDELE-5'%}
{%section'featured-row-FIDELE-4'%}

[Edparis]

Hi @ZestardTech not sure if you can help for regarding my question above ?

[Small_Task_Help]

Hi,

At product-template.liquid need to add shopify code something like this

{% if product.available %}
  <p>In Stock: {{ product.variants.first.inventory_quantity }}</p>
{% else %}
  <p>Out of Stock</p>
{% endif %}

[Edparis]

Hi, Thanks a lot ! Where do you put it to have it in this zone : 

<!-- sh_cfm-added -->
{% render 'sh_cfm-product-snippet' %}
<!-- /sh_cfm-added -->
{% comment %}
The contents of the product.liquid template can be found in /sections/product-template.liquid
{% endcomment %}

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

<div id="backToCollection"></div>

<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 }}
};

if(sessionStorage.backToCollection) {
theme.backToCollection = {};
theme.backToCollection.collection = JSON.parse(sessionStorage.backToCollection);
var productCollections = {{ product.collections | json }};
var showCollection = false;
if (productCollections) {
productCollections.forEach(function(collection) {
if (collection.title === theme.backToCollection.collection.title) {
showCollection = true;
}
});
}
if(showCollection) {
var backToCollectionHTML = '<div class="text-center return-link-wrapper page-width"><a href="' + theme.backToCollection.collection.link + '" class="btn btn--secondary btn--has-icon-before">{% include 'icon-arrow-left' %}{{ 'products.product.back_to_collection' | t }} ' + theme.backToCollection.collection.title + '</a></div>';
var backToCollectionContainer = document.getElementById('backToCollection');
backToCollectionContainer.insertAdjacentHTML('afterbegin', backToCollectionHTML);
}
}
</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>

{%section'slideshow-LAFIDELE'%}
{%section'featured-row-FIDELE-1'%}
{%section'featured-row-FIDELE-2'%}
{%section'Slideshow-LAFIDELE-1'%}
{%section'featured-row-FIDELE-3'%}
{%section'featured-row-FIDELE-5'%}
{%section'featured-row-FIDELE-4'%}

[SEOKingpin]

I am curious to know how this works with variants. For some reason, following these steps mentioned above, if the Debut Theme liquid code is using a product-template.lidiud file, that must be edited. However, the steps above have things display a little funny when it comes to variants, for example:

If there is a Variant with the first Variant Listed on the Product Page with a Available Stock number of "0" the product page will display it as "0", and that will not change even if the user looks at another variant (size, color, etc.). If the product is OUT OF STOCK for ALL Variants, than the page will display "  " nothing at all. 

The way you suggested coding this...

{% if product.available %}
<p>In Stock: {{ product.variants.first.inventory_quantity }}</p>
{% else %}
<p>Out of Stock</p>
{% endif %}

...commands to display the FIRST variant data only. How, would you go about having it display the quantity on hand for EACH VARIANT, while also, allowing the product previews to display QTY for ALL VARIANTS? This would be the proper way to code each website using this feature to avoid any issues with invalid data which would absolutely risk sales.