How to create a reorder button with Shopify’s Liquid templating language


Let’s say on the the account page in Shopify, you want to add a reorder button that when clicked automatically adds all items for a previous order to the cart.

One strategy is to use a cart permalink, in the following format:

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

So  by adding an item’s variant_id and quantity to the end of the URL, you can create a button or link that will populate the cart with that item. And you can append as many items as you want separated by commas.

So the question is, how to automatically construct that URL for each previous order? It’s done like so…

https://gist.github.com/magician11/bb78111647af5e96c901

There is a redundant comma added onto the end of the URL, but Shopify ignores it when processing the URL’s parameters. So to keep things simple, I didn’t write the rather lengthy Liquid code to remove that last character.

Hope that helps someone!


4 responses to “How to create a reorder button with Shopify’s Liquid templating language”

  1. Hi this worked for me, except as soon as I re-order it put’s the reorder link in twice in the MY Account page?

    1. Created and order – processed and full filled
    2. Re order link appears in the my account page
    3. Re order using link from my account, works
    4. Go back to my account see the two orders but now I have the reorder link twice in the

    Any ideas?

    My site isn’t live yet

    thanks

    Simon

  2. Hello, this loads one re-order button for each line item? so say I have 4 items in the order I wish to re-order, it will show the ‘re-order’ button 4 times? Thanks.

    • Looking at the code again, it’ll construct a URL for all line items from the previous order, and create a single button. So one button for all items in the order.

Leave a Reply

Your email address will not be published.