creative designer

If you've got awesome Shopify customers that return each month to buy the same thing you don't want to force them to have to re-add everything to cart each time. With some theme edits it's possible to add a feature that does just this - let's explore some very example Liquid and JavaScript code.

Do I need this?

If you're asking this question - probably not. If you're a fashion or electronics store for example, the whole of idea of making repeat orders for the same products makes very little sense. If however you're selling supplies, food, vape liquids, general consumables etc, this will be important. 

Golden rule of self editing themes

Before we start remember the golden rule: Always duplicate the theme first before making any edits. Make all edits in the copy, and only publish when done.

You do this to avoid breaking the live storefront.

The Idea

Here's the general thinking for how this would work:

  1. Customer logs in
  2. Customer goes to orders page to see a list
  3. Next to each option is a button
  4. Clicking the button will add the same items to the cart (and optionally redirect to the checkout)

We're going to use the AJAX api here, but you could also do a variation that just adds with permalinks.

Snippet Code

There's very little (essentially none) error checking in place so you'll need to extend this yourself. This should include errors when there's not enough items in stock, or when the server fails for whatever reason. I might add this in later, but since this is late night rambles I'm just blasting out the basics.

To use, create a snippet called 'order-to-cart.liquid' and paste the content of the gist in. In order.liquid just add {% include 'order-to-cart' %} wherever you like. I threw mine just under the title:

You can see this in action over on the my experimental store  (https://jasons-experiments.myshopify.com). This store is using the Bogus Gateway so you can create an account and checkout. 

Code needed to add to cart, along with any line item properties

Doesn't exist in this version yet... Shout at me if you're in need.

Err, can't we just use a permalink.

Hell yes! If you don't need to add the items to the cart, and the customer won't need to alter the amounts or items a permalink is even easier. Just throw this snippet into your template:

<a href="/cart/{% for line_item in order.line_items %}{{ line_item.variant_id }}:{{ line_item.quantity }}{% unless forloop.last %},{% endunless %}{% endfor %}">Reorder this</a>

Errors. Can I say tough luck?

This code is pretty basic and doesn't do a great job of reporting errors, or trying too hard to stop them. Consider this a base for your own code, and don't expect it to work in your own theme without some minor tweaks.

Like to work with me?

Let's talk