index

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 json 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"><i class="far fa-calendar-alt"></i> {{ article.published_at | date: '%B %e' }}{{ ordinal }}, {{ article.published_at | date: '%Y' }}</li>
      </ul>

Blog Sidebar:

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

<i class="far fa-calendar-alt"></i>{{ 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.

Leave a comment

Your email address will not be published. Required fields are marked *

Please note, comments must be approved before they are published