HOW TO CREATE ADD TO CART LINK NATIVELY ON SHOPIFY

January 10, 2022
|
Emmanuel Umukoro


If you are a Shopify store owner looking to build a link that will lead shoppers directly to your cart page along with their selected items preloading into their carts, then this is for you! 


A cart permalink is required to establish a Shopify add-to-cart link. This may be a bit sophisticated for some Shopify users, but it should come easy if you are familiar with JavaScript, Liquid CSS, and HTML. However, let's look at the simplest approach to establishing a Shopify add-to-cart link.


FIRST APPROACH

Your store’s add to cart URL will look like this:


https://www.yourstorenamehere.com/cart/add?id=VARIANTID&quantity=1


1. Rename "YOURSTORENAMEHERE" in the above link with your actual store name or  “www.yourstore.com” with your website URL.


2. Replace VARIANTID with the ID of your product variant.


3. Replace "1" with the quantity of product you wish to add to the cart.


4. If you want to add different products and quantities to the cart:


https://yourstorenamehere.com/cart/add?id=VARIANTID1&quantity=1&id=VARIANTID2&quantity=1


5. Edit "VARIANTID1" and "VARIANTID2," and the quantity in each case.


SECOND APPROACH

While the first approach works just fine, there is a second and noteworthy approach that some Shopify store owners also use to create add-to-cart links. In this case, you will need to use a cart permalink. 


Cart permalink is the solution if you want to link straight to the Shopify checkout screen with a specific cart that already has products in it.  It is also the solution if you are seeking to add a "Buy it now" button in your newsletters or blogs?


So, what are Cart permalinks? Cart permalinks are pre-built links that allow users to instantly access checkout or a shopping cart. These permalinks are best suited for apps that allow customers to buy things from a single merchant in a cart.


Here's an example of a cart permalink:


https://yourstorenamehere.myshopify.com/cart/70881412:1,70881382:1


Its URL format will look like this:


https://yourstorenamehere.com/cart/#{variant_id}:#{quantity}(, ...)


How to append Checkout parameters and cart

Pre-filling any of the checkout fields is as easy as appending checkout query parameters to the URL of the cart permalink. When appending checkout parameters, use the format below:


https://yourstorenamehere.com/cart/{variant_id}:{quantity}?checkout[email]=somebody@store.com&checkout[shipping_address][city]=thisismyhometown


The [email] here stands for any of the form's possible checkout fields, while The [shipping address][city], demonstrates how to use nesting to populate child fields.


Here is a list of checkout parameters that you can prefill

Checkout Parameters Description
checkout[email] Email of the customer
checkout[shipping_address][first_name] Address [first_name]
checkout[shipping_address][last_name] Address [last_name]
checkout[shipping_address][address1] Address [address1]
checkout[shipping_address][city] Address [city]
checkout[shipping_address][zip] Address [zip]



How to discount variant ID

Beyond creating add-to-cart link, there are a few more hacks you can perform with this permalinks such as applying discount to a permalink directly. The discount format is as follows:


/cart/{variant_id}:{quantity}?discount=test


The string value of a discount code is used as the test part.


How to add one product to your cart with a discount


https://yourstorenamehere./cart/VARIANTID1:1?discount=DISCOUNTCODE


How to add two products to your cart with a discount


https://yourstorenamehere/cart/VARIANTID1:1,VARIANTID2:1?discount=DISCOUNTCODE


The number following the ":" represents the quantity selector. So you can replace '1' with the quantity you choose. You can also include tracking parameters as query parameters, add notes and cart attributes. If your store supports customer accounts and the user is not logged in, they will be directed to the login page before proceeding to checkout.


How to find product variant ID


1. Log in to your Shopify admin and navigate to Products > All Products.


2. Choose to a product that has variant.


3. Now choose one of the following options:


  • If you only have one store location, look out for the Variants section of the product detail page and cl ick the Edit icon next to the product variant.


  • If your store has various locations, select the product variant from the Variants section of the product detail page.


4. Take a look at the URL in the address bar of your browser. It should be comparable to:


https://yourstorenamehere.myshopify.com/admin/products/70881382/variants/12345678910111


The number following 'variants/' is the variation ID number


Conclusion

Cart abandonment is a major concern for all e-commerce store owners regardless of their hosting platform and one of its major causes is the lack of a direct add-to-cart link that will enable quick checkout for customers.

Creating this add-to-cart link for your store's cart will improve purchases and decrease cart abandonment. If you want to stay ahead of your competitors, add-to-cart might just be one of the final touches you need to add to improve your customers' experience.

Let's see what you build!

Book a Demo