>> Udemyのセール!Shopify講座が1,500円から

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

Shopify 日付フォーマット 日本語 変換 カスタマイズ

Shopifyの日付フォーマット(日付スタンプ)を日本式に変換する方法を教えて欲しい。
「2022/10/12 16:58」のように表示させたいのに「October 12, 2022 04:58 PM」のように表示されて困っている。

こんなことを考えている方へ。
この記事のポイントは以下です。

・Shopifyの日付フォーマット(日付スタンプ)を日本式に変換する方法を解説
・「メール通知」「テーマの翻訳」「注文履歴ページ」の3ケースの具体例を紹介
・日付フォーマット(日付スタンプ)のカスタマイズの参考になるリファレンスを紹介

Shopify飯店

Shopify飯店

🔽Shopifyを学びたい方へ👇
私はShopifyを独学しましたが、いま思えば効率が悪かったと思います。
自身の経験を踏まえて、おすすめの学習方法を以下の記事にまとめました。

Shopifyの学習方法まとめ

 

スポンサーリンク

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

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

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

 

スポンサーリンク

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

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

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

 

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

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

Shopify 日付フォーマット 日本語 変換

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

Shopify 日付フォーマット 日本語 変換

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

Shopify 日付フォーマット 日本語 変換

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

Shopify 日付フォーマット 日本語 変換

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

Shopify 日付フォーマット 日本語 変換

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

Oct 13 の10:34 am

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

Shopify 日付フォーマット 日本語 変換

 

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

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

まずはコードの中から、

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

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

Shopify 日付フォーマット 日本語 変換

この部分を、

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

に編集します。

Shopify 日付フォーマット 日本語 変換

そして「保存」します。

Shopify 日付フォーマット 日本語 変換

 

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

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

Shopify 日付フォーマット 日本語 変換

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

2022/10/13の10:38

Shopify 日付フォーマット 日本語 変換

 

スポンサーリンク

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

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

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

 

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

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

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

Shopify 日付フォーマット 日本語 変換

 

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

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

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

Shopify 日付フォーマット 日本語 変換

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

Shopify 日付フォーマット 日本語 変換

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

Shopify 日付フォーマット 日本語 変換

デフォルトでは、

%B %d, %Y

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

Shopify 日付フォーマット 日本語 変換

この部分を、

%Y年%m月%d日

に修正します。

Shopify 日付フォーマット 日本語 変換

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

 

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

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

Shopify 日付フォーマット 日本語 変換

 

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

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

たとえば、

%Y.%m.%d

Shopify 日付フォーマット 日本語 変換

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

Shopify 日付フォーマット 日本語 変換

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

 

スポンサーリンク

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

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

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

 

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

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

たとえば以下では、

October 12, 2022 04:58PM

となっています。

Shopify 日付フォーマット 日本語 変換

 

Liquidを編集する

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

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

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

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

Shopify 日付フォーマット 日本語 変換

デフォルトでは、

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

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

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

Shopify 日付フォーマット 日本語 変換

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

 

表示を確認する

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

Shopify 日付フォーマット 日本語 変換

 

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

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

新しいテーマを適用した後は、サイトの全ページを開いてみて違和感がないかを確認しましょう。多くの箇所は「テーマの翻訳」で編集を行えば解決します。解決しない箇所は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 日付フォーマット 日本語 変換

 

Shopify 日付フォーマット 日本語 変換

 

Shopify 日付フォーマット 日本語 変換

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

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

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

 

スポンサーリンク

参考:Shopifyを学ぶ方法まとめ|本・動画教材・オンラインスクール

Shopify飯店

Shopifyを本格的に学ぶためにはネットの情報だけは足りません。本(参考書)、動画教材(Udemy)、オンラインスクールを活用して、効果的に学習しましょう。

思い切って有料の教材を買って体系的に学ぶことで、操作に悩む時間が減りますし、より高度なカスタマイズや提案ができるようになり、仕事の幅が広がります。

仕事でShopifyを扱っている筆者が、おすすめの学習教材をまとめました。くわしくは以下の記事をご覧ください。

【関連記事】【2023年最新】Shopifyのおすすめ学習方法まとめ【現役エンジニアが紹介】

Shopifyのおすすめ学習方法まとめ【現役エンジニアが紹介】
現役フリーランスエンジニアがShopifyの勉強方法をまとめました。オンラインスクールで学ぶ、本で学ぶ、Udemyで学ぶ、公式のYoutubeで学ぶの4つです。おすすめはオンラインスクールで学ぶことです。

【関連記事】【2023年最新】デイトラShopifyコースは買うべき?【レビュー】
※2コース目以降の追加受講は5000円引き!

デイトラShopifyコースは買うべきか?徹底レビュー【2023年最新】
デイトラShopifyコースを大解剖します。内容、強み、評判、身につくスキルをShopify構築を仕事にしている筆者が解説します。

【関連記事】【2023年最新】Shopifyの学習におすすめの動画教材(Udemy)まとめ

【日本語のみ】Shopifyの学習に最適なUdemyの教材まとめ
日本語で受講できるUdemyのShopify講座をまとめました。新講座が出るたびに随時、記事を更新します。初心者向けの講座から上級者向けの講座まで紹介しています。また、筆者が実際にUdemyの講座を受講したレビューも紹介しています。

【関連記事】【2023年最新】Shopifyの学習におすすめの本まとめ

Shopifyの学習におすすめの本まとめ【参考書7選を紹介】
本記事ではShopifyを学ぶのにオススメな本・参考書をまとめています。

【関連記事】【2023年最新】【Shopifyの独学】勉強方法のまとめ【初心者向け】

【Shopifyの独学】勉強方法のまとめ【初心者向け】
本記事ではShopifyの独学方法をロードマップとしてまとめています。筆者はShopifyを独学して3年ほど経ちました。ノウハウが溜まってきたので、Shopify独学のロードマップを整理して記事にしました。
【Udemyで初めて買う場合はお得!】
初回購入ならShopifyの動画教材が安く買える!
Udemyはほとんど常に、初回購入者向けのセールを開催しています。通常1万〜2万円の商品が初回購入だと2,000円程度で購入できます。
・Udemyでセール中のShopifyの講座一覧をまとめて見る icon

 

スポンサーリンク

まとめ

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

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

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

タイトルとURLをコピーしました