Add Custom Quantity Buttons to Shopify Product Pages

Are you looking to enhance your Shopify store’s user experience by adding custom quantity buttons to your product pages? You’re in the right place. This comprehensive guide will walk you through the process of implementing stylish and functional quantity selectors, similar to those found in the Venture theme.

Understanding the Need for Custom Quantity Buttons

Why Default Quantity Selectors Fall Short

The default quantity selector in many Shopify themes, including Debut, often lacks visual appeal and user-friendliness. This can lead to a suboptimal shopping experience for your customers.

Benefits of Custom Quantity Buttons

Custom quantity buttons can:

Improve the aesthetic of your product pages
Enhance user interaction
Potentially increase sales by making it easier for customers to adjust quantities

Setting the Stage for Implementation

Before we dive into the code, it’s important to note that this customization involves modifying your theme files. Always make a backup of your theme before making any changes.

Implementing Custom Quantity Buttons

Step 1: Enabling the Quantity Selector

First, ensure that the quantity selector is enabled in your theme settings:

Go to your Shopify admin panel
Navigate to Online Store > Themes
Click “Customize” on your current theme
Select “Product pages” from the dropdown menu
Look for the “Show quantity selector” option and enable it

Step 2: Modifying the Product Template

Next, we’ll need to modify the product template to include our custom quantity buttons:

In your Shopify admin, go to Online Store > Themes
Click “Actions” > “Edit code” on your current theme
Locate and open the product-template.liquid file in the Sections folder
Find the following code block:

{% if section.settings.show_quantity_selector %}
  <div class="product-form__controls-group">
    <div class="product-form__item">
      <label for="Quantity-{{ section.id }}">{{ 'products.product.quantity' | t }}</label>
      <input type="number" id="Quantity-{{ section.id }}" name="quantity" value="1" min="1" pattern="[0-9]*" class="product-form__input product-form__input--quantity" data-quantity-input >
    </div>
  </div>
{% endif %}

Replace it with the following code:

{% if section.settings.show_quantity_selector %}
  <div class="qtydiv">
    <label for="Quantity" class="quantity-selector">Quantity</label>
    <div class="qtybox">
      <span class="btnqty qtyminus icon icon-minus">-</span>
      <input type="text" id="quantity" name="quantity" value="1" min="1" class="quantity-selector quantity-input" readonly="" data-quantity-input>
      <span class="btnqty qtyplus icon icon-plus">+</span>
    </div>
  </div>
{% endif %}

Step 3: Adding Custom CSS

To style our new quantity buttons, we need to add some CSS:

In your theme editor, locate the theme.css file in the Assets folder
Add the following CSS at the end of the file:

.qtydiv label {
  display: block;
  margin-bottom: 12px;
  letter-spacing: 2.8px;
  color: #747a7b;
}
.qtydiv .btnqty {
  display: inline-block;
  cursor: pointer;
  user-select: none;
  font-size: 25px;
  padding: 5px;
  line-height: 5px;
}
.qtydiv .btnqty.qtyminus {
  margin-right: 8px;
}
.qtydiv .btnqty.qtyplus {
  margin-left: 8px;
}
.qtydiv .quantity-input {
  border: none;
  padding: 8px;
  text-align: center;
  width: 50px;
  outline: none;
  display: inline-block;
}
.qtydiv {
  display: inline-block;
  padding-right: 15px;
  padding-top: 10px;
}

Step 4: Adding JavaScript Functionality

To make our quantity buttons interactive, we need to add some JavaScript:

Open the theme.js file in the Assets folder
Add the following code at the end of the file:

document.getElementsByClassName("qtyminus")[0].addEventListener("click", function (){quantityChange("btn_minus");});
document.getElementsByClassName("qtyplus")[0].addEventListener("click", function (){quantityChange("btn_plus");});

function quantityChange(button) {
  var input_element = document.getElementById("quantity");
  var qty = parseInt(input_element.value);
  
  if (button == "btn_plus") {
    input_element.setAttribute("value", qty=qty+1);
  } else if (button == "btn_minus" && qty > 1) {
    input_element.setAttribute("value", qty-1);
  }
};

Troubleshooting Common Issues

Buttons Not Working

If your quantity buttons aren’t functioning, it might be due to jQuery not being available in newer Shopify themes. To resolve this:

Go to https://code.jquery.com/jquery-3.6.0.min.js
Copy the entire content of this file
In your Shopify theme editor, open the vendor.js file in the Assets folder
Paste the jQuery code at the end of this file

Quantity Not Updating in Cart

If the quantity isn’t updating correctly in the cart, you may need to modify your cart template. This is a more advanced customization and may require additional JavaScript modifications.

Customizing the Appearance

Changing Button Styles

You can further customize the appearance of your quantity buttons by modifying the CSS. For example, to change the button color:

.qtydiv .btnqty {
  background-color: #f0f0f0;
  color: #333;
}

Adjusting Font and Sizing

To change the font or size of the quantity selector:

.qtydiv label {
  font-family: Arial, sans-serif;
  font-size: 14px;
}

Extending Functionality to the Cart Page

While implementing custom quantity buttons on the product page is straightforward, extending this functionality to the cart page is more complex. It requires modifications to the cart-template.liquid file and additional JavaScript to handle multiple quantity inputs.

If you’re comfortable with advanced theme customization, you can attempt to replicate the product page implementation on the cart page. However, be aware that this may interfere with automatic cart updates and require significant testing to ensure proper functionality.

By following this guide, you should now have stylish and functional custom quantity buttons on your Shopify product pages. Remember to always test your changes thoroughly before pushing them live to ensure a smooth shopping experience for your customers.