コンテンツへスキップ

【Shopify】ECサイト全体で呼び出せる自由なカスタムメニューを作る

ShopifyでECサイト制作を行っていると、お店の営業時間や電話番号、住所やメールアドレスなどの基本情報を自由に呼び出したいというときがあります。

もちろんメールアドレスのような情報はShopifyのストア管理項目として管理できるので、自由に呼び出すことはできるのですが、営業時間などはShopifyのストア管理項目には存在しません。

今回はECサイト全体で利用したい自由なカスタムメニューの管理機能を実装し、一元管理した情報をいつでもどこでも呼び出せるような仕組みを作っていきます。

INDEX

テーマファイルにカスタムメニューを追加する

今回はテーマファイル自体に新しい設定項目を追加していきます。
テーマファイルのエディタで「settings_schema.json」ファイルを探し、開いてください。

settings_schema.jsonのファイルを開くと、このようにテーマの設定に関する項目のスキーマが記述されいます。

この設定は、テーマのカスタマイズ画面にある設定メニュー（歯車マーク）の箇所と連動しています。

settings_schema.jsonに記述されている内容はテーマによって異なりますが、記述方式はShopifyのルールに従って書かれていますので、今回実装したいカスタムメニューの追加方法は変わりません。

例えば「店舗情報」という設定メニューを新しく追加したい場合は以下のように追記します。

[
  {
    "name": "theme_info",
    "theme_name": "Combine",
    "theme_author": "KrownThemes",
    "theme_version": "2.3.1",
  },
  .
  .
  .
  {
    "name": "店舗情報",
    "settings": [
      {
        "type": "text",
        "id": "shop_address",
        "label": "住所"
      },
      {
        "type": "text",
        "id": "shop_tel",
        "label": "TEL"
      },
      {
        "type": "text",
        "id": "shop_bussiness_hour",
        "label": "営業時間"
      }
    ]
  }
]

上記の例では、店舗情報という新しいメニューを追加し、その設定項目として「住所」「TEL」「営業時間」を入力できるようにしています。
（今回はメニューの多言語対応を省略してるので、labelなどは直接記述しています。）

settings_schema.jsonの記述方法は、セクションのliquidファイルをカスタマイズするときのschemaと同様のルールで記載できますので、入力タイプはtext以外も選択することができます。

新しく作成したカスタムメニューの値を呼び出す

settings_schema.jsonにカスタムメニューを追加した後に、テーマのカスタマイズ画面からテーマ設定を開いてください。

そうすると、先ほど追加した「店舗情報」のカスタムメニューが追加されていることがわかります。

正しく動作してるか確認するため、試しに住所を入力してみます。

試しに出力するためにカスタムリキッドのセクションを追加して、上記のように住所を呼び出す記述を行うと…

このようにページに表示することができました。
今回は試しに住所だけを入力して表示させましたが、その他のカスタムメニューの設定項目も同様に呼び出すことが可能になります。

まとめ

というわけで今回は、Shopifyに自由なカスタムメニューを追加して共有の設定項目を呼び出せるような機能を実装しました。

Shopifyはクラウド型のECプラットフォームであり、テーマ設定やパーツデザインを自由にカスタマイズでき、それによりより使いやすいECサイトを少ないコストで制作できるのが魅力です。

ただ、そういったテーマやパーツデザインのカスタマイズを行う場合は専門知識をもった人が作業を行わないと、大切なデータが破損したりという危険性もあります。

テーマファイルを直接編集するようなカスタマイズを行う場合は、必ずバックアップなどを作成し、問題があった場合に元に戻せる準備をしておきましょう。

ShopifyでのECサイト制作ご相談ください

株式会社Neightbor.ではShopifyを使ったECサイト制作についていつでもご相談受け付けております。

「ECサイトを作りたいけど何から始めればいいかわからない」「小規模でいいから自社のECサイトが欲しい」などECサイト制作に興味があるけれど、どこに相談してもいいかわからない方でもまずは弊社にお問い合わせください。それぞれのお客様に適したECサイト制作について提案させて頂きます。

タグ: