FROM CACHE - jp_header
解決済

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

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

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