# 複数の特定ページのヘッダーを非表示にしたい

**URL:** <https://community.shopify.com/t/topic/169926>\
**Category:** 技術的なQ＆A\
**Created:** [November 22, 2022, 8:49am UTC](https://community.shopify.com/t/topic/169926 "2022-11-22T08:49:06Z")\
**Posts on this page:** 7\
**Page:** 1

## AI-generated summary

Shopifyストアで特定ページのヘッダーを非表示にする方法についての技術相談。質問者は既にランディングページでヘッダーを非表示にしており、特定の商品ページにも同様の設定を追加したいと考えている。

**提案された解決策:**
- `hasHeader`変数を使用し、`template.suffix`と`product.id`で条件分岐
- 商品IDまたは商品タグで対象を指定する2つの方法を提示
- 商品数が多い場合はタグ管理が効率的

**追加の課題:**
フッターについても同様の非表示設定を試みたが、背景色以外が表示されなくなる問題が発生。`hasFooter`変数を使った解決策が提案されたものの、一瞬表示された後すぐ非表示になる現象が続いている。

**現状:**
他のコード部分との干渉の可能性が指摘され、根本的な解決にはプライベートメッセージでURLを共有しての詳細確認が提案されている。ヘッダーの問題は解決済み、フッターの問題は未解決。

<div class="post-metadata">

**Author:** ![COSS1](https://avatars.discourse-cdn.com/v4/letter/c/13edae/32.png) [@COSS1](https://community.shopify.com/u/COSS1)\
**Post date:** [November 22, 2022, 8:49am UTC](https://community.shopify.com/t/topic/169926/1 "2022-11-22T08:49:06Z")

</div>

お世話になっております。

現在、特定のページだけを非表示にしております。

追加で、特定の「商品ページ」もを非表示にしたいと考えております。

theme.liquidに以下のコードがすでに入力されておりまして、

追加で特定の商品ページを追加したい場合はどのように記述すればよろしいでしょうか。

{% unless template.suffix contains “landingpage” %}  
{% section ‘header’ %}  
{% endunless %}

・使用テーマは、Debut

・すでにヘッダー非表示となっているテンプレートは「landingpage.liquid」、

追加で非表示にしたいテンプレートは、商品ページで「item2022.liquid」（仮）

・html・CSSは理解していますが、liquidや分岐の記述にはかなり疎いです。

恐れ入りますが、何卒宜しくお願い致します。

---

<div class="post-metadata">

**Author:** ![Qcoltd](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/qcoltd/32/900_2.png) [@Qcoltd](https://community.shopify.com/u/Qcoltd)\
**Post date:** [November 24, 2022, 12:36pm UTC](https://community.shopify.com/t/topic/169926/2 "2022-11-24T12:36:37Z")

</div>

「特定のページ」の数にもよるのですが、それほど多くないと仮定しまして、

下記ではどうでしょうか？

(unlessで考えると混乱しそうでしたので、ifに変更しています。)

```markup
{%- assign hasHeader = true -%}
{%- if template.suffix contains "landingpage" -%}
  {%- assign hasHeader = false -%}
{%- endif -%}
{%- if template.name == 'product' -%}
  {%- if product.id == 対象の商品ID or product.id == 対象の商品ID or product.id == 対象の商品ID -%}
    {%- assign hasHeader = false -%}
  {%- endif -%}  
{%- endif -%}

{%- if hasHeader -%}
{% section 'header' %}
{%- endif -%}

```

ヘッダーを表示したくない商品のIDを、

```auto
{%- if product.id == 対象の商品ID or product.id == 対象の商品ID or product.id == 対象の商品ID -%}

```

こちらに追加していきます。

商品IDは、ストア管理画面にて、商品の管理画面を開いた際の末尾の数字です。

もし、対象の商品数が多い場合は、下記の方が簡単かもしれません。

```markup
{%- assign hasHeader = true -%}
{%- if template.suffix contains "landingpage" -%}
  {%- assign hasHeader = false -%}
{%- endif -%}
{%- if template.name == 'product' -%}
  {%- if product.tags contains "ヘッダーを表示したくない商品につけたタグ" -%}
    {%- assign hasHeader = false -%}
  {%- endif -%}  
{%- endif -%}

{%- if hasHeader -%}
{% section 'header' %}
{%- endif -%}

```

ヘッダーを表示したくない商品に、商品タグをつけます。

そのタグを、

上記コードの

```auto
ヘッダーを表示したくない商品につけたタグ

```

に設定します。

なお、商品タグを商品詳細ページに出力している場合、

このタグも出力されてしまいますので、

その場合は、商品詳細ページのタグ出力部分をコード編集するか、

表示されても問題がないタグをつけられると良いかと思います。

ご参考まで。

(キュー田辺)

---

<div class="post-metadata">

**Author:** ![COSS1](https://avatars.discourse-cdn.com/v4/letter/c/13edae/32.png) [@COSS1](https://community.shopify.com/u/COSS1)\
**Post date:** [November 25, 2022, 12:57am UTC](https://community.shopify.com/t/topic/169926/3 "2022-11-25T00:57:41Z")

</div>

ご返信ありがとうございます。

無事、理想通りに追加で非表示にすることが出来ました。

誠にありがとうございました。

---

<div class="post-metadata">

**Author:** ![COSS1](https://avatars.discourse-cdn.com/v4/letter/c/13edae/32.png) [@COSS1](https://community.shopify.com/u/COSS1)\
**Post date:** [November 30, 2022, 6:33am UTC](https://community.shopify.com/t/topic/169926/4 "2022-11-30T06:33:53Z")

</div>

追加での質問となり恐れ入ります。

こちらのバージョンはどのような記述になりますでしょうか。

headerをfooterに変えるだけではうまくいかないようで、背景色以外表示されなくなってしまいました。

別の記述方法になるのでしょうか。

theme.liquidには既に以下の内容がありました。

{% unless template.suffix contains “landingpage” %}  
{% section ‘footer’ %}  
{% endunless %}

こちらに追加で、特定の商品ページのを非表示にしたく存じます。

誠に恐れ入りますが、宜しくお願い致します。

---

<div class="post-metadata">

**Author:** ![Qcoltd](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/qcoltd/32/900_2.png) [@Qcoltd](https://community.shopify.com/u/Qcoltd)\
**Post date:** [November 30, 2022, 10:49am UTC](https://community.shopify.com/t/topic/169926/5 "2022-11-30T10:49:21Z")

</div>

ヘッダーを表示しないページと、フッターを表示しないページは、同じページということでよろしかったでしょうか？

もしそうでしたら、

```markup
{% section 'footer' %}

```

を、

```markup
{%- if hasHeader -%}
{% section 'footer' %}
{%- endif -%}

```

にすることで、

ご希望かなうと思うのですが、

上手くいかなったでしょうか？

もし、

ヘッダーを非表示にしたいページと、

フッターを非表示にしたいページが異なる場合は、

下記のうようにされてはいかがでしょうか？

```markup
{%- assign hasFooter = true -%}
{%- if template.suffix contains "landingpage" -%}
  {%- assign hasFooter = false -%}
{%- endif -%}
{%- if template.name == 'product' -%}
  {%- if product.id == 対象の商品ID or product.id == 対象の商品ID or product.id == 対象の商品ID -%}
    {%- assign hasFooter = false -%}
  {%- endif -%}  
{%- endif -%}

{%- if hasFooter -%}
{% section 'footer' %}
{%- endif -%}

```

ご参考まで。

(キュー田辺)

---

<div class="post-metadata">

**Author:** ![COSS1](https://avatars.discourse-cdn.com/v4/letter/c/13edae/32.png) [@COSS1](https://community.shopify.com/u/COSS1)\
**Post date:** [December 1, 2022, 1:46am UTC](https://community.shopify.com/t/topic/169926/6 "2022-12-01T01:46:03Z")

</div>

ご返信ありがとうございます。

一瞬表示されるのですが、すぐ非表示になってしまうので

もしかしたら他の記述部分が悪さしているのかもしれません。

一時的にfooterをdisplay:noneで対応することにしました。

誠にありがとうございました。

---

<div class="post-metadata">

**Author:** ![Qcoltd](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/qcoltd/32/900_2.png) [@Qcoltd](https://community.shopify.com/u/Qcoltd)\
**Post date:** [December 1, 2022, 1:53am UTC](https://community.shopify.com/t/topic/169926/7 "2022-12-01T01:53:42Z")

</div>

@COSS1 様

もし、根本的な解決を目指される場合は、

プライベートメッセージなどで現象を確認できるURLをお送りいただくことで、

より具体的な回答ができるかもしれません。

(必ず解決できるというお約束はできませんが。。。)

必要であればお声がけください。

(キュー田辺)