PLEASE NOTE: Every theme is slightly different, and this customization has proven challenging for our customers. Because of the differences between themes, making this article general enough to cover every theme is nearly impossible. Please get in touch with us via chat if you'd like help with this.
Even though our booking widgets won't let your customers buy more than you allow when you set up your Experience, they can change the quantity when they get to the /cart step. Stinkers!
It makes sense to keep your customers from changing the quantity in the /cart step of checkout when 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 don't want to oversell your Experiences inventory.
Every Shopify shop is set up differently, meaning there are some things we can't do automatically. One of these things is customizing your store's cart to prevent customers from changing the quantity of bookings. Luckily, with a bit of simple code, we can remedy this issue!
TL;DR
Add a unique product type to all your Experiences using the Shopify product editor.
Edit your cart template file to remove the quantity changer for any product that matches the product type you don't want to be changed in the cart.
Heads up! Editing code can sometimes be tricky and have unintended consequences. We are not responsible for broken code, so edit at your own risk and make a backup!
Step 1: Set a Product Type and then Open Shopify's Code Editor
For any Shopify product in your store that is also an Experience, make sure you set a Product type that you can use to filter for experiences only later.
Now that you've done that, it's time to tweak some code.
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, your current theme will be towards the top. Click the Actions drop-down menu and select Edit Code or create a duplicate of the theme and test your changes there first.
Great work! On to the next step.
Step 2: Find the Right Liquid File
Your shop's theme comprises 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 documentation on it.
This part can be 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. We can use the "find" feature to make this a bit easier. 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 whatever you already chose it to be, 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.
In this case, the Shopify product type for this merchant's experience was set to "Event". If you made your product type "Experiences" or "Tours" or whatever, this is where you'd name that in the code.
{% 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.
