特定のページのみヘッダーとフッターを非表示にしたい

日本語 ディスカッション Shopify テーマ

Topic summary

Shopify の Dawn テーマで、特定のページのみヘッダーとフッターを非表示にする方法についての質問と解決策。

基本的な解決方法:

  • theme.liquid ファイル内の {% section 'header' %} と {% section 'footer' %} を条件分岐で囲む
  • トップページ（index）を非表示にする場合: {% if template != 'index' %} を使用
  • 特定のページを非表示にする場合: {% if page.handle != 'ハンドル名' %} を使用

複数ページへの適用:

  • or 演算子を使って複数のページハンドルを指定可能
  • 例: {% if page.handle != 'ハンドル1' or page.handle != 'ハンドル2' %}

高度な方法:

  • 多数のページを処理する場合は、配列化して for ループで処理する方法が便利
  • カンマ区切りでハンドルを定義し、split で配列化して条件判定

注意点:
page.handle は Pages で作成したページにのみ適用される

質問者は提案された解決策で問題を解決できた。

Summarized with AI on November 15. AI used: claude-sonnet-4-5-20250929.
1

はじめまして。
現在テーマDawnでECサイトを作成しています。
デザイン面からTOPページのヘッダーとフッターのみ非表示にしたいのですが上手くいきません。
方法が御座いましたらご教示いただけますと幸いです。

2

theme.liquidを開き、{% section ‘header’ %}と{% section ‘footer’ %}の部分を以下のようにしてください。

{% if template != 'index' %}
	{% section 'header' %}
{% endif %}

{% if template != 'index' %}
	{% section 'footer' %}
{% endif %}

トップページは「index.json」テンプレートを使用するので、テンプレートがindex以外は{% section %}を出力するという分岐をそれぞれに適用させます。

また、{% unless == ‘index’ %}〜{ % endunless %}を使っても同様の処理が可能です。

1 Like
3

ありがとうございます。
完璧にできました！！

1 Like
4

トップページではなく、特定のページのみ、ヘッダー・フッターを非表示にするにはどうすれば良いでしょうか？

5

「特定のページ」というのは、「ドメイン/pages/ハンドル」といったPagesで作成したページのことでしょうか？

以下のような分岐で非表示にできると思います。

{% if page.handle != 'ハンドル名' %}
	{% section 'header' %}
{% endif %}

{% if page.handle != 'ハンドル名' %}
	{% section 'footer' %}
{% endif %}

もしくは

{% unless page.handle == 'ハンドル名' %}
	{% section 'header' %}
{% endunless %}

{% unless page.handle == 'ハンドル名' %}
	{% section 'footer' %}
{% endunless %}
6

とても参考になりました！
こちらの「フッダー・ヘッターの非表示」を複数ページで行う場合はどう記入すればいいんでしょうか？

7

「or」を使って複数指定してください。

https://shopify.dev/docs/api/liquid/basics#operators

{% if page.handle != 'ハンドル1' or page.handle != 'ハンドル2' %}
 {% section 'header' %}
{% endif %}

{% if page.handle != 'ハンドル1' or page.handle != 'ハンドル2' %}
 {% section 'footer' %}
{% endif %}

「page.handle」はPagesで作成したページ以外には適用されないのでご注意ください。

また、該当ページがたくさんあって1行が長くなりすぎてしまう場合や、Pages以外もまとめて処理したい場合は、配列化すると便利かもしれません。

{%- liquid
 assign hide_handles = 'ハンドル1,ハンドル2,ハンドル3' | split: ','
 assign current_handle = canonical_url | split: '/' | last
 assign section_hide = false
 for handle in hide_handles
  if current_handle == handle
   assign section_hide = true
  endif
 endfor

 unless section_hide
  section 'header'
 endunless

 unless section_hide
  section 'footer'
 endunless
-%}
  1. 「hide_handles」に該当ページのハンドルを記述します。
  2. 「current_handle」でカレントページのハンドルを定義します。
  3. 「section_hide」はデフォルト値を「false」に指定します。
  4. 「hide_handles」をforループで処理し「current_handle」と「handle」が一致した場合に「section_hide」の値を「true」で返します。
  5. unless分岐で「section_hide」が「true」でない場合に「section」を出力します。
1 Like
8

ありがとうございます！！！