2023/09/11 (更新日: 2023/09/18)

【Shopify】特定のページでヘッダーやフッターの表示・非表示をする方法

Shopify

PR ※当サイトではアフィリエイト広告を利用しています

こんにちは！

本記事では、Shopifyの特定のページでヘッダーやフッターの表示・非表示をする方法をカスタマイズする方法を解説します！

デフォルトのままだと、ヘッダーやフッターは通常通り表示されてるままです。

例えばランディングページ（LP）を作る時は、ヘッダーやフッターを表示させたくないですよね。

例：page.sample-lp.json

上記のように１枚ページであるランディングページ（LP）にはヘッダー・フッターはいらないので、できれば削除したいです。

これらをカスタマイズして、表示・非表示できるように変更していきましょう。

使っているテーマやバージョンは下記になります。

テーマ→Dawn
バージョン→11.0(2023年9月現在)

他のテーマやバージョンが違うとうまくいかないこともあるので、実装前はソースコードをバックアップしたり、テーマ自体を複製したりと対策をしておいてください。

Shopify参考記事一覧

特定のページでヘッダーやフッターの表示・非表示をする方法

方法は、テンプレート名をif文で条件分岐をして表示・非表示の切り替えを行います。

条件分岐の方法


{% if template != 'page.sample-lp' %}
{% endif %}

これで簡単に表示・非表示の切り替えができます。

記述場所はこちらを参考にしてください。※クリックで拡大できます。


    {% if template != 'page.sample-lp' %}
      {% sections 'header-group' %} →ヘッダーが非表示になる
    {% endif %}

    {% if template != 'page.sample-lp' %}
      {% sections 'footer-group' %}  →フッターが非表示になる
    {% endif; %}

このようになればOKです。簡単ですね！