Increase AOV with multi-product add-to-cart permalinks for your Shopify store

Running on Shopify and want a quick way to increase AOV?

Here are two permalink schemes that will allow you add mutliple variants and quantites to a cart.

You can use these custom permalinks anywhere. Custom theme templates, emails, social posts and so forth. You can dynamically create a bundle of products that get added to the cart all at once with no additional setup.

There are two URL schemes.

Add order lines

Add a product to the cart or, if the product already exists in the cart, increment the quantity of the product on the cart order line.

/cart/add?items[][id]=123&items[][quantity]=1&items[][id]=123&items[][quantity]=3

The numbers 123 and 456 represent Shopify variant ID's which can be found in the Shopify Admin URL when viewing the variant edit page.

See the Shopify URL path below.

/admin/products/11111/variants/88888

In the above example, 11111 is the product ID and 88888 is the variant ID.

Update order lines

Update quantity for specific variants in the cart or, if the product already exists in the cart, update the quantity for that order line.

/cart/update?updates[12345678910]=10&updates[12345678911]=2

In the above example, [12345678910]=10 represents the variant id 12345678910 and the quantity 10.

Limitation: If you already have a quantity of 10 for a given variant, the update method override the current quantity in the cart, with the quantity specified in the URL.

A quick overview of Products vs Variants vs SKU vs Order Lines

Both of these schemes rely on variant ID's. Variants are children of Products and have a "one-to-many" relationship. One product, to many variants.

For example a product called, "Super Cool T-Shirt" will can have many variants. These variant options can be color and size.

• Color: Red, Blue, Green
• Size: S, M, L, XL, XXL

A variant represents a single item or SKU (Stock Keeping Unit) and can be dislayed as Super Cool T-Shirt - Gray L to the customer, Variant ID to the ecommerce system and SKU as a business key (accounting, business intelligence etc).

We want to determine exactly what should be added to the cart, so we use Shopify's variant ID which is a Shopify system key.

There is a 1:1 relationship between a variant and a SKU in most ecommerce setups. You can have what is called a KIT SKU, which is a parent SKU that has many children SKUS.

Order lines have their own system keys called order_line_key or something to that effect. Because each order line can be unique due to taxes, discounts and such, they are recorded in an order_line table and are children to the order_header table which stores all of the summary information for an order. Usually each order_line has an order_id which can be used to join to the order_header table.

Shopify now have official documentation on Creating Cart Permalinks. It's also recommended that this approach replace Shopify's "Buy Button" feature.

Adding a subscription with a selling plan

If you're selling subscriptions on Shopify, you'll need to pass in the selling plan id associated with the variant also.

/cart/add?items[][id]=123456789&items[][quantity]=1&items[][selling_plan]=555

You can also add &return_to=/checkout to send customers straight to the checkout.

If you need to clear the cart, you can hit the endpoint /cart/clear? instead with a return_to= param structured in the following way:

/cart/clear?return_to=/cart/add%3Fitems%5B%5D%5Bid%5D%3D123456789%26items%5B%5D%5Bquantity%5D%3D1%26items%5B%5D%5Bselling_plan%5D%3D555%26return_to=%2Fcheckout

Note: we need to encode the URL after the ? so that the browser doesn't confuse params in the return_to URL with the first request of /cart/clear. Technically we are having Shopify run through three consecutive calls in one URL here. The first is /cart/clear, the second /cart/add/ and the third /checkout.

If you have a discount you want to automatically add to a cart, while also adding items to the cart, use the following URL:

/discount/DISCOUNTCODEHERE?redirect=/cart/add%3Fitems%5B%5D%5Bid%5D%3D123456789%26items%5B%5D%5Bquantity%5D%3D1%26items%5B%5D%5Bselling_plan%5D%3D555

So we're applying a discount to the cart, then adding an item to the cart. By default the customer will land on the /cart page. If you'd like to redirect them somewhere else, like /checkout for example, add this at the end of the URL: %26return_to=/checkout

Add discount > add items to cart > go straight to checkout

Full URL example:

/discount/DISCOUNTCODEHERE?redirect=/cart/add%3Fitems%5B%5D%5Bid%5D%3D123456789%26items%5B%5D%5Bquantity%5D%3D1%26items%5B%5D%5Bselling_plan%5D%3D555%26return_to=%2Fcheckout

AJAX API

You can also pass a json object through to the the cart page via /cart/add.js.

This will allow you to increment quantity along with selling plans.

You can read more about this method on my post Add multiple products, subscriptions and qty to a Shopify cart, via Javascript Cart API

fetch('/cart/add.js', {
    method: "post",
    headers: { 'content-type': 'application/json' },
    body: JSON.stringify({
        items: [
            {
                id: 123456789,
                quantity: 5
            },
            {
                id: 987654321,
                selling_plan: 222,
                quantity: 3
            }
        ]
    })
})