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

日本語 ディスカッション 技術的なQ＆A

Topic summary

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

提案された解決策:

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

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

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

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

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

もしそうでしたら、

{% section 'footer' %}

を、

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

にすることで、

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

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

もし、

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

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

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

{%- 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 -%}

ご参考まで。

(キュー田辺)

1 Like