Venture theme. How do i get inventory to show on product pages?

Store Design
1

Venture theme. How do i get inventory to show on product pages instead of only when it is less than 10?

2

Hi @teevon

Can you locate your produt-template.liquid file?

3

yes

4

Great!

Can you locate the line where product.inventory_quantity < 10 or variant.inventory_quantity < 10 ?

Let me know!

5

Hi @teevon ,

The solution presented here won’t work in the following themes: Venture, Clearflex, and Boundless.

This tutorial is going to show you how to add the inventory quantity to your product pages:

  • Your store must be using jQuery
  • If you have multiple variants, this relies on having the OptionSelector javascript installed
  • This will only work for variants that have their Inventory Policy set to ‘Shopify Tracks this variant’s inventory’

There are two important steps to achieve this.

  1. Add a container to the product page - it will display the quantity for the first variant. Here’s how:

  2. From your Shopify admin, click Online Store, and then click Themes (or press G W T).

  3. Find the theme you want to edit, click the … button, and then click Edit HTML/CSS.

  4. Left click to open the product.liquid - place this code where you would like the quantity displayd:
    follow the respected link

  5. Show inventory quantities on product pages in Shopify

    THANKS AND REGARDS

    @QASOLUTIONS

6

{% if current_variant.inventory_quantity < 10 and current_variant.inventory_quantity > 0 %}
{% assign qty = current_variant.inventory_quantity %}
{{ ‘products.product.stock_available’ | t: count: qty }}
{% elsif current_variant.inventory_quantity == 0 or current_variant.inventory_quantity < 0 and current_variant.incoming %}
{% if current_variant.available %}
{% assign date = current_variant.next_incoming_date | date: “%B %-d, %Y” %}
{{ ‘products.product.will_not_ship_until’ | t: date: date }}
{% else %}
{% assign date = current_variant.next_incoming_date | date: “%B %-d, %Y” %}
{{ ‘products.product.will_be_in_stock_after’ | t: date: date }}
{% endif %}
{% endif %}
{% endif %}

{% endif %}
7 
if (variant) {
  if (variant.inventory_management == "shopify" && variant.inventory_policy != "continue") {
    if (variant.inventory_quantity > 0) {
      jQuery('#variant-inventory').text('We have ' + variant.inventory_quantity + ' in stock.');
    } else {
      jQuery('#variant-inventory').text("This product is sold out");
    }
  } else {
    jQuery('#variant-inventory').text("This product is available");
  }
} else {
    jQuery('#variant-inventory').text("");

@QASOLUTIONS

8

Hi @teevon

Hope you are doing well!

To get inventory showing on your product page, please following these steps:

Step 1: Duplicate your live theme

From your Shopify admin go to Online store and choose themes. Next to the live theme click on Actions and choose Duplicate. This way you will have a backup of your live theme in case you miss some step and mess up your store

Step 2: Edit Product-Template.liquid

Now that you have the duplicate of your theme you can click on Actions again, but this time choose Edit Code.

From the navigation to the left go to Sections directory and choose Product-template.liquid. Find the place you want to show your message, maybe above add to cart button, and paste the following code:

{% comment %} Inventory tracking on product page {% endcomment %}

{% 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 %}

n case you don’t have multiple variants you can Click on Save and the message of quantity should be visible on your Site.

Step 3: Edit Product-Template.liquid

In case you have multiple variants you will need to add one additional line in the product-template.liquid.

Paste the following code right above the code you just pasted in the product-template.liquid and click on Save.

{% for variant in product.variants %}

{% endfor %}

Step 4: Edit Theme.js

From the navigation to the left scroll down to the assets directory and choose theme.js. In this new js file search for the “variantchange”. It’s important to place the following code inside the variantchange block. In our case, we are using the Debut theme, it should be on the line 748.

let inventoryHash = document.querySelectorAll(‘[inventorymanagment]’);
debugger;

Under that piece of code paste the following

Array.from(inventoryHash).forEach(
(Selectedvariant)=>{

if(Selectedvariant.dataset.id == variant.id){

if(Selectedvariant.dataset.inventory > 0)
{
$(“#variant-inventory”).html(“We have “+ Selectedvariant.dataset.inventory +” in stock”);

}
else{
$(“#variant-inventory”).html(“Sold out!”);

}

Click on Save and your message of quantity should be visible and working on your site.

I hope this helps. If you find my answer is helpful, please mark it as SOLUTION