Is it possible to add a Quantity Selector to your product on the collection page?

Highlighted
New Member
1 0 0

Hey Guys,

 

I am wondering if you can add a Quantity Selector to your product on the collection page?

 

Basically i want to limit my clicks when adding products to cart.

 

I want to be able to press +/- which would be below the product photo on the collection page, avoiding going to another page to select qnty then adding to cart.

 

This website does it perfectly.

https://happyapple.myfoodworks.com.au/

 

Any help would be greatly appreciated.

 

Thanks,

Sam

0 Likes
Highlighted
Shopify Expert
808 67 188

Here's how I would approach it:

 

1) Find the javascript that sends executes when you click the add to cart button on your collection page. To add a product to cart from the collection, an ajax request needs to be made sending the product data.

 

2) Build the quantity element.

 

3) Edit the code from step 1 to include a quantity variable. Use javascript to read the quantity from the quantity selector and put that number in the quantity field.

 

If your not familiar with the Shopify Ajax API this will help: https://shopify.dev/tutorials/develop-theme-getting-started-using-ajax-api

Founder of Speed Boostr (Shopify optimization and dev agency).
Creator of Theme Scientist (A/B testing app).
Creator of Order Automator (app that auto tags + fulfills orders, send emails).
Creator of Tip Jar (add a tip button to your store).
Creator of Shopify Analyzer (free performance analysis tool).
My team also builds custom apps and automated solutions.
Enjoy the adventure!
0 Likes