How can I add a quantity selector to the Impact theme cart?

Store Design

Topic summary

A user purchased the Impact theme and discovered it lacks +/- quantity selector buttons in both the cart drawer and cart page—a feature they expected based on experience with other themes.

Current State:

  • The cart only displays a plain text input field for quantity
  • Product pages already have functioning +/- buttons with proper code
  • Simply copying the product page code to the cart doesn’t work—buttons appear but aren’t functional

Technical Guidance Provided:
Multiple respondents confirmed this requires custom code modifications:

  • The product page quantity selector code exists but needs adaptation for cart context
  • Two implementation approaches: with page refresh (simpler) or without refresh (requires JavaScript)
  • Solution involves keeping the original input field and adding +/- buttons with JavaScript to update cart values
  • Key difference: product pages handle single items while carts need variant ID tracking for multiple items

Status:
Several users offered coding assistance. One developer shared a screenshot of their completed implementation for a client. The original poster was asked to share theme files and preview link for specific help, but the thread remains open with no final solution posted publicly.

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

Hi,

Bought the Impact theme after modifying it to my needs. Wanted to go live with the site yesterday but just noticed (dumb I know!) that the cart (both drawer and cart page) don’t have the + - quantity buttons to remove or add products, which is a huge dealbreaker for me. Tried googling a bit but only find options about either moving or removing the quantity selector from pages and not adding one. Hope someone can help me out!

2

There is built in functionality for quantity selectors in your theme :slightly_smiling_face: Do you mean that you would like to have a + and - for quantity changes?

Happy to help you further, do you mind posting a print screen of the current look of the cart?

1 Like
3

Thanks for the reply! I worded it poorly and yeah I did mean + -

ssss.PNG
ssss.PNG504×113 8.16 KB

I honestly didn’t even know there were themes that did not have the + - since even free themes have it so it wasn’t something I noticed until I did several test orders.

4

Hi,

From my understanding you want to add quantity control on cart page and cart drawer, which I believe is more work than just adding some code. Basically there are two ways or two designs that you need to decide on:

  1. Quantity selector with no refresh after changing quantity (complex and need JavaScript)

  2. Quantity selector with refresh page after change happens (much more accessible but still needs code changes)

if you can share your theme file code for this file I might be able to help:

  1. main-product.liquid
  2. cart.liquid

and preview link of your theme

5

Awesome, thanks for the image! :slightly_smiling_face:

The ± should be quite simple to implement as you should have the code in the product template file. Inside “Edit code” for your theme, see if you can find the quantity selector for the product page. Then implement the quantity selector in the cart by replacing the current number field. Make sure to save backup of it as you will need to make some adjustments to make it work.

If you want help to implement it, please let me know :slightly_smiling_face:

Screenshot 2024-01-10 at 16.16.22.png
Screenshot 2024-01-10 at 16.16.22.png935×697 53.5 KB

6

Thanks again, the code is as follows for my product page:

{% render 'icon' with 'minus', width: 10, height: 2 %} {% render 'icon' with 'plus', width: 10, height: 10 %}

This is the code for my cart page:

<input class=“quantity-input” type=“text” is=“quantity-input” inputmode=“numeric” {% if line_max_quantity != blank %}max=“{{ line_max_quantity }}”{% endif %} data-line-key=“{{ line_item.key }}” aria-label=“{{ ‘cart.order.change_quantity’ | t | escape }}” value=“{{ line_item.quantity }}”>

I can just copy paste the code from the product page to the cart page but then it doesn’t really work, I can understand some code but not really write it so I figured it wouldn’t work but tried it anyways. But yeah it does seem to need some adjustments. If I simply add it you get the screenshot below

ssssss.PNG
ssssss.PNG626×213 11.7 KB

If I replace the field like you mentioned I get

sssssss.PNG
sssssss.PNG672×187 11.6 KB

Both are not connected to the cart in any way, the buttons don’t do anything. Any help is appreciated :wink:

7

Thanks a lot! I can’t seem to make a preview link from my phone, I will post it when back at the office.

1 Like
8

Copy and pasting won’t work as the product page has only one product where variant ID is easy to get, but in the cart, you need to adjust the code to add those accordingly. I recommend adding the above code by adding a variant ID of the item in the cart and creating JS to update the cart. Let me know if you need help with the code.

1 Like
9

Yes, some tweaking is required :slightly_smiling_face: Would recommend keeping the original input field in the cart and adding the 2 buttons + and -.

Then writing a bit of JavaScript to increase the value of the input.

If you want, I can help you do it.

10

Hi guys. Could you please share this solution or files? Thank you

11

How much would it cost in USD ? Just for single change of the cart buttons .

12

Hi @Samir90

Recently, I have fixed this issue for one of my client. If you still facing this issue then please let me know I will definitely help you.

Screenshot_1.png
Screenshot_1.png1268×537 22.2 KB

Thanks

1 Like
13

Hi,

I have been troubled by the same problem, may you share the code snippets ?

I am sincerely appreciative.

14

Yes I will definitely help you please share store url. So I can let you know exactly

1 Like