How to change quantity selector on cart page

Store Design

Topic summary

A user wants to replace the standard quantity selector on their cart page with plus/minus (+/-) buttons for adjusting item quantities.

Proposed Solution:

Another user provides a detailed 4-step implementation:

  1. Enable quantity selector in theme customizer under product page settings
  2. Modify product-template.liquid - Comment out existing quantity selector code and replace with custom HTML markup for +/- buttons
  3. Add CSS styling to theme.scss for button appearance and layout
  4. Add JavaScript to theme.js to handle increment/decrement functionality

The solution includes code snippets for HTML structure, CSS styling, and jQuery click handlers.

Current Status:

The original poster reports they cannot locate the specified section (product-template.liquid) in their theme files, indicating the solution may need adjustment for their specific theme structure. The discussion remains unresolved as the provided instructions don’t match the user’s theme configuration.

Summarized with AI on November 3. AI used: claude-sonnet-4-5-20250929.
1

i want to change the quantity selector from remove buttoun to ( + - ) plus minus, to add or remove quantity
URL: https://shop.zappenergy.in/cart

Screenshot 2024-12-06 192841.png
Screenshot 2024-12-06 192841.png1902×906 75.9 KB

2

Hello @Emiway1

Follow this:

  1. Go to theme customize theme editor->select product page->tick “Show quantity selector” box from the left side.

steve_michael2_0-1733494390755.png
steve_michael2_0-1733494390755.png515×572 16.1 KB

  1. Go to section->product-template.liquid ->find {% if section.settings.show_quantity_selector %} and comment code that in between condition (only product-form__item–quantity this div). and paste bellow:

          
          

            -
            
            +

3.Go to Asset->theme.scss file and add this code at bottom

.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;border: none;padding: 8px;text-align: center;width: 50px;outline: none;display: inline-block;}
.qtydiv {display: inline-block;padding-right: 15px;padding-top: 10px;}
  1. Go to Asset->theme.js and add this code at bottom:
$('.qtybox .btnqty').on('click', function(){
  var qty = parseInt($(this).parent('.qtybox').find('.quantity-input').val());
  if($(this).hasClass('qtyplus')) {
    qty++;
  }else {
    if(qty > 1) {
      qty--;
    }
  }
  qty = (isNaN(qty))?1:qty;
  $(this).parent('.qtybox').find('.quantity-input').val(qty);
});

If my reply is helpful, kindly click like and mark it as an accepted solution.

If you are happy with my help, you can help me buy a COFFEE

Thanks!

3

Didn’t have this section..
2. Go to section->product-template.liquid ->find {% if section.settings.show_quantity_selector %} and comment code that in between condition (only product-form__item–quantity this div). and paste bellow: