Shopify: Selling Products in Multiple Units

Photo by Sarah Pflug from Burst

The are products you want to sell in multiple units for several reasons and it is fairly straightforward to implement this in your Shopify store. But dependent on the theme you use it is more or less complicated.

Theme Independent Preliminary Work

Very often the specific multiple is valid for certain product groups. So in the first step you might want to define a specific product template for these products. See here for a description on how to do this.

Here we name the section your new template refers to product-multiple-of-three , such that you have the following entry in your new template.

{% section 'product-multiple-of-three' %}

This new section is just a copy of your product.liquid file in the section folder of your theme.

In the file product-multiple-of-three.liquid you can now set the variable for the multiple unit somewhere at the beginning of the file. This could look somehow as below:

{% assign minQty = 3 %}
{% assign incQty = 3 %}

Here we also defined an minimum quantity. If you are using metafields or tags you can set the values from your metafield or tags.

Show Time and Minimal Theme

As the file product-multiple-of-three.liquid is a copy of product.liquid you can find the input field for the quantity by searching for quantity. In the input field you can replace the values for the value and the min by the above defined liquid variable. When rendering the liquid engine will replace these values. Also you can add a step parameter which steers the stepping interval for the input.

<input type="text" id="quantity" name="quantity" class="quantity-selector" value="{{ minQty }}" min="{{ minQty }}" step="{{ incQty }}">

These changes already force that only the minimum quantity is allowed and that the customer can only in- and decrement as steered by the step.

But the step parameter does not work when using the up- and down arrows on the right side of the input field

The in- and decrements from these arrows are controlled via JavaScript, so the JavaScript attached to these arrows has to be adjusted as well. You can do this in the file theme.js in the asset folder.

If you search for $container.find(".product-page-qty.minus_btn").click in this file you will find the code for the function which must be replaced with the code below:

$container.find(".product-page-qty .minus_btn").click(function () {
    var inputEl = jQuery(this).parent().children().next();
    var qty = inputEl.val(),
    step=parseInt(inputEl.attr('step'))||1,
    minValue=parseInt(inputEl.attr('min'))||0;
   if (jQuery(this).parent().hasClass("minus_btn")) qty+=step;
        else qty-=step;
     if (qty <= minValue) qty = minValue;
         inputEl.val(qty);
     });

Actually there are only minor changes: In the code snippet the step and ` minValue are read from the input field and applied where the 0 and 1 were hard-coded before. In the same spirit the function attached to the plus button must be modified.

For the checkout page, where the quantities can also be modified, the modifications of the input field are sufficient.

Supply Theme

Everything written in respect to the input field in the previous section applies here as well, but here things are little more complicated because after the rendering the input field is overwritten via JavaScript or better jQuery. To allow for multiple units now the JavaScript function which overwrites the input field must be modified.

This function resides in the file theme.js.liquid in the Assets folder. The overwriting takes place in the function qtySelectors . The functions reads the properties from the input field as specified within the liquid file which is now, at the moment the function starts working, rendered and transfers the data to a jQuery template named jsQty residing in the file ajax-cart-template.liquid in the Snippets folder.

To make this work with the minimum and step parameter the template must be extended for these parameters and will then look like

And in the code for the function gtySelectors after the line if numInputs.length modify the code such that this part reads as

Here the parameters are read and passed on to the template.

In the same spirit the cart can be extended. And leveraging on this approach it is possible to put up product pages for yard products or “meterware” as we say in Germany.

Summary

We had the chance to adjusted other themes for multiple units as well but the basic setup was always the same. Please let us know if this does not work for your theme.