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

**URL:** <https://community.shopify.com/t/topic/582997>\
**Category:** 日本語\
**Tags:** css\
**Created:** [January 12, 2026, 1:44am UTC](https://community.shopify.com/t/topic/582997 "2026-01-12T01:44:55Z")\
**Posts on this page:** 6\
**Page:** 1

## AI-generated summary

ShopifyのDawnテーマで、特定の商品ページだけヘッダー・フッターを非表示にしたいという相談。専用テンプレートを作成してテーマエディタ上でヘッダー/フッターを消すと、Dawnではそれらが「グローバルセクション」（全ページ共通のセクション）扱いのため、全ページで非表示になってしまう点が原因だった。

提案された対応は、専用テンプレート内の「テンプレート」領域に「カスタムLiquid」セクションを追加し、その中にCSSを入れて対象テンプレートでのみ表示を制御する方法。最終的に、告知バー・ヘッダー・フッターを `display: none !important;` で非表示にするコードを貼り付けて解決した。

重要な注意点:
- 「ヘッダー」や「フッター」領域に追加すると全ページ共通で適用される。
- 必ず対象テンプレートの「テンプレート部分」に追加する必要がある。
- 画像や添付はなく、解決はコードと設定手順の共有で完了している。

<div class="post-metadata">

**Author:** ![Anonymous\_e52b068e13c904a4d5f890233c1a040f](https://avatars.discourse-cdn.com/v4/letter/a/e19b73/32.png) [@Anonymous\_e52b068e13c904a4d5f890233c1a040f](https://community.shopify.com/u/Anonymous_e52b068e13c904a4d5f890233c1a040f)\
**Post date:** [January 12, 2026, 1:44am UTC](https://community.shopify.com/t/topic/582997/1 "2026-01-12T01:44:55Z")

</div>

現在はShopifyテーマエディタDawnを使用しているのですが、特定の商品ページのみ、ヘッダーとフッターを非表示にしたく以下のことを行いました。

１、特定ページ専用のテンプレートを作成  
２、商品ページのテーマテンプレートに割り当て保存  
３、特定ページ専用のテンプレートのヘッダーとフッターを非表示にする

こうすると、特定ページだけではなく、全てのページのヘッダーとフッターが非表示になってしまいます。

Shopifyに問い合わせしたところ、Dawnテーマでは、ヘッダーは「グローバルセクション」です。つまり、エディターでヘッダーを非表示にすると、すべてのページでヘッダーが表示されなくなりますとのことで、

１、コードの編集のAssetsフォルダーで、base.cssを開き  
２、一番下までスクロールして、次のスニペットを貼り付け  
/\* Hide header on no-header template product pages \*/  
.template-product-no-header .header-wrapper {  
display: none !important;  
}

これでも、状態は同じです。

解決方法が分かる方がいらっしゃいましたら、ご教授いただけますと幸です。  
よろしくお願いいたします。

---

<div class="post-metadata">

**Author:** ![Shadab\_dev](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/shadab_dev/32/372863_2.png) [@Shadab\_dev](https://community.shopify.com/u/Shadab_dev)\
**Post date:** [January 12, 2026, 2:41am UTC](https://community.shopify.com/t/topic/582997/2 "2026-01-12T02:41:43Z")

</div>

You can try this. This is a quick and ideal solution as well where you don’t need to create any extra templates.

{% if page and page.handle == ‘landing-page’

or page.handle == ‘thank-you’

or page.handle == ‘promo’

%}

header , footer{

display: none;

}

{% endif %}

In place of landing page or promo you add the name of your pages where you want to hide the header and footer

Best

---

<div class="post-metadata">

**Author:** ![tim\_tairli](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/tim_tairli/32/283567_2.png) [@tim\_tairli](https://community.shopify.com/u/tim_tairli)\
**Post date:** [January 12, 2026, 3:07am UTC](https://community.shopify.com/t/topic/582997/3 "2026-01-12T03:07:09Z")

</div>

If you have a separate template for these pages, then simply add a “Custom liquid” section in template area of this template and paste CSS code there like this:

```auto
<style>
  .header-wrapper {
    display: none !important;
  }
</style>

```

Because this section is part of the template, this code will only render on pages which use this template and will hide header only on those pages.

---

<div class="post-metadata">

**Author:** ![Anonymous\_e52b068e13c904a4d5f890233c1a040f](https://avatars.discourse-cdn.com/v4/letter/a/e19b73/32.png) [@Anonymous\_e52b068e13c904a4d5f890233c1a040f](https://community.shopify.com/u/Anonymous_e52b068e13c904a4d5f890233c1a040f)\
**Post date:** [January 12, 2026, 12:18pm UTC](https://community.shopify.com/t/topic/582997/4 "2026-01-12T12:18:35Z")

</div>

解決しました！  
ありがとう。

Solved! Thank you.

---

<div class="post-metadata">

**Author:** ![PaulNewton](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/paulnewton/32/81148_2.png) [@PaulNewton](https://community.shopify.com/u/PaulNewton)\
**Post date:** [January 12, 2026, 9:03pm UTC](https://community.shopify.com/t/topic/582997/5 "2026-01-12T21:03:52Z")

</div>

翻訳：  
こんにちは、@Anonymous_e52b068e13c904a4d5f890233c1a040f さん。今後同じような問題に直面する他の出品者のために、どのように解決したのか説明していただけませんか？あるいは、解決に役立った投稿を解決策としてマークしてください。

* * *

> **Original English**
>
> Hi @Anonymous_e52b068e13c904a4d5f890233c1a040f for future merchants can you please describe how it was solved, OR mark the poster that HELPED you as the solution.

---

<div class="post-metadata">

**Author:** ![Anonymous\_e52b068e13c904a4d5f890233c1a040f](https://avatars.discourse-cdn.com/v4/letter/a/e19b73/32.png) [@Anonymous\_e52b068e13c904a4d5f890233c1a040f](https://community.shopify.com/u/Anonymous_e52b068e13c904a4d5f890233c1a040f)\
**Post date:** [January 13, 2026, 4:39am UTC](https://community.shopify.com/t/topic/582997/8 "2026-01-13T04:39:16Z")

</div>

これで解決しました。  
（告知バー・ヘッダー・フッター非表示消える指示）

【解決手順】  
１、テーマエディタを開く  
・管理画面 \> 販売チャネル \> オンラインストア \> テーマ \> [カスタマイズ] をクリック。

２、対象のテンプレートを選択  
・画面上部中央のドロップダウンメニューから [商品] \> [作成済みの専用テンプレート（例: product-no-headerなど）] を選択します。

３、「カスタムLiquid」セクションを追加  
・左側のサイドバーメニューにて、「テンプレート」というエリアを探します。  
・[+ セクションを追加] をクリックし、検索窓またはリストから 「カスタムLiquid」 を選択して追加します。  
・追加した「カスタムLiquid」ブロックをクリックして設定を開きます。

４、コードを貼り付け  
・右側の設定パネルにある「Liquidコード」の入力欄に、以下のコードをすべてコピーして貼り付けてください。

```auto
<style>
  /* 告知バーを非表示 */
  .announcement-bar,
  #shopify-section-announcement-bar {
    display: none !important;
  }

  /* ヘッダーを非表示 */
  .header-wrapper,
  .section-header {
    display: none !important;
  }

  /* フッターを非表示 */
  .footer,
  .section-footer {
    display: none !important;
  }
</style>

```

５、保存を押す。

※注意はShopifyのテーマエディタ（左側のサイドバー）は、大きく分けて「ヘッダー（全ページ共通）」「テンプレート（このページのみ）」「フッター（全ページ共通）」の3つのエリアで構成されています。  
そのため特定のページのみに適応したい時は「テンプレート部分」に入れることです。ヘッダーのエリア（またはフッターのエリア）に「カスタムLiquid」を追加してしまうと全ページ共有となってしまいます。