Use permalinks to pre-load the cart

Caution

This is an advanced tutorial and is not supported by Shopify. Knowledge of web design languages such as HTML, CSS, Javascript and Liquid is required. We suggest hiring a Shopify Expert if you are not comfortable proceeding with the following tutorial.

Tip

If you want to see more educational videos and tutorials like this one, visit our video library.

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] Access [first_name].
checkout[shipping_address][last_name] Access [last_name].
checkout[shipping_address][address1] Access [address1].
checkout[shipping_address][address2] Access [address2].
checkout[shipping_address][city] Access [city].
checkout[shipping_address][zip] Access [zip].

Applying a discount

You can directly apply a discount to a cart permalink, or simply pre-fill the input box without applying the discount.

Pre-filling the input box:

The following format pre-fills the input box:

/cart/{variant_id}:{quantity}?checkout[reduction_code]=test

where test is the string value of a discount code.

Applying the discount:

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. On the Blog posts page, either add a new blog post or click on an existing blog post.

  2. In the Rich Text Editor, under the "Content" header, click the HTML button:

    Html btn
  3. Add your link. It should look something like this:

    <p><a href="http://your-store.com/cart/70881412:1">Buy this item</a></p>
    
  4. Save your changes and test it out in your store.

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

  1. Find the theme you want to edit, click Actions, and then click Edit HTML/CSS.

  2. 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 click the Add a new template link.

  3. 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>
    
    
  4. 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 the one and single 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 on the order details page under Conversion:

Conversion

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.

Want to discuss this page?

Visit the Shopify Community