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

日本語 ディスカッション 技術的な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.
2

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

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

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

{%- 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を、

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

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

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

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

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

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

そのタグを、

上記コードの

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

に設定します。

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

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

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

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

ご参考まで。

(キュー田辺)

1 Like