Skip to content

Instantly share code, notes, and snippets.

@magician11
Last active August 31, 2023 06:12
Show Gist options
  • Save magician11/bb78111647af5e96c901 to your computer and use it in GitHub Desktop.
Save magician11/bb78111647af5e96c901 to your computer and use it in GitHub Desktop.
How to create a reorder button in Shopify's Liquid
{% for order in customer.orders %}
{% assign reorder_url = "" %}
{% for line_item in order.line_items %}
{% capture reorder_url %}{{ reorder_url | append: line_item.variant_id | append: ':' | append: line_item.quantity | append: ',' }}{% endcapture %}
{% endfor %}
<a href="{{ '/cart/' | append: reorder_url }}" class="button tiny">reorder</a>
{% endfor %}
@magician11
Copy link
Author

magician11 commented Jun 15, 2021

Thanks a lot @magician11.

Currently, all the customer order URL's are given in a specific order page. It would be better to show only 1 order URL in an order page.
Please see the screenshot attached.

I'm not a coder. It would be amazing if you could update this for this scenario.
Thanks in advance.

@behhh I had a look, and it will most likely have to do with how your customers/account.liquid is structured. For example, you might need to update the code to add an extra column to a table row for each order. Like for example...

Screen Shot 2021-06-15 at 3 28 38 PM

If you're still stuck since you're not a coder, get in touch and you're welcome to hire me to fix it up for you.

@ADTC
Copy link

ADTC commented Aug 11, 2022

@ADTC
Copy link

ADTC commented Feb 2, 2023

@rose-abc you need to have that key in your language files. For English, it may be en.default.json and for other languages, it will be xx.json where xx is the ISO code for the language.

Otherwise you can also replace {{ 'customer.orders.reorder' | t }} with a fixed text like Reorder. Note: If you do this, it won't change even if your site changes language.

Similarly, you need to apply the correct class for the button as well, in the code class="btn btn--filled". Look at the classes used in the existing buttons.

General warning: Don't copy-paste code from the internet without understanding what it does. In some cases, you could do irreversible damage.

@robin-natale
Copy link

@magician11 I would suggest the following edits to avoid whitespace in the url. Adding the strip property, some hypen into the capture and appending the cart url from the start worked much better for me, and stopped many errors.

{% for order in customer.orders %}

  {% assign _cart = "/cart/" %}
  {% assign reorder_url = "" %}

  {% for line_item in order.line_items %}
    {%- capture reorder_url -%}
      {{ reorder_url | append: _cart | append: line_item.variant_id | append: ':' | append: line_item.quantity | append: ',' | strip }}
    {%- endcapture -%}
  {% endfor %}

  <a href="{{ reorder_url | strip }}" class="button tiny">{{ 'customer.orders.reorder' | t }}</a>
{% endfor %}

@RajvirS99
Copy link

This is a great help!
Thanks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment