Cart - Use permalinks to pre-load the cart

[TyW]

Caution

This is an advanced tutorial and isnot supported by Shopify. Knowledge of HTML, CSS, JavaScript, and Liquid is required. Consider hiring aShopify Expertif 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]=somebody@store.com&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

wheretest是一个折扣代码的字符串值。

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欧宝体育官网入口首页>Blog Posts.
2. On theBlog postspage, 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:
   
   

   Buy this item

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

Adding a "Reorder" link

You can add a "reorder" link right in your theme'scustomers/order.liquidtemplate for each line item in the order.

1. From your Shopify admin, go to欧宝体育官网入口首页>Themes.
2. Find the theme you want to edit, and then clickActions>Edit code.
3. Under theTemplatesfolder, locate and click oncustomers/order.liquidto open it in the online code editor. Don't see the template? Create one by clicking theAdd a new templatelink.
4. In the online code editor, paste the following piece of code where you would like your link to appear:
   
   

   Reorder this

5. ClickSaveto 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:

/车/ 70881412:1 70881382:1吗?note=came-from-newsletter-2013-02-14

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

/车/ 70881412:1 70881382:1吗?属性(从)=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 underOrder Note.

Or use the 'ref' parameter:

/车/ 70881412:1 70881382:1吗?ref=came-from-newsletter-2013-02-14

The ref value is shown as a referral code in theConversion summarysection on the order details page. ClickView conversion detailsand then clickView full sessionsto view the session details page:

Sales attribution

To attribute an order to asales channelor app, you can add an additional parameter to the permalink. You can view sales attributions in theSales by Channelreport, 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 yourShopify Home. You can specify astorefront access tokenin the cart permalink as shown in the following example:

/车/ 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 hereto learn how to find a variant ID from within your Shopify admin.

[jhcao23]

Hi@TyWwill shopify publish any official docs about thecart permalink?

[chenster]

---

@jhcao23wrote:

Hi@TyWwill shopify publish any official docs about thecart 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.

我受益于上述有用的例子,但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%26or 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 butdo nottake the user off the current page. Anyone have any ideas?

[chenster]

---

@Bhuvanesh_Millewrote:

Something people asked for earlier, and something I want, is to simply add the item to the cart butdo nottake 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 theShopify 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_Meyerswrote:

Hi Bhuvanesh_Mille, what I believe you're looking for is theShopify 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@joshchretienyou 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 cartwithout 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 Add to crate to cart ($50)". I do not want to send my customer away from the current product page.

Thanks for all the help!

[Jesse_Meyers]

最好使用Shopify购物车的APIuse case. See documentation here:https://shopify.dev/api/ajax/reference/cart

[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....

[公祭活动nyMaw]

@TyWThanks 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!

[公祭活动nyMaw]

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.

我们如何设置这个使用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]

@brendonwbrownDid 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@ngoenkaI 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_MeyersYou can clear the cart and do a parameter based redirect withreturn_to

try thishttps://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!