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]=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

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.

[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}?discount=discountName?ref=email@domain.com

If I remove the ?ref=email@domain.com it does apply the discount. Anyone know what I'm doing wrong?

[JAS_Technology]

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? 

[uphillman12]

@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]

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

[Bill6]

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]

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

[ngoenka]

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]

@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]

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]

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]

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

/cart/{variant_id}:{quantity},{variant_id}:{quantity}?discount=discountName&ref=email@domain.com

[frst_10]

@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]

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&ref=email@domain.com

[HStack]

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

[uphillman12]

@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]

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

[Ginko]

It was you. You made that app...

[JAS_Technology]

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

[Kevin_Beard]

Bummer.  ZipLinks is compatible for Buy Button users.

[JAS_Technology]

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.

[JAS_Technology]

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

[AvocadosLab]

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]

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!