Shopifyの日付フォーマット（日付スタンプ）を日本式に変換する方法を教えて欲しい。
「2022/10/12 16:58」のように表示させたいのに「October 12, 2022 04:58 PM」のように表示されて困っている。
こんなことを考えている方へ。
この記事のポイントは以下です。
【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.
日付フォーマットのカスタマイズに参考になるサイト紹介
日付フォーマットのカスタマイズに参考になるサイトを紹介します。
Liquidについて更に詳しく知りたい方は以下の記事をご覧ください。
Liquidのチートシートをまとめています。
【関連記事】【Shopify】Liquidのチートシートなど便利なサイトまとめ
参考：Shopifyを学ぶ方法まとめ｜本・動画教材・オンラインスクール
Shopifyを本格的に学ぶためにはネットの情報だけは足りません。本（参考書）、動画教材（Udemy）、オンラインスクールを活用して、効果的に学習しましょう。
思い切って有料の教材を買って体系的に学ぶことで、操作に悩む時間が減りますし、より高度なカスタマイズや提案ができるようになり、仕事の幅が広がります。
仕事でShopifyを扱っている筆者が、おすすめの学習教材をまとめました。くわしくは以下の記事をご覧ください。
【関連記事】【2023年最新】Shopifyのおすすめ学習方法まとめ【現役エンジニアが紹介】
【関連記事】【2023年最新】デイトラShopifyコースは買うべき？【レビュー】
※2コース目以降の追加受講は5000円引き！
【関連記事】【2023年最新】Shopifyの学習におすすめの動画教材（Udemy）まとめ
【関連記事】【2023年最新】Shopifyの学習におすすめの本まとめ
【関連記事】【2023年最新】【Shopifyの独学】勉強方法のまとめ【初心者向け】
初回購入ならShopifyの動画教材が安く買える！
Udemyはほとんど常に、初回購入者向けのセールを開催しています。通常1万〜2万円の商品が初回購入だと2,000円程度で購入できます。
・Udemyでセール中のShopifyの講座一覧をまとめて見る
まとめ
本記事では、Shopifyの日付フォーマット（日付スタンプ）を日本式に変換する方法を解説しました。
日付フォーマットを編集する箇所は大きく分けて以下の3つです。
今回の記事はここまでです。
