FROM CACHE - jp_header

特定のページのみヘッダーのカラーを変更したい

mira0
Shopify Partner
105 0 1

特定のページのみ、ヘッダーのカラーを変更したいのですが、どのようにすれば実装できるか教えていただきたいです。

テーマはDawnを使用しています。

よろしくお願いいたします。

1件の返信1

NIIGAKI_HYUGA
Shopify Partner
54 23 15

@mira0 さま

初めまして。新垣です。

 

CSSクラスの作成と特定のページの時にheaderにクラスを追加する条件分岐を作成すれば実装できるかと思います。

コードは擬似的な例です。

#header要素
<header class="main-header {% if page.handle == "該当ページのhandle名" %}custom-page-header-color" {% elsif collection.handle == "該当コレクションのhandle名" %}custom-collection-header-color{% endif %}>
</header>

#CSSファイル
.custom-page-header-color {
  background-color: #yourColorCode; /* ここに希望の色コードを入力 */
}
.custom-collection-header-color {
  background-color: #yourColorCode; /* ここに希望の色コードを入力 */
}

 

または、header.liquidをいくつか作成しておき、上記と同様の条件分岐でheader自体を出し分ける方法も考えられます。

 

以上、参考になりましたら幸いです。

Freelance Solution Engineer | 新垣
JavaScript Liquid Theme, React Remix App
投稿は参考になりましたか?「いいね!」でお教えください。
解決しない場合、個別に対応も可能ですのでプロフィールからお気軽にメッセージください