How to Add Ordinal Date Suffixes to Shopify

Just like the Oxford Comma, ordinal date suffixes (st, nd, rd, th) increase the understanding of the text and decrease confusion.

So here is a way that you can add ordinal suffixes back into Shopify. (We will be updating this post as we figure out how to add them back into each part of Shopify, but this list is currently incomplete.) The code may be slightly broken or redundant, but it's functional on our end.

Packing Slips:

Settings -> Shipping and Delivery -> Edit packing slip template
Search for "date" and replace the one date line ({{ order.created_at | date: format: "date" }}) with this:

{% capture day %}{{ order.created_at | date: "%d" }}{% endcapture %}
{% if day == "01" %}
    {% assign ordinal = "st" %}
{% elsif day == "21" %}
    {% assign ordinal = "st" %}
{% elsif day == "31" %}
    {% assign ordinal = "st" %}
{% elsif day == "02" %}
    {% assign ordinal = "nd" %}
{% elsif day == "22" %}
    {% assign ordinal = "nd" %}
{% elsif day == "03" %}
    {% assign ordinal = "rd" %}
{% elsif day == "23" %}
    {% assign ordinal = "rd" %}
{% else %}
    {% assign ordinal = "th" %}
{% endif %}
        {{ order.created_at | date: "%B %e" }}{{ ordinal }}, {{ order.created_at | date: "%Y" }}

The code was blended between posts from ky1ejs and parkr on the Shopify Github

This code works by reviewing dates with the 0 leading (%d = 01, 02, etc.) but the displayed text has no leading 0 (%e = 1, 2, etc.).

Similarly, adding this to the blog liquid files looks like this:

{% capture day %}{{ article.published_at | date: "%d" }}{% endcapture %}
{% if day == "01" %}
 {% assign ordinal = "st" %}
{% elsif day == "21" %}
 {% assign ordinal = "st" %}
{% elsif day == "31" %}
 {% assign ordinal = "st" %}
{% elsif day == "02" %}
 {% assign ordinal = "nd" %}
{% elsif day == "22" %}
 {% assign ordinal = "nd" %}
{% elsif day == "03" %}
 {% assign ordinal = "rd" %}
{% elsif day == "23" %}
 {% assign ordinal = "rd" %}
{% else %}
 {% assign ordinal = "th" %}
{% endif %}
 <li class="ltn__blog-date"> {{ article.published_at | date: '%B %e' }}{{ ordinal }}, {{ article.published_at | date: '%Y' }}</li>

Update

"<li class..." makes this have a dot at the front, like a bulleted list. If your blog doesn't have dates with this formatting, just replace it with this instead:
{{ article.published_at | date: '%B %e' }}{{ ordinal }}, {{ article.published_at | date: '%Y' }}

More Details

We recently updated our website, so we've had to re-add this formatting. Things were jumbled around a bit due to the templates being made by different individuals, but we fixed this problem by replacing this

...with the above code. ("{% capture day %}{{ article.publis...")

We also did the same thing with replacing this code with the ordinal code:

<time datetime="{{ article.published_at }}">
 {{ article.published_at | date: "%b" }}
 {{ article.published_at | date: "%d" }}
 {{ article.published_at | date: "%Y" }}
 </time>

And this:

Blog Sidebar (Previous Template):

To get our sidebar to function properly, we had to modify the final string a little bit:

{{ article.published_at | date: "%b %e" | append: ordinal }}, {{ article.published_at | date: "%Y" }}

There were some errors when trying to put it all inside one set of brackets, but this works perfectly so I didn't want to squeeze it down any further.

How do I find which files to modify?

The blog files in our new template had pointed to many different files, so you may need to search for a bunch of different file names, like "article," "blog," "post," and "sidebar" to find all of the various files.

The "type" shown in the code of one file can either show the exact file you need to modify or will lead you to a file that leads to other files. (With our latest template, we were pointed to "section/featured-articles.liquid" but this was a dead end. We ended up finding the date code in "snippets/featured-in-image-article.liquid" to get the date working properly on each blog post.)

Looking back, it may be that you should only look into "snippets" to find code to modify.