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

日本語
1

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

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

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

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

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

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

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

2

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

3

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:

<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.

4

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

Solved! Thank you.

5

翻訳：
こんにちは、@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.

8

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

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

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

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

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

<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」を追加してしまうと全ページ共有となってしまいます。