Add specific item to cart for Shopify

This article describes two methods on how to add an item to the cart on a Shopify store via a click action

At a glance:
Introduction
Method 1: Javascript Click Action
How to locate variation IDs in Shopify

Method 2: Link to URL Click Action

Introduction

Sometimes, you may just want a simple button that can add an item to the cart and then do something specific afterwards. This can also be extended to add multiple items to the cart at once, remove items from the cart and other things. The difference between these two methods is that method #1 does not force a redirect to the Cart page, where as method #2 does force the redirect to the cart page.

Method #1: Javascript Click Action

Follow these steps:

1. Select the element in your design to add a click action to.
2. Select the settings tab at the top right.
3. Choose "Execute Javascript" from the dropdown.
4. Open the code editor

Now copy and paste the following in the code editor:

<script>

/* 
replace the variantId value with your shopify variant ID 
you want to add to the cart.  Ensure it's the variant ID not the parent ID
*/

var variantId = "41299698254007";
var variantQuantity = 1; // Replace with your quantity value

fetch('/cart/add.js', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({ id: variantId, quantity: variantQuantity })
})
.then(response => {
    if (response.ok) {
        // uncomment below if you'd like to redirect after adding to the cart
        // top.location.href = "/cart"; // Redirect on success
        return 'product added successfully';
    } else {
        return response.json().then(error => {
            console.error('Error adding to cart:', error);
            // uncomment below if you'd like to show an alert if there is an error trying to add to cart
            // alert('Error adding to cart');
        });
    }
})
.catch(error => {
    console.error('Network or server error trying to add to cart:', error);
});

</script>

How to locate variant IDs in Shopify

To find the variant ID for a single product with no variants, follow these steps:

1. Add the product you want to your cart: Go to the product page and add the product to your cart.
2. Navigate to your cart: Go to your store's cart page at https://yourstorename.myshopify.com/cart.
3. Click on the product: In the cart, click on the product you just added. This will take you to the Product Detail Page (PDP).
4. Check the URL: In the URL of the PDP, you will see the unique product variant ID. It will look something like this: https://yourstorename.myshopify.com/products/product-name?variant=00000000000000. 

Method #2: Link to URL Click Action

Justuno's button element has multiple uses. One of which includes the ability to leverage our Link to URL (click action) to automatically add specific items to a shoppers' cart.

Unlike Justuno's Product Recommendation feature, this upselling method requires a lot less inputs as it pulls a specific product using a static URL. This is especially suitable for stores with smaller product catalogs.

Using this in conjunction with a URL targeted workflow ensures the offer is only shown when shoppers are on specific product pages.

1. In the Design Studio, open the Add an element menu on the left sidebar and find the Button option under Basic Properties. Drag and drop the Button option into your design canvas.
   
2. With the Button element selected, navigate to the settings tab on the right side menu and find the Click Action drop down menu.
   
   
3. Set the click action to Link to URL. In the URL field input the following: 

   https://[website]/cart/add/[variantid]

   Replace [website] and [variantid] with your website and product variant id respectively (e.g. https://justuno.com/cart/add/123456789). 
   
   
4. Personalize the text and imagery to match your branding, Save/Publish and your design is all set!