FROM CACHE - jp_header
このコミュニティはピアツーピアサポートに移行しました。Shopify サポートは今後、このコミュニティへのサービスを提供いたしません。これからもぜひ、他のマーチャントやパートナーとつながり、サポートし合い、経験を共有してください。 当社の行動規範に違反する行動や削除を希望するコンテンツがありましたら、引き続きご報告ください

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

解決済

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

COLA-KUN
Shopify Partner
20 0 4

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

1 件の受理された解決策

mrtc
Shopify Partner
47 20 27

成功

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 %}を使っても同様の処理が可能です。

自社サイトでShopifyテーマのカスタマイズ方法を紹介しています。
お困り事がありましたら、お気軽にメッセージをください。

元の投稿で解決策を見る

7件の返信7

mrtc
Shopify Partner
47 20 27

成功

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 %}を使っても同様の処理が可能です。

自社サイトでShopifyテーマのカスタマイズ方法を紹介しています。
お困り事がありましたら、お気軽にメッセージをください。
COLA-KUN
Shopify Partner
20 0 4

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

tema_hira
訪問者
1 0 0

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

mrtc
Shopify Partner
47 20 27

「特定のページ」というのは、「ドメイン/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 %}

 

自社サイトでShopifyテーマのカスタマイズ方法を紹介しています。
お困り事がありましたら、お気軽にメッセージをください。
abcde1
観光客
7 0 1

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

mrtc
Shopify Partner
47 20 27

「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」を出力します。
自社サイトでShopifyテーマのカスタマイズ方法を紹介しています。
お困り事がありましたら、お気軽にメッセージをください。
abcde1
観光客
7 0 1

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