Categories: Shopify未分類

【Shopify】アカウント系ページのテンプレートをJSON形式にカスタム!

Shopify2.0のテーマでは、ページのテンプレートがJSON形式になったことで、
ページ内のセクションと呼ばれる構成要素のひとつひとつを並び替えたり、非表示にしたり、
はたまた、新たなセクションを作成して配置することも可能だ。

これがものすごく使い勝手がよい。

しかし、デフォルトの2.0テーマであるDawnなどでは、「お客様の従来のアカウント」のページでも、
これと同じことができる。

なので、カートページ内でも違うページで使用しているセクションを追加することができる。

もし、お使いのテーマが古く、アカウント系ページではこの自由なセクション配置ができないとき、
以下の手順を行えば、アカウント系ページでも最新テーマと同じ仕様にでき、セクションの自由な配置が可能になる。

  • 既存のtemplatesの中のcustomer/register.liquidというファイルの中身をまるっとコピーしておいて、ファイルは削除
  • templatesの中にcustomer/register.jsonというファイルを作成する
  • JSONファイルの中の記述は以下のようにする
{
  "sections": {
    "main": {
      "type": "register"
    }
  },
  "order": [
    "main"
  ]
}
  • sectionの中にregistger.liquidというセクションファイルを作成し、
  • 1でコピーしたコードをまるっと貼り付け
  • 最下行に、以下のschema定義のJSONコードを追加
{% schema %}
{
  "name": "会員登録",
  "settings": []
}
{% endschema %}

これで「カスタマイズ」の画面で、作成した会員登録セクション(register.liquid)をテンプレート内で呼び出しできる。

見出しや会員登録フォームエリアの上や下に、例えばテキスト&イメージのセクションなどを配置することで、会員登録のメリットの説明などを自由度高く追加できるようになる。

ナナイロ

ECサイト制作に強いフロントエンドエンジニア。Web関連のお役立ち技術情報を発信しています。 2025年の最新のAI生成コーディングのコースをUdemyに公開いたしました。爆速でコードを書きたい方は必見です!! さらに、今年(2025年)からVoicyのパーソナリティに挑戦し始めました!ラジオでWebエンジニアの生の声をお届けしています。

Share
Published by
ナナイロ