This is not an official feature (to be clear - this isn't an officially supported script/workaround - but is provided here as a convenience for users wanting to try this custom script out to add the functionality), but shows a way where you can have multiple add-to-cart buttons for different products or variants. To download the template which contains the script, go to::

You will need to unzip and then import the .json file as a page.

The script itself is very powerful and has lots of different options. However, in order to make it work you will need to follow the instructions in the video and within the script itself.


Here is the raw script:


////1. Make sure that you give the button the class of extra1 or extra2 or extra3 etc.
////2. Change the product that is to be add. In admin go to product and add .xml look for the variant and number that you want and use that number eg. <variant> <id type="integer">5106536972317</id>
////3. Decide if you want to redirect and where to. Usually to the checkout page
////4. Decide if you want to clear the cart (advised) before adding

$( document ).ready(function() {
//change extra1 according to the class you gave the button


var productQuantity=$( "#select_117" ).val() ;

//this clears this cart first. If you don't want to clear it them remove /cart/clear.json

).then(function () {
type: 'POST',
url: '/cart/add.js',

data: {
// you can change the quantity and the product id here
quantity: productQuantity,
id: 16380657598521

// change the url for the checkout here. Advised to use a funnel checkout
window.location.href = "";