【Shopify】ページによってヘッダーを使い分けるときの設定方法

ShopifyでECサイトを制作するとき、ECサイトとしてだけではなく、コーポレートサイト（店舗サイト）＋ECサイトの構成で制作することもあると思います。

その際、ECサイト領域のヘッダーとECサイト以外の領域のヘッダーを別々にしたいということがあります。

今回はShopifyでページによるヘッダーの使い分けをする方法をまとめていきます。

Shopifyのテーマ

この記事の中で利用するテーマは、Shopifyのデフォルトテーマである「Dawn」を使っていきます。

今回はDawnでご紹介していきますが、他のテーマでもほぼ同様の手順でヘッダーの使い分け設定ができると思います。（テーマごとに利用するファイル名が違う可能性はありますのでご注意ください。）

ヘッダー使い分けの設定手順

手順１：テーマファイルのコード編集画面を開く

今回は直接Dawnのテーマファイルを編集していくため、テーマのコード編集画面を開きます。

手順２：新しいヘッダーファイルの作成

「新しいセクションを追加する」から新しいヘッダー用のliquidファイルを作成します。

このときのファイル名は任意の名前で大丈夫です。
今回は「header-top.liquid」というファイル名で進めていきます。

header-top.liquidのファイル内容はとりあえず既存のヘッダーファイル「header.liquid」からコピペでOKです。

記述を修正

修正する箇所は、「sections.header.~」を「sections.header-top.~」というように変更します。header-topの部分は設定したファイル名と同じものにしてもらえれば大丈夫です。

全て変更したら保存をしてください。

手順３：新しいヘッダーファイル呼び出し用のJSONファイル作成

先ほど作成したヘッダーファイルを呼び出せるようにheader-top-group.jsonというJSONファイルのセクションを作成します。

この「header-top」の部分も任意の名前になりますので、先ほど作成したヘッダーファイル名と同様の名前にしてください。

header-top-group.jsonの記述内容としては、既存のheader-group.jsonファイルをそのままコピペしてください。

記述を修正

header-top-group.jsonで修正を行う記述は上記の赤線部分です。
赤線部分を新しいヘッダーファイル名とリンクするように記述を変更してください。

nameの下にも「”type”: “header”」という記述があるのですが、この部分はShopifyのセクション固定値として用意されている「header」になりますのでそのままで大丈夫です。

修正が完了したら保存してください。

手順４：テーマレイアウトファイル編集

次にtheme.liquidファイルでURLによる表示ヘッダーの振り分け設定を行います。

デフォルトでは{% sections ‘header-group’ %}という記述がある箇所があるのですが、ここで特定URL配下では元々のヘッダーを、それ以外では新しいヘッダーを呼び出す分岐記述を行います。

    {% if request.path contains '/collections'
        or request.path contains '/pages/store'
        or request.path contains '/products'
        or request.path contains '/cart' %}
      <!-- EC領域 -->
      {% sections 'header-group' %}
    {% else %}
      <!-- 店舗サイト領域 -->
      {% sections 'header-top-group' %}
    {% endif %}

上記ではECサイト部分のみ既存ヘッダーを表示し、それ以外では新しいヘッダーを呼び出せるようになります。

詳しい振り分けの設定は各自の目的に適したやり方で実装してください。