Show quantity on product page on Empire

[Paul_Nash1]

Hi,

I've just switched to Empire theme, on my previous theme we had 'We currently have ? left in stock' showing on the product pages and add to cart beneath it, which was ideal for what we sell.

However Empire shows a quantity box and its not until you select a quantity thats not available do you know how many we have in stock. What we sell its fairly important to know exactly how many we have in stock of each item when you're browsing.

Theres nothing in general theme settings, I've identified (maybe) the code in my previous theme (product.liquid)

  {% endif %}
            
            {% if product.variants.first.inventory_quantity %}
            We currently have <strong>{{ product.variants.first.inventory_quantity }}</strong> in stock.
            {% else %}
            Sold out!
            {% endif %}
                        
            {% comment %} If you are using Shopify's custom options, add them here! {% endcomment %}
            {% if settings.prod_customizr_compat %}
                {% include 'extra-product-options' %}
            {% endif %}
            
            </div>

But I'm not sure if I can just overwrite the relevant code in Empire, the only section I can find is product-form.liquid

Thanks in advance,

Paul

[Denise_Glezer-J]

I have the same query! How do I get the inventory count to display on the product page within Empire theme?

[KarlOffenberger]

Hi Denise,

Empire theme is a commercial theme which makes it difficult to support by the community since we do not have access to the theme's code or knowledge of its customisation settings.

Generally, on a product object level you can use {{ product.available }} to check the availability of any of the product variants in inventory at any location. You can further use {{ variant.available }} for a specific variant or {{ variant.inventory_quantity }} for the actual inventory level total across all locations.

However, it would be best to contact the theme vendor and ask for support how to implement above requirements. Most theme vendors offer support and are happy to help.

Best wishes!

[daviddietz]

Hi, Paul. I'm curious to know if you've found a solution to this problem. I've been able to pretty easily do this in other themes, but the Empire theme is a different beast! Please share if you've got it. 🙂

[Zandysellsrocks]

Thanks so much for this post! I've looked everywhere for the solution to this to no avail. I even contacted Pixel Union and they told me they do not have a fix for me at the moment.

I took the code you supplied above and played with it until I got it to work how I wanted. I ended up with the quantity display right above the quantity selector and add to cart button. 

Here's what I did to get there.

Go to Snippets>product-form.liquid and find this section:

{% form 'product', product, class: product_form_class, data-product-form: '' %}
{% if product.has_only_default_variant %}
<input
name="id"
value="{{ product.variants[0].id }}"
type="hidden">
{% else %}
{%
include 'product-options',
product: product,
selected_variant: selected_variant,
style: settings.product_option_style
%}
{% endif %}

And this section:

<div class="product-form--atc">
<div class="product-form--atc-qty form-fields--qty" data-quantity-wrapper>
<div class="form-field form-field--qty-select">
<div class="form-field-select-wrapper">
<select
class="form-field-input form-field-select"
aria-label="{{ 'general.general.quantity' | t }}"

And drop this code between the two sections:

{% if product.variants.first.inventory_quantity %}
We currently have <strong>{{ product.variants.first.inventory_quantity }}</strong> in stock.
{% else %}
Sold out!
{% endif %}

[IanAiken]

I'm currently using an old version of Shopify theme and this is what works. However, in the latest version this does not work as the JS is not updating the message as it should be. This is what we did:

In product-form.liquid

<script>       
var inv_qty = {};
{% for var in product.variants %}
inv_qty[{{- var.id -}}] = {{ var.inventory_quantity | default: 0 }};
{% endfor %}
</script>

<p> <span class="variant-inventory" text-center>
 {% if selected_variant.available == false %}
   Availability: Contact Us
 {% else %}
 	{% if selected_variant.inventory_quantity > 0 %}
   		Availability: Immediate Dispatch
 	{% else %}
   	Availability: Anticipated Dispatch in 7-10 days
 	{% endif %}
 {% endif %}
</span></p>

And in empire.js

Find this code

if (this.useHistory) {
        var url = this.product.handle + '?' + jquery$1.param({ variant: variant.id });
        history.replaceState({}, 'variant', url);
      }

And after use this

if (variant.inventory_management !== '') {
  	    
        var selectors = {
        SKU: '.variant-sku',
        variantInventory: '.variant-inventory'
      };

    $(selectors.SKU, this.$container).html(variant.sku);  
      var inventory_level = (inv_qty[ variant.id ]);
        if (variant.available == false) {
        	$(selectors.variantInventory, this.$container).html("Availability: Contact Us").show();
        }
          else
        	if (inventory_level > 0 ) {
        		$(selectors.variantInventory, this.$container).html("Availability: Immediate Dispatch").show();
        	}                
        	else {
        		$(selectors.variantInventory, this.$container).html("Availability: Anticipated Dispatch in 7-10 days").show();
        	}

    }  

This allows us to have three statuses and updated for all variants you have for the product. However right now with latest version (and adding the JS to the new file where the switchVariant is it's no longer working).

But I hope this helps anyone looking to implement the same. And would appreciate any help to get this working again on latest version of the theme.

[daviddietz]

@IanAiken I finally just decided to change my approach entirely. If you go to this page and click on "CHECK AVAILABILITY" under the size options, you'll see how I'm handling it now.

[IanAiken]

Ah cool a good idea!

We were able to fix ours with a bit help, seems the new theme is using webpacks and the versions are hardcoded so it will never load the modified files. This is now changed on ours and our text switcher is now working again.

[renwill]

@Zandysellsrocks  Just upgraded to Empire today and this feature is a must for my site. Thank you, your insert works great. However, do you know if there is a way to show the variant quantities? I have several products that come in different colors and my Shopify Minimal displayed the variant quantities perfectly by adding "<p><h3>We have <strong class="variant-inventory">{{ current_variant.inventory_quantity }}</strong> available based on current selection.</h3></p>"

[renwill]

Update... minor changes to the code worked. Changed Current to Selected and works ok. I say ok because when I change the variant the quantity on hand does not change when changing the variant, only changes when I refresh the page. So, the new question is, how do I get my product page to refresh after selecting a different variant?

<p><h3>We have <strong class="variant-inventory">{{ selected_variant.inventory_quantity }}</strong> available based on current selection.</h3></p>

[Metzger-SES]

Thank you so much, mate 🙂

[renwill]

My site now has a fully functional product page that shows quantity on hand and now updates automatically when I chose a different variant. Kind of pisses me off that Pixel Union could not add this as an option or feature to the Empire theme, I had to hire someone from Storetasker to add code to my theme to accomplish this at a cost of $65. In the end however, it was worth the cost. If this function/feature is very important to you bite the bullet and pay the $65. The person I worked with is Nick, his profile picture is him wearing sunglasses and standing in front of a body of water with a boat behind him.

Please don't ask me for the code, it's only fair that if I had to pay for it you should to.

[Almacen_Uno]

Hi, very fair.

Can you help us with nicks email? 

Thanks.

[Almacen_Uno]

Thank You Very Much!

Pasted it on the line 42 of the snippet code (left 41 and 47 lines empty) and it completely worked.

28-07-2020 on Empire Theme bought 1 month ago.

[saulable]

If anyone has problems getting this right, I copied what someone else had posted and managed to get it working.

Here is perfect working code. 

In empire.js.liquid After 

   if (this.useHistory) {
        var url = "".concat(this.product.handle, "?").concat(jquery_default.a.param({
          variant: variant.id
        }));
        history.replaceState({}, 'variant', url);
			}

 You want

			if (variant.inventory_management !== '') {
  	    
        var selectors = {
        SKU: '.variant-sku',
        variantInventory: '.variant-inventory'
      };
			
    $(selectors.SKU, this.$container).html(variant.sku);  
			var inventory_level = (inv_qty[ variant.id ]);
			console.log(inventory_level)
        if (variant.available == false) {
        	$(selectors.variantInventory, this.$container).html("Currently Unavailable").show();
        }
          else
        	if (inventory_level > 10 ) {
        		$(selectors.variantInventory, this.$container).html("<div class='in-stock'>In Stock</div>").show();
        	}                
        	else {
        		$(selectors.variantInventory, this.$container).html("<div class='in-stock'>Only <strong>" + inventory_level +  "</strong> In Stock</div>").show();
        	}

    }  

Add to theme.css.liquid

  .stock-available {
    margin: 15px 0 0 0;
    font-size: 20px;
}
  .stock-available .in-stock{
    color: #007600;
    margin: 0;
    padding: 0;
  }

 In product-form.liquid after 

<div class="form-field form-field--qty-input hidden">
        <input
          id="product-quantity-input"
          class="form-field-input form-field-number form-field-filled"
          value="1"
          name="quantity"
          type="text"
          pattern="\d*"
          aria-label="{{ 'general.general.quantity' | t }}"
          data-quantity-input
        >
        <label
          for="product-quantity-input"
          class="form-field-title"
        >
          {{ 'general.general.quantity' | t }}
        </label>
      </div>
    </div>

Add this code.

    <script>       
var inv_qty = {};
{% for var in product.variants %}
inv_qty[{{- var.id -}}] = {{ var.inventory_quantity | default: 0 }};
{% endfor %}
</script>
	<div class="stock-available variant-inventory">
       {% if selected_variant.available == false %}
   Currently unavailable	
   {% else %}
 	{% if selected_variant.inventory_quantity > 10 %}
   		<p class="in-stock">In stock.</p>	
 	{% else %}
	<p class="in-stock">Only <strong class="quantity-available">{{ selected_variant.inventory_quantity }}</strong> in stock.</p>
 	{% endif %}
 {% endif %}
</div>

[Unforgettable]

Hi all, 

I am trying to use your code but, by lookign in empire.js.liquid,  I do not have the following useHistory object. My empire is version 4.7.0, any idea?

if (this.useHistory) {
var url = "".concat(this.product.handle, "?").concat(jquery_default.a.param({
variant: variant.id
}));
history.replaceState({}, 'variant', url);
}

[daviddietz]

For anyone interested in my working method, here's how it's done.

First, create a new Snippet called "product-availability.liquid" and paste this code in it:

{%-comment-%}PRODUCT AVAILABILITY -- Called in "product-options" snippet.{%-endcomment-%}
    <div>
    	<span id="availability-button" class="availability-button" style="color:#1678ce;line-height: 20px;font-size: 16px;font-weight: bold;text-transform: uppercase;font-family: Karla,sans-serif;text-decoration: underline;cursor: pointer;">Check availability</span><div id="availability" class="availability" style="display:none;">{% for variant in product.variants %}{% assign availability = variant.inventory_quantity %}
      <span style="font-weight:bold;">[{{ variant.title }}]:</span> 
      <span style="font-size:16px;font-weight:bold;{% if availability >= 15 %}color:#819e39;{% elsif availability <= 0 %}color:#4d4d4d;{% else %}color:#f44242;{% endif %}">
      	{% if variant.available %}
        	{% if availability <= 0 %} Accepting backorders. 
        	{% else %}{{ availability }} remaining.
        	{% endif %}
      	{% else %}Out of Stock.
      	{% endif %}
      </span><br>
   {% endfor %}</div>
    </div><hr>
    <script>
      jQuery( ".availability-button" ).click(function() {
    	jQuery(this).next( ".availability" ).toggle();
		});
	</script>
{%-comment-%}END PRODUCT AVAILABILITY{%-endcomment-%}

Then, open "product-options.liquid" under Snippets. Assuming there haven't been any changes to this file, insert "{%- include 'product-availability' -%}" between the two closing div tags "</div>" on lines 87/88. It ought to look like this:

                </label>
              </div>
            {% endfor %}
        </div>
{%- include 'product-availability' -%}
      </div>
    {% endif %}
  {% endfor %}
</div>

Good luck!

[AlexanderLM]

Hi, Great post! I was wondering is it possible to do it on specific collections - say you'd want to sell out items that we just need to get out of storage (storage sale) - and therefor needing to show how many are left in storage. 

Also the "prodct-options.liquid" seem to have been removed, is there another place i can put the bottom of the code snippet instead.

/Alexander