It makes sense to keep your customers from changing the quantity in the /cart step of checkout when you are selling a pre-pay Experience booking. You may be strategically limiting the amount any one customer can buy to make room for other customers or simply don't want to oversell your Experiences inventory.

Every Shopify shop is set up differently, which means there are some things that we can't do automatically.  One of these things is customizing your store's cart to prevent customers from changing the quantity on bookings.  Luckily, with a bit of simple code we can remedy this issue!

Heads up!  Editing code can sometimes be tricky and come with unintended consequences.  We are not responsible for broken code so edit at your own risk and make sure to make a backup!

Step 1: Open Shopify's Code Editor

Shopify offers a built-in editor for modifying the code for your shop's theme.  On the left hand side, find the Online Store link.

Once there, you'll find your current theme towards the top.  Click the Actions drop down, and select Edit Code.

Great work!  On to the next step. 

Step 2: Find the Right Liquid File 

Your shop's theme is made up of many text files with a .liquid  suffix.  These are referred to as "Liquid" files, a special language designed for Shopify that mixes existing web languages with the data for your shop.  If you want more information on what "Liquid" is, you can click here to read Shopify's own documentation on it.

This part can be a bit tricky because the Liquid file containing the code we're looking for may vary depending on the theme.  The first place to look is the cart.liquid  file found under the Templates section.

There's a chance that the actual code for the cart items might exist elsewhere in another type of file called a "section" or a "snippet".  You can tell if this is the case if the code looks something like this:

{% section 'cart-template' %}

In this case, the file can be found under the Sections list in a file named cart-template.liquid.  If you're still struggling to find it, jump to the next step to see if you can locate the specific piece of code you'll need to edit.

Step 3: Edit the Code

Ok, we're nearly done!  We need to locate the line of code that renders the box where the quantity of an item can be changed.  To make this a bit easier, we can use the "find" feature.  Click in the box with all the crazy looking text and press cmd + f  on Mac or ctrl + f  on Windows.  Type name="updates[]" in the box that appears and press "enter".

You should see a line that looks like this: 

<input class="cart__qty-input" type="number" name="updates[]" id="updates_{{ item.key }}" value="{{ item.quantity }}" min="0" pattern="[0-9]*">

If it doesn't match that exactly, that's okay.  Not every theme will have the exact same code for this line.  

Alright, it's time to get a bit technical again.  We need to add some special "Liquid" code that will change how the cart page renders the quantity box.

We're going to add something called an if  tag.  Basically this tag says that if type of product is an "Event", then we'll just show the quantity for the line item.  Otherwise, we'll show the box that allows the customer to change the quantity.

{% if item.product.type == "Event" %}
  {{ item.quantity }}
{% else %}
  PUT THE INPUT LINE HERE
{% endif %}

Be sure the replace the PUT THE INPUT LINE HERE  with the <input ...  code found previously in this step!

Additionally, if you see a line above the <input ...  line that starts with <label you can include that line in between the {% else %} and {% endif %}  lines with the <input...  code. 

Step 4: Hit Save and Check It Out!

Find the Save button in the top right corner and click it.

Now book an event on your shop and head to your cart.  You should see something like this for you cart.

Did this answer your question?