Show quantity on product page on Empire

Tourist
60 0 1

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

1 Like
Tourist
5 0 1

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

1 Like
Shopify Partner
1843 172 543

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!

I turn coffee in to code - since 1998
0 Likes
New Member
2 0 0

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. :)

0 Likes
Tourist
6 0 0

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

0 Likes
Highlighted
Tourist
4 0 2

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.
1 Like
New Member
2 0 0

@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.

0 Likes
Tourist
4 0 2

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.

0 Likes