Cart - Use permalinks to pre-load the cart

[TyW]

Caution

This is an advanced tutorial and is not supported by Shopify. Knowledge of HTML, CSS, JavaScript, and Liquid is required. Consider hiring a Shopify Expert if you aren't comfortable doing the steps in the tutorial.

What is a cart permalink?

A cart permalink takes your customers directly to the first page of the checkout screen with items pre-loaded into their cart.

Have you ever wanted to link directly to the Shopify checkout screen with a specific cart already loaded with items? Have you ever wanted to put a "Buy it now" button in blogs and newsletters? Have you ever wanted to provide an easy reorder link to customers? Cart permalinks are the answer.

This is what a cart permalink looks like:

http://your-store.myshopify.com/cart/70881412:1,70881382:1

Where 70881412 is the product variant's unique ID and 1 is the quantity.

So the format of the url is:

http://yourstore.com/cart/#{variant_id}:#{quantity}(,...)

Appending cart and checkout parameters

You can pre-fill any of the checkout fields, simply by appending checkout query parameters in the cart permalink URL. When appending checkout query parameters, use the following URL format:

/cart/{variant_id}:{quantity}?checkout[email][email protected]&checkout[shipping_address][city]=thisismyhometown

where [email] represents any of the possible checkout fields in the form, and [shipping_address][city] shows how you can use nesting to populate child fields.

List of supported checkout parameters

You can pre-fill any of the following query parameters:

Checkout parameter	Description
checkout[email]	Email of the customer making the checkout.
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][address2]	Address [address2].
checkout[shipping_address][city]	Address [city].
checkout[shipping_address][zip]	Address [zip].

Applying a discount

You can directly apply a discount to a cart permalink.

The following format applies the discount:

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

where test is the string value of a discount code.

Note: Notes, cart attributes, and tracking parameters can be added as query parameters as usual. If customer accounts are enabled on your website, and the user is not logged in, they will see the login page before reaching the checkout.

Adding a "Buy this" link to a blog post

1. From your Shopify admin, go to Online Store > Blog Posts.
2. On the Blog posts page, either add a new blog post or click on an existing blog post.
3. In the Rich Text Editor, under the "Content" header, click the HTML button:
   
   
   
   
4. Add your link. It should look something like this:
   
   

   <p><a href="http://your-store.com/cart/70881412:1">Buy this item</a></p>

5. Save your changes and test it out in your store.

Adding a "Reorder" link

You can add a "reorder" link right in your theme's customers/order.liquid template for each line item in the order.

1. From your Shopify admin, go to Online Store > Themes.
2. Find the theme you want to edit, and then click Actions > Edit code.
3. Under the Templates folder, locate and click on customers/order.liquid to open it in the online code editor. Don't see the template? Create one by clicking the Add a new template link.
4. In the online code editor, paste the following piece of code where you would like your link to appear:
   
   

   <a href="/cart/{{ line_item.variant_id }}:{{ line_item.quantity }}">Reorder this</a>

5. Click Save to confirm your changes.

Conversion tracking

Wish to add some tracking info to the URL, which will then show up on the order details page in your admin, when orders come in?

Use a cart note:

/cart/70881412:1,70881382:1?note=came-from-newsletter-2013-02-14

Or use a cart attribute (you can have several of those):

/cart/70881412:1,70881382:1?attributes[where-from]=came-from-newsletter-2013-02-14&attributes[some-other-key]=some-value

The cart note and cart attributes are shown on the order details page under Order Note.

Or use the 'ref' parameter:

/cart/70881412:1,70881382:1?ref=came-from-newsletter-2013-02-14

The ref value is shown as a referral code in the Conversion summary section on the order details page. Click View conversion details and then click View full sessions to view the session details page:

Sales attribution

To attribute an order to a sales channel or app, you can add an additional parameter to the permalink. You can view sales attributions in the Sales by Channel report, which shows the name of the channel or app that the customer used to place their order. Sales attributions also appear on the sidebar in your Shopify Home. You can specify a storefront access token in the cart permalink as shown in the following example:

/cart/70881412:1,70881382:1?access_token=#{access_token}
 

Can I let the customer edit quantities?

You can't. Quantities cannot be edited when the customer follows a cart permalink.

Finding a variant ID

Click here to learn how to find a variant ID from within your Shopify admin.

[jhcao23]

Hi @TyW will shopify publish any official docs about the cart permalink?

[chenster]

---

@jhcao23 wrote:

Hi @TyW will shopify publish any official docs about the cart permalink?

---

https://shopify.dev/tutorials/build-a-sales-channel-with-cart-permalinks

[iamabushead]

Hi Everyone,

I'm just adding a further note on this thread with the URL structure that worked for me.

I benefited from the helpful examples above, but needed to do a slight modification to the above to get this working for me.

I wanted a URL which would

• Clear the current cart
• Add multiple items, potentially with a specific quantity of each
• Take the user to the cart page (not the start of checkout).

The URL I used to achieve this was:

https://www.yourshop.com/cart/clear?return_to=/cart/update?updates[36959969804442]=2%26updates[36959... 

The key learning/amendment from the above comments for me was that rather than an ampersand character (&) in the URL I needed to encode that character to %26 and use that instead to get multiple variants added to the new cart. Otherwise only the first item was being added to the cart.

Hope it helps someone else.

[chenster]

Nice hack. It works. It lands on the cart page instead of checkout page.

Here's a wiki of manipulating permalinks in Shopify :

Permalink with some products, quality, addresses, email and a discount code (disc to be created beforehand) -> Land on checkout page
https://xyz.myshopify.com/cart/37415174176960:1,37415180665024:2,37415188103360:3?checkout[email]=so...

Update an item to a quantity of 10 -> Land in cart
https://xyz.myshopify.com/cart/update?&updates[37415174176960]=10

Remove an item from the cart by set quantity to 0 -> Land in cart 
https://xyz.myshopify.com/cart/update?updates[37415174176960]=0

Remove an item from the cart and then add 3 -> Land in cart
https://xyz.myshopify.com/cart/update?updates[37415174176960]=0&updates[37415174176960]=3

Clear the cart and do a parameter based redirect with return_to a preloaded cart in Checkout page -> Land on checkout page
https://xyz.myshopify.com/cart/clear?return_to=/cart/37415174176960:1,37415180665024:2,3741518810336...

Clear cart, add multiple items, and land in cart page. Must encode & character to %26 or only the first item is added to cart.
https://xyz.myshopify.com/cart/clear?return_to=/cart/update?updates[37415174176960]=2%26updates[3741...

Let me know should anything else I can add to wiki.

[Bhuvanesh_Mille]

Something people asked for earlier, and something I want, is to simply add the item to the cart but do not take the user off the current page. Anyone have any ideas?

[chenster]

---

@Bhuvanesh_Mille wrote:

Something people asked for earlier, and something I want, is to simply add the item to the cart but do not take the user off the current page. Anyone have any ideas?

---

Hmm.. I missed it. But what would be a good use case?

[Bhuvanesh_Mille]

The use case, in my case anyway, would be to let people add multiple items without needing to go back and forth to the cart. I have a list of 2,000 digital song downloads and people usually want to buy between 10-100 at a time. I don't want them to go to the cart after each selection.

[Jesse_Meyers]

Hi Bhuvanesh_Mille, what I believe you're looking for is the Shopify Ajax API. The links discussed in this thread are for use outside of a Shopify site (from an email for example) to direct someone back to your site and add items to the cart at the same time. Once a customer is already on the site then you can use the Ajax API to add products without leaving the page.

[Bhuvanesh_Mille]

Thanks! I thought I was missing something.

[chenster]

---

@Jesse_Meyers wrote:

Hi Bhuvanesh_Mille, what I believe you're looking for is the Shopify Ajax API. The links discussed in this thread are for use outside of a Shopify site (from an email for example) to direct someone back to your site and add items to the cart at the same time. Once a customer is already on the site then you can use the Ajax API to add products without leaving the page.

---

Thank you. I came to the same conclusion after found this thread on 'add to basket instead of creating cart'. 

My question is, can it be used for customize the cart page such as adding 'Save Cart' button or adding a checkbox to user agreement etc?  

[alvintyc]

Does anyone have a solution to a permalink to adding to cart, returning to a page then adding UTM parameters to the link?

https://xyz.myshopify.com/cart/update?&updates[37415174176960]=10&return_to/pages/xyz&utm_source=abc&utm_medium=abc&utm_campaign=abc

doesn't work

[chrisfloat]

I noticed when using these links that the existing cart gets deleted.

Is there any way to use the links and also keep existing cart?

[RobDukarski]

@chrisfloat @joshchretien you can use the Cart Add URL for this instead.

You can construct a URL like this:

https://example.myshopify.com/cart/add?id[]=5475&return_to=/discount/examplediscount%3fredirect=/pag... 

Which will add the product with the variant ID of "5475" to the cart, attempt to add the discount code "examplediscount", and redirect the customer to "/pages/about-us".

This approach is useful when you are live selling and want the customers to view content on an landing page for example to potentially add upsell products. Along those lines I would recommend using a redirect URL for it so that it conceals the contents of the URL and can be changed at a later date for other things like product drops.

Another thing to note about this approach is that you can add multiple products with varying quantities, line item properties, and subscription selling plans if you wanted to. Hosted Shopify is amazingly powerful and their Cart API is one of my favorite aspects!

Hope that helps!

[SkyImageLab]

Hello thank you for all this information.

Is there a way to create a hyperlink that adds an item to the cart without taking them away from the current page? If a customer chooses a large variant on my site, a crate would needed to be added to cart. I have a box that appears that shows "hey a crate is required for this size <a href="???"> Add to crate to cart ($50)</a>". I do not want to send my customer away from the current product page.

Thanks for all the help!

[Jesse_Meyers]

It may be best to use Shopify’s Cart API for that use case. See documentation here: https://shopify.dev/api/ajax/reference/cart

[onescales]

yes we made a tool for this: https://www.youtube.com/watch?v=E9DC631wYuU

[hairways]

Hi Rob,

I know this a couple of years ago, but I was hoping you could help me if possible.

I'm trying to keep the current basket while adding a link that adds multiple products, however it does not work the same way with the /add URL as it does with the /update URL. It simple gives and error message.

Ultimately I want to make a URL that adds multiple items (and quantities) to the current basket without taking away the contents.

I'm trying this;

https://store.com/cart/add?id[]=48578639298870=2&add?id[]=48588645794102=3

this work when you take away everything up to the quanity entry. example; https://store.com/cart/add?id[]=48578639298870 works.

[tschach]

Thanks for this...this is partly what I'll need. However, we are running Shopify in headless mode. This means we don't have a store on Shopify all we use are buy-buttons.

So when I use the buy-button builder I can check that it directly forwards to the checkout-page. Do something like:

https://mydomain.myshopify.com/27337588471/checkouts/0739e8c6084f8a2857ef841954c2474c

Which then includes the product I selected before via pressing the button. This forward to the checkout page will be initiated when you set "buttonDestination": "checkout" in your setup.

When I use the instructions on this page, it tries to open the Shopify webstore pages which we don't have and which is not exactly what I need. Is there any way to add a product via a link and then go to the checkout page?

Thanks, Carsten

[mikeyB999]

Hi - did you ever get an answer to this one?

i managed to generate a link that took me to the preloaded cart with product and quantity but it always shows produce as OUT OF STOCK, even though it’s not. 

thanks. 

[frst_10]

@mikeyB999 - double-check and make sure the products are available on the "online store" sales channel. If they're not, Shopify will return an out of stock message 

[mikeyB999]

thanks - i solved it in a different way - used javascript SDK and the APIs to build a checkout and populated it with the items i wanted in there and push customer to a web window with the checkout.

works great and this way  can control everything....

[EbonyMaw]

@TyW  Thanks for the article.

This is something that would work really well for our unique situation because we want to introduce an additional step before checkout. The one checkout attribute that seems to be missing from here is the State/Province. How can we set that using permalinks?

[Ginko]

It seems to work using these parameters 

&checkout[shipping_address][country]=US&checkout[shipping_address][province]=NY

Make sure the use the two-letter codes!

[EbonyMaw]

Thanks Sebastian! That works!

[Vishakha]

its not working, cannot pre fill state

[Ginko]

Hello,

Thank you for the article. However, as mentioned by the previous poster, we are not able to set the Country/Region and Province fields.

How can we set this using the permalinks?

Thank you!

Sebastian

[brendonwbrown]

This is a fantastic guide, thank you. 

Unfortunately when I attempt to follow it I am redirected to checkout immediately with that single item.

I am looking to simply add the item to the cart.

[Yahya53]

@brendonwbrown Did you find a way to add the item to the cart?

[brendonwbrown]

Indeed I have!

Get your variant ID as in the tutorial above and format your url as below:

https://domain.com/cart/add?id[]=variantid

You can add multiple products 

https://domain.com/cart/add?id[]=variantid&id[]=variantid&id[]=variantid

[mjniuz]

How to add custom currency for checkout url?

[ngoenka]

I've been able to add multiple items w. differing quantities to cart by using the below:

https://groupbazaar.in/cart/update?updates[variant_id]=qty&updates[variant_id]=qty&updates[variant_i...

replace variant_id & qty

However, the problem is that it adds these items in addition to the already existing items in the user's cart.

How do I construct the URL so that shopify clears all the items in the user's cart & then add the selected items. I intend to share this URL as a Whatsapp message/share & hence, needs to very simple for users.

Any help would be much appreciated!

[Jesse_Meyers]

Hi @ngoenka I found a solution to make sure you clear their cart first of the items that you are trying to add so that you don't just increase quantity of items already there (if they view in the same browser). All you need to do is put the variant in your URL twice with the first instance being for 0 quantity.

Add three cases of Soylent Drink Cacao
https://soylent.com/cart/update?updates[8114434703466]=3

Remove any cases of Soylent Drink Cacao from the cart
https://soylent.com/cart/update?updates[8114434703466]=0

Remove any cases of Soylent Drink Cacao from the cart and then add three cases
https://soylent.com/cart/update?updates[8114434703466]=0&updates[8114434703466]=3

[ngoenka]

This is great, thanks!

I've actually implemented a share cart feature so that users can share this
via Whatsapp. Now I just need to integrate a URL shortener as otherwise the
share links are massive! Any thoughts / recos for that?

[AvocadosLab]

Hey @ngoenka , are you using any public app to share cart via Whatsapp or it's a custom implementation? App you are using would need to integrate with URL shortener APIs (Ex. Bitly) in that case if you wish to shorten a URL further.

[PaulNewton]

@ngoenka @Jesse_Meyers You can clear the cart and do a parameter based redirect with return_to

try this https://soylent.com/cart/clear?return_to=/cart/update?updates[8114434703466]=2

[JAS_Technology]

Hi there @ngoenka. Just FYI. ZipLinks has been updated to allow for the optional emptying of a customer's cart prior to adding the configured items on a link. 

Check it out: https://apps.shopify.com/permalinks

Enjoy and share! 🙂 

[felipebrahm]

I'm trying to find a way to add a product with line item properties to a user's existent cart using a link (without clearing their cart). Thanks to this thread I learned I can add items to an existent cart using this link: https://example.com/cart/add?id[]=variantid 

But does anyone know if there's a way to include line item properties in that link?

[YupanaEngineer]

Hello,

We have previously done something similar including adding custom line item properties to the permalink, feel free to send us a PM if you would like to test our beta? 

[smax]

Below are some example links to do various things that have been useful for me lately. These may be a bit redundant with other posts, just putting them in one place.
{These parts, including the curly brackets are placeholders.}

Redirect to url and applies coupon
https://domain.com/discount/{DISCOUNT CODE}?redirect=/{URL FOR REDIRECT}

Applies discount code and adds product and goes to cart
https://domain.com/discount/{DISCOUNT CODE}?redirect=/cart/update%3F%26updates[{VARIANT ID}]=1

Removes products in cart, adds product of variant and discount code:
https://domain.com/cart/{VARIANT ID}:{QUANTITY}?discount={DISCOUNT CODE}

Adds products and goes to checkout:
https://domain.com/cart/update?&updates[{VARIANT ID}]={QUANTITY}

[RareArtifact]

I've noticed there's a problem collecting referrer and landing page data with the order when Permalinks are used, does anyone have a workaround?

If you look at the XML or JSON for an order where the person went the "normal" route (adds to cart, then checks out), it looks like this:

As you can see, this order came from a Facebook post. They landed directly on the product page, added to cart, and checked out. This is all correct.

But if the user clicks a permalink (instead of adding to cart) the order XML looks like this:

The original referrer is dropped and replaced with the landing page, and the landing page is replaced with the permalink URL. This seems to be because of the redirect after the permalink. Our permalink is to /cart/variantid:qty then the user gets redirected to /checkout/etc...

If this is in any way confusing because I blocked out the domain and product, here's the rundown:

1. User on Facebook visits domain.com/products/myproduct.
2. User adds to cart and checks out.
3. Order XML shows referring-site as facebook, and landing-site as domain.com/products/myproduct. This is all correct.

But when a Permalink is used, this happens:

1. User on Facebook visits domain.com/products/myproduct.
2. User clicks permalink to /cart/variantid:qty and checks out
3. Order XML shows referring-site as domain.com/products/myproduct and landing-site as /cart/variantid:qty

Basically when you use a permalink, at the point where the permalink redirects the user from /cart/variantid:qty to /checkout, for some reason Shopify is dropping the referring-site and landing site values, then re-establishing them as if it were a brand new session -- thus making the referring-site domain.com/products/myproduct and the landing-site /cart/variantid:qty

It's happening consistently on every single permalink in our store, for every product. If the user checks out with a permalink, original referring-site and landing-site are lost, and replaced with the page they clicked the permalink from. I'm not sure what to do about it, because a lot of our landing pages use permalinks and it's really starting to affect the reporting.

[ritsybitsy]

Hi,

Anyone found a way to add Line Item Properties via the permalinks?

That's something we desperately need!

[SkyeC]

Does the cart URL (not checkout) support adding a coupon code? 

The "discount=code" in the checkout URL format works fine but I can't get it to work for any cart URLs. 

Is it supported? 

[frst_10]

that's a good question - pretty sure you wont' be able to add a discount code to a cart permalink. however, this should solve your need: https://apps.shopify.com/permalinks

[chenster]

---

@SkyeC wrote:

Does the cart URL (not checkout) support adding a coupon code? 

The "discount=code" in the checkout URL format works fine but I can't get it to work for any cart URLs. 

Is it supported? 

---

I summarized here

https://community.shopify.com/c/shopify-design/cart-use-permalinks-to-pre-load-the-cart/m-p/1038264/...

[SkyeC]

@chenster ya i saw your post and bookmarked it but it didn't address coupons in the cart urls. Other posts on the web seems indicate the "discount=discount-code" parameter works but I've never had it work. 

I guess you could use the coupon url then redirect to your cart URL? 

STOREURL/discount/DISCOUNT_CODE?redirect=ENCODED-CART-URL

[Elgert]

If you have found a solution, would be thankful if you share.

[joshchretien]

Same. I'm using this as a "hey dont leave yet, add this item to the cart and get a discount" kind of deal. I'm applying a discount and the item to cart. But this is clearing the existing items.

[danstoj]

Can you do a discount and conversion tracking in the one link?

[bradlau]

@danstoj Did you find a way to do a discount and conversion tracking in the one link?

The article says "Notes, cart attributes, and tracking parameters can be added as query parameters as usual," but it's not working for me. 

For example, this adds the products & quantities to checkout, but doesn't apply the discount:

/cart/{variant_id}:{quantity},{variant_id}:{quantity}[email protected]

If I remove the [email protected] it does apply the discount. Anyone know what I'm doing wrong?