+ and - symbol next to quantity selection in cart brooklyn theme

Store Design
, , , , , , , , , , , , , ,

Topic summary

A user seeks help adding plus (+) and minus (-) buttons next to the quantity selector on their cart page in the Brooklyn theme.

Solution Provided:
Another user offers a step-by-step customization approach:

  • HTML modification: Replace existing quantity box code in main-product.liquid with new markup featuring minus/plus buttons surrounding the quantity input field

  • CSS styling: Add styles to theme.scss.css for button appearance, spacing, and layout (inline-block display, cursor pointer, specific padding/margins)

  • JavaScript functionality: Implement click handlers in theme.js to increment/decrement quantity values, with validation to prevent quantities below 1

The helper notes they can implement the solution if the original poster isn’t familiar with coding. All code snippets are provided but appear partially reversed/garbled in the conversation text. The discussion remains open pending confirmation of implementation.

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

Could anybody help me code a plus and minus symbol next to the quantity selection in the cart page that when clicked adds or removes additional products from the customer’s cart?

Preferably like this: - (QUANTITY) +

URL: Shopcutify.com

Thank you!!

2

Hi @StoreHelpNeeded

According to the theme file structure you need to customize the theme file called main-product.liquid and find the quanity box code and replace with the below code step by step

1- replace below html code


          
          

            -
            
            +

Add Css code in your them file calledt heme.scss.css

.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;}

Add JS code into your them file theme.js

$('.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);
});

hit save and thats it… if you are not able to do that and not familiar with coding do let me know i can do it for you.

Thanks