【Shopify】日付フォーマットを日本式に変換する方法を解説

Shopifyの日付フォーマット（日付スタンプ）を日本式に変換する方法を解説します。

「メール通知」「テーマの翻訳」「注文履歴ページ」の3ケースの具体例を紹介しています。また、日付フォーマット（日付スタンプ）のカスタマイズの参考になるリファレンスを紹介します。

注文発生時の通知メールの日付フォーマットを修正する

まずは、注文発生時の通知メールの日付フォーマットを修正します。

これは「スタッフ注文通知」と呼ばれるメールテンプレートで定義されています。ストアで注文があった時にストアオーナー（自分）宛に送信されるメールです。

デフォルトでは日付表示がおかしい

「スタッフ注文通知」は以下のようなメールです。

まずは「スタッフ注文通知」の編集画面まで移動します。
ストアの管理画面から「設定」を押します。

表示されたメニューから「通知」を選びます。

ページの下の方にある「スタッフ注文通知」の欄を見つけて、「新しい注文」を押します。

コード編集画面が開きます。
右上にある「プレビュー」を押してください。

すると、メール本文のプレビューをみることができます。
以下の赤枠で囲んである通り、

Oct 13 の10:34 am

というおかしな表示になっています。
これを日本語に適した表現に変えていきます。

「スタッフ注文通知」のメールテンプレートを編集する

テンプレートのコードを編集していきます。

まずはコードの中から、

{% assign current_date = date | date: "%b %d" %}
{% assign current_time = date | date: "%l:%M %P" %}

という部分を見つけます。
おそらく100行目付近にあります。

この部分を、

{% assign current_date = date | date: "%Y/%m/%d" %}
{% assign current_time = date | date: "%H:%M" %}

に編集します。

そして「保存」します。

プレビューで修正完了を確認する

最後に「プレビュー」を押して確認します。

日付表示が以下のように修正されました。
これで修正完了です。

2022/10/13の10:38

「言語の編集（テーマの翻訳）」の日付フォーマットを修正する

続いて、「言語の編集（テーマの翻訳）」画面の日付フォーマットを修正します。

ここを修正することで、ストアフロントの色々な箇所の日付表示をまとめて修正することができます。たとえば、ブログカードの日付表示などが該当します。どの程度影響範囲があるかは、テーマによって変わります。

デフォルトでは日付表示がおかしい

導入するテーマによりますが、デフォルトでは日付表示が海外表記になっていることがほとんどです。

たとえば、有料テーマ「Baseline」の場合、ブログカードでは「MAY 10, 2021」のようになっています。

「言語の編集（テーマの翻訳）」の日付フォーマットを修正する

日付のフォーマットを修正していきます。

管理画面にログインして「オンラインストア＞テーマ」へと進みます。

「アクション＞言語を検索」を押します。

言語の翻訳画面が表示されるので、「Date formats」のタブを開きます。テーマによっては「Date formats」ではなく別の名前になっている可能性があります。

デフォルトでは、

%B %d, %Y

となっています。
この設定だと、以下のような表示になります。

この部分を、

%Y年%m月%d日

に修正します。

修正が終わったら保存します。
これで完了です。

日付表示が変わっていることを確認する

ストアを開いて実際の表示を確認します。
意図通りの表示になっていれば大丈夫です。

日付表示の表示形式を変えることも可能

日付の表示形式は自由に変えることができます。

たとえば、

%Y.%m.%d

と設定すれば、以下のような表示になります。

ユーザーにとっての分かりやすさや、ストアのデザインや世界観にあった日付表示にしましょう。

注文履歴ページの日付フォーマットを修正する

最後に注文履歴ページの日付フォーマットを修正します。

注文履歴はアカウント作成したユーザーのマイページで見ることができます。ログインしてかつテスト注文をしないと表示確認ができないので、カスタマイズを忘れがちです。

デフォルトでは日付表示がおかしい

アカウント作成を行うことで、ユーザーは注文履歴画面を使えるようになります。ここの日付表示もデフォルトでは海外表示になっていることが多いです。

たとえば以下では、

October 12, 2022 04:58PM

となっています。

Liquidを編集する

テーマにもよるのですが、日付表示の変更にはLiquidのコードを直接編集する場合があります。今回は有料テーマの「Baseline」を例に取ります。

まずは、管理画面にログインして「オンラインストア＞テーマ＞アクション＞コードを編集」を押します。

注文管理画面のテンプレートファイルを開きます。テーマによって名前は違いますが、「customer/order.liquid」とかそんな名前のファイルです。

日付表示に該当する箇所を探します。

デフォルトでは、

date: "%B %d, %Y %I:%M%p"

となっているので、以下のように変更します。

date: "%Y/%m/%d %H:%M"

これで編集は完了です。
コードを保存します。

表示を確認する

最後に実際の画面で表示を確認します。
意図通りの形式で表示されていればOKです。

修正が必要かどうかはテーマによって異なる

注文管理画面の日付の編集が必要かどうかは、導入するテーマによって異なります。テーマによっては「テーマの翻訳」で編集を行えば、この部分が自動的に変わってくれることもあります。

新しいテーマを適用した後は、サイトの全ページを開いてみて違和感がないかを確認しましょう。多くの箇所は「テーマの翻訳」で編集を行えば解決します。解決しない箇所はLiquidコードを直接編集しましょう。

日付フォーマットのサンプルコードまとめ

日付フォーマットのカスタマイズで使用するサンプルコードをまとめました。どこかにメモしておけば、毎回使えるので便利です。

{{order.created_at | date: "%Y/%m/%d %H:%M" }}
2022/10/12 16:58

{{ article.published_at | date: "%a, %b %d, %y" }}
Fri, Jul 17, 15

{{ article.published_at | date: "%Y" }}
2015

This page was last updated at {{ "now" | date: "%Y-%m-%d %H:%M" }}.
This page was last updated at 2022-03-11 16:24.

日付フォーマットのカスタマイズに参考になるサイト紹介

日付フォーマットのカスタマイズに参考になるサイトを紹介します。

Shopify Cheat Sheet — A resource for building Shopify Themes with Liquid

Liquid template language

Shopify Developers Platform—Build. Innovate. Get paid.

Liquidについて更に詳しく知りたい方は以下の記事をご覧ください。
Liquidのチートシートをまとめています。

【Shopify】Liquidのチートシートなど便利なサイトまとめ

Shopify案件のカスタマイズ時によく見るページや参考にしているサイトをまとめました。Liquidのチートシートは一番よく見ます。基本英語なのでChromeのブラウザ翻訳機能を使って読んでいます。

参考：Shopifyを学ぶ方法まとめ｜オンラインスクール・本・動画

Shopifyを本格的に学ぶためにはネットの情報だけは足りません。
そこで、仕事でShopifyを扱っている筆者が、おすすめの学習方法をまとめました。

オンラインスクール、本（参考書）、動画教材（Udemy）を活用して、効果的に学習しましょう。思い切って有料の教材を買って体系的に学ぶことで、操作に悩む時間が減りますし、より高度なカスタマイズや提案ができるようになり、仕事の幅が広がります。

＼当サイトのおすすめ記事はこちら👇／

■■Shopifyを学ぼう■■

＼初回購入で最大90%OFF👇／

■■Udemyは初回購入がお得■■

Point Udemyは初回購入がお得！
Point 通常1万〜2万円の商品が80%OFF〜90%OFF程度の値段で購入できる！
Point ランチ1回分の値段でShopifyを学べます！

Udemyでセール中のShopifyの講座を見る

まとめ

本記事では、Shopifyの日付フォーマット（日付スタンプ）を日本式に変換する方法を解説しました。
日付フォーマットを編集する箇所は大きく分けて以下の3つです。

①メール通知のテンプレート
②オンラインストア＞テーマ＞アクション＞テーマの翻訳
③Liquidの直接編集

今回の記事はここまでです。