Re: Cart - Use permalinks to pre-load the cart

Cart - Use permalinks to pre-load the cart

TyW
Community Manager
463 71 1238


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:

    preload01.jpg

  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:

 

preload02.png


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.

 

TyW | Online Community Manager @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

Replies 130 (130)
JAS_Technology
Shopify Partner
86 0 62

Has anybody noticed that when you use a checkout page permalink the "cart" link at the top is still active? When clicked it just goes to a blank cart. I feel like this is a checkout bug right? 

 

Image 2020-05-29 at 2.41.51 PM.png

Happy to hear about your crazy ideas.
uphillman12
Tourist
5 0 4

@JAS_Technology Semantics if we call it a bug or an oversight. Either way, something Shopify should fix this.

 

If you're curious why the checkout permalink described in the original post causes this read more here.

https://community.shopify.com/c/Shopify-APIs-SDKs/Possible-permalinks-bug-when-pre-loading-carts/m-p...

 

If the original post went to the cart as the author suggested it would load Shopify's cart, going straight to checkout seems to clear the cookie and ignore the new contents entirely.  It's likely Shopify never considered a user starting a checkout and not completing it in one direction. Have you tried just getting a 100% checkout conversion rate? 😄 

KellysCandyCo
Tourist
5 0 1

did you find a solution for this so the customers can edit the cart?

Bill6
Shopify Partner
47 0 18

In our .Net OMS, I worked around this problem by loading the checkout url inside a browser control and then running a javascript to hide the elements.  The browser control I am using is:

Microsoft.Web.WebView2.WinForms.WebView2

 

The javascript I came up with is:

document.getElementsByClassName('step__footer__previous-link')[0].style.display = 'none';

document.getElementsByClassName('breadcrumb__link')[0].style.display = 'none';"

 

I execute this in the WebView2.NavigationCompleted event.  Using the "WebView2.ExecuteScriptAsync()"

 

jam_chan
Shopify Partner
920 23 187

I think Shopify should update to the official doc: https://help.shopify.com/en/manual/products/details/checkout-link

 

Not sure if ref is still relevant since it's not mentioned in the checkout link

BYOB - Build Your Own Bundles, SPO - SEO App to research keywords & edit social link preview
ngoenka
Excursionist
33 0 9

I have a similar question. I'm able to add multiple items to cart but when I append ?ref= , I dont have get this reference on order conversion.

 

A sample URL that I'm using:

https://groupbazaar.in/cart/update?updates[33826291384458]=1&updates[32056616124554]=2?ref=whatsappS...

 

Any thoughts?

uphillman12
Tourist
5 0 4

@bradlau and @ngoenka You should be using a "&" instead of another "?" in your parameters. 

 

For example,

?key1=value1&key2=value2&key3=value3

 

https://en.wikipedia.org/wiki/Query_string

ngoenka
Excursionist
33 0 9

Thanks but it doesnt help me put a ref in for conversion tracking. I even tried putting a &tags=<sometext> but this doesnt add tags to the order which is generated when customers go through this link.

 

I've basically created a whatsapp share message for users to send a product to their friends. The friend can simply click the message, add the products to cart, review & checkout. I want conversion tracking on this so that I can understand the efficacy of this flow.

 

any suggestions?

Kevin_Beard
Visitor
3 0 0

Has anyone figured out how to make something as simple as link that a person can use to view their cart, or go to checkout?  Sometimes that little shopping cart popup on the side disappears, like if you hit the back button.  Then there is no way to get back and buy the order without adding something new.  I'd like something as simple as them being able to click a link on my site to get to their shopping cart.

cosmon
Tourist
5 0 2

Yes, your second parameter need to have a & not ?

/cart/{variant_id}:{quantity},{variant_id}:{quantity}?discount=discountName&[email protected]

 

frst_10
Shopify Partner
11 0 4

@cosmon - take a look at the app we recently developed called ZipLinks. It will build permalinks for you and will remove the hassle of building permalinks. 

Here's a link to the app page to install: https://apps.shopify.com/permalinks

Hope this helps!

Fearless2
Visitor
1 0 0

I know this is late but you have 2 (?) question marks in your url string and there should only be 1. Replace the 2nd (?) with an (&) ampersand. It should be:

/cart/{variant_id}:{quantity},{variant_id}:{quantity}?discount=discountName&[email protected]

 

HStack
Visitor
1 0 0

Hi Danstoj - did you find a solution to this? I am interested.

uphillman12
Tourist
5 0 4

@TyW Thanks for the helpful post. It looks like your original post uses the term "cart" in many places where it should say "checkout".

 

 

Using a permalink in the way you state:

/cart/{variant_id}:{quantity}

does not load anything into the cart cookie for Shopify as a user  would think by reading "pre-load cart."

 

Rather using this permalink initiates a new checkout with the items in the URL.

 

Consider reviewing and updating your original post to state that "Use permalinks to pre-load the checkout"

 

If Shopify added a feature to add the checkout permalink's items to the cart cookie then your post would be closer to accurate. Here's more on that issue:

https://community.shopify.com/c/Shopify-APIs-SDKs/Possible-permalinks-bug-when-pre-loading-carts/m-p...

frst_10
Shopify Partner
11 0 4

Oh wow - someone finally built an easy app solution to build permalinks. No more copy/pasting variant id's, discount codes, etc. @TyW 

Ginko
Shopify Partner
20 0 12

It was you. You made that app...

JAS_Technology
Shopify Partner
86 0 62

Haha.. Actually no it was me!  "ZipLinks" has been approved by Shopify! It's currently unlisted in the App Store as I would love some feedback/thoughts on the app. The permalinks feature is pretty powerful and ZipLinks can help untangle all of this. Enjoy. I'm excited to spread this around. 

https://apps.shopify.com/permalinks

Happy to hear about your crazy ideas.
Kevin_Beard
Visitor
3 0 0

Bummer.  ZipLinks is compatible for Buy Button users.

JAS_Technology
Shopify Partner
86 0 62

Thanks @Kevin_Beard! You are right and this is exactly what I'm working on right now! Stay tuned, should have support for that very shortly and I'll reply right away.

Happy to hear about your crazy ideas.
JAS_Technology
Shopify Partner
86 0 62

Hi again @Kevin_Beard. ZipLinks should now support merchants using Shopify Lite. Thanks for the interest and would love to hear what you think:

http://apps.shopify.com/permalinks

Happy to hear about your crazy ideas.
AvocadosLab
Shopify Partner
51 4 45

Great to hear that someone is trying to improve the experience through app. Good job @JAS_Technology 

We started building something similar for Shopify App Dev challenge but later dropped an idea thinking it's not really COVID-19 related in which competition was focused.

AvocadosLab
Shopify Partner
51 4 45

I had couple more use cases in mind though. I think ~30% code is written so will try to build something if time permits.

Keep up the good work! 

Vishakha
Visitor
3 0 0

Hi I want to pre fill state field in checkout, how it can be done?

robbiesh
Shopify Partner
2 0 0

Hey all! FYI – we built an app that builds this link for you:

https://apps.shopify.com/start-to-finish

Rose-from-NZ
Visitor
2 0 0

Your app looks great, can it also make the customer who gets the URL go straight to a collection (not check out). I ask this because it is hard to find a pre-loaded cart with discount AND product

 

Best

Rose

robbiesh
Shopify Partner
2 0 0

Unfortunately, our app only works if you're sending people directly to the checkout. I'm sorry I can't be of more help, but I don't know of an easy way to pre-populate a cart with a product.

Rose-from-NZ
Visitor
2 0 0

Hi everyone!

I have 3 things I would like to get out of this, and I feel like I'm so close! But would love some help in this area.

I want my link to:
1. Have a discount code sitting in the cart (DONE!)
2. Have the customer open a specific collection (DONE!)
3. Have a product waiting in the cart (PENDING)

With the great info that you have posted, I know how to get the product in the cart, I just don't know how I can have these all in the URL at the same time and still work.

Here is what I have so far (please note I am not a coder in anyway):

https://(domain name)/discount/(code)?redirect=/collections/(collection)

Any thoughts?

Thanks!

Jinxo
Tourist
3 0 3

Can permalink attributes be used to pre-load the cart with subscription/plan products? There's an option to include a product variant id, but can we include a plan id?

Proudly
Tourist
10 0 3

Has this permalink solution stopped working?

Can't get any URLs, including simplest version to work...

eg

https://heybookhound.myshopify.com/cart/6580131201179:1

Just goes to "Something went wrong" page.

I grabbed the product code from admin view URL of product....

Any advice greatly appreciated, thanks!

Jesse_Meyers
Shopify Partner
23 1 12

@Proudly try these URL's. They worked for me on your site.

 

https://bookhound.com/cart/update?updates[39409953865883]=1

 

 or

 

https://bookhound.com/cart/add/39409953865883

 

or

https://bookhound.com/cart/39409953865883:1
Proudly
Tourist
10 0 3

Worked a treat, thanks @Jesse_Meyers - so issue is, how did you end up with completely different product IDs - where do I find these?

EDIT: Looks like it's because of variant IDs?

What would I do for this site, which has a subscription (and no variants?)...

https://corgimodelclub.com/

The subscription product on home page.

Thanks again!

RareArtifact
Excursionist
17 0 3

When viewing the product in admin, change the URL at the top and add .xml or .json to the URL

(ie change /admin/products/xxxxxx to /admin/products/xxxxxx.xml)

Then just scroll down and find the variant id.

kingsofvapor
Tourist
3 0 2

So does anyone know if there a permalink that can access the "ship" vs "pick up" option? I would just really like to change which option in selected on the checkout page load based on some things they do at the cart level.

premmels
Excursionist
19 0 4

Awesome, this information is really useful.

There is only one thing missing that I haven't been able to figure out:

Besides notes, referrals etc. is there any way to add a tag to the permalink as well?

Like http://your-store.myshopify.com/cart/70881412:1,70881382:1?note=this-is-a-note&tag=this-is-a-tag 

That would really help me a lot. Any idea how to do that?

I need a tag (or s.th. similar) which I can use as a parameter to filter for in the full order list. See also my thread about this question here: https://community.shopify.com/c/Technical-Q-A/Add-tag-or-tracking-key-to-link-of-buy-button/m-p/1154...

JAS_Technology
Shopify Partner
86 0 62

Great minds think alike! 🙂 This is a feature we are actively working on over here at ZipLinks where you will be able to specify one, or more, tags to apply to an order that was completed using one of your defined links. Happy to reach out with a DM when that feature is available. 

Happy to hear about your crazy ideas.
RareArtifact
Excursionist
17 0 3

Not sure if there is a way to do tag or note, but you could use ref= and retrieve that from the order later under the landing-site-ref parameter in the xml or json.

boylecreations
Visitor
1 0 3

Personally, I just get the "Link expired: Link no longer exists" page, every time. Not sure what I'm doing wrong there. 

premmels
Excursionist
19 0 4

Does this whole process really only work with variants?

What if my product doesn't have variants? How do I preload my cart with a product ID (instead of variant ID) instead?

RareArtifact
Excursionist
17 0 3

Every product has at least one variant id. Add .xml to the end of the product URL and you can see the variantid.

alph486
Visitor
1 0 0

Would be very useful if we could include the Selling Plan for subscription products. Is there a way to do that today?

WowieDogs
Tourist
5 0 1

I was able to do this by adding the selling plan after the product id - so like this:

https://yoururl.myshopify.com/cart/add/?id=[productid]&selling_plan=[sellingplanid]&quantity=1

I found the selling plan id by adding the product to the cart and then clicking on it and checking the URL. I'm sure there is an easier way!

newlifecardio
Visitor
1 0 0

I add this link (for white glove assembly service) with variant ID to the shipping page and it works fine, however if I add a product before clicking the link it empties the cart.

So clicking on the  "permalinks to pre-load the cart" after adding a product to the cart, deletes items currently in cart. 

Anyone have a workaround here, or am I missing something?

Jesse_Meyers
Shopify Partner
23 1 12

There are different URL formats referenced in this thread. Some of them will replace the contents of the cart and some of them will just modify the existing cart. Which version did you use?

premmels
Excursionist
19 0 4

Has there been any change in Shopify?

Since Monday or Tuesday my notes (&note=XYZ) aren't attached to the orders anymore. I'm using a link like this:

https://SHOPNAME.myshopify.com/cart/VARIANTID:1?channel=buy_button&note=google

The note (in this case "google") won't be displayed in my orders. I have not made any changes to my links.

Has anyone else noticed this problem and/or found a solution?

yotamcuralife
Shopify Partner
7 0 7

How can I add rag to that orders? Maybe there should be a parameter for that?

yellowwebmonkey
Shopify Partner
15 0 3

I wanted to give another mention for the app ZipLinks: https://apps.shopify.com/permalinks

 

One of my biggest clients is running a big radio campaign and we were able to use that app to make a short link that applied the coupon, added item to cart, tagged customer, and tagged the order.  The tagging was essential so client could judge the ROI of radio campaign.  

Alexis Priddy

Derek_Morin
Shopify Partner
216 1 35

In our app, you can build pre-filled cart links with/without discounts attached (or gifts or custom deals attached). This might help some merchant. See our demo store.

 

2022-03-30 10_37_50-Automatic Discount - Shopify App by Tabarnapp, Shopify Experts.png2022-03-30 10_39_44-Discount link + Pre-filled cart – Automatic Discount.png

PaulaBridge
Shopify Partner
1 0 0

Hi all! 

Just wanted to know if this is still working? It leads to an error in most of the stores we're part of. 

For example: 

https://www.status.co/cart/7559522222338:1

https://www.status.co/cart/7559522222338:1,201493351170100:1

Jesse_Meyers
Shopify Partner
23 1 12

Hi Paula, you need to use the variant id, not the product id.
Try this link https://www.status.co/cart/36355177447590:1