FROM CACHE - jp_header
解決済

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

COSS1
観光客
7 0 1

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

 

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

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

 

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

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

 

{% unless template.suffix contains "landingpage" %}
{% section 'header' %}
{% endunless %}

 

・使用テーマは、Debut

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

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

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

 

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

1 件の受理された解決策

Qcoltd
Shopify Partner
1057 434 422

成功

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

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

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

 

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

そのタグを、

上記コードの

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

に設定します。

 

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

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

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

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

 

ご参考まで。

(キュー田辺)

 

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/

元の投稿で解決策を見る

6件の返信6

Qcoltd
Shopify Partner
1057 434 422

成功

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

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

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

 

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

そのタグを、

上記コードの

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

に設定します。

 

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

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

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

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

 

ご参考まで。

(キュー田辺)

 

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/
COSS1
観光客
7 0 1

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

 

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

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

COSS1
観光客
7 0 1

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

 

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

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

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

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

 

{% unless template.suffix contains "landingpage" %}
{% section 'footer' %}
{% endunless %}

 

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

 

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

Qcoltd
Shopify Partner
1057 434 422

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

 

もしそうでしたら、

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

 

ご参考まで。

(キュー田辺)

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/
COSS1
観光客
7 0 1

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

 

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

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

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

 

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

Qcoltd
Shopify Partner
1057 434 422

@COSS1 様

 

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

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

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

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

 

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

(キュー田辺)

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/