Dawnで特定のページだけヘッダーの色を変える方法

Shopifyの公式無料テーマであるDawnを活用して、ECサイトを開発する機会が増え、Dawnの良いところ悪いところが見えてきました。

特に困ったケースが、

• トップページは透明ヘッダーにしたい
• 下層ページは白背景のヘッダーにしたい
• 特定の固定ページだけ雰囲気を変えたい

といったデザインの要望です。

しかし、Dawn の標準設定には「ページごとにヘッダーの色を切り替える」機能はありませんでした。

この記事では、Dawn で特定のページだけヘッダーの色を変えるための考え方と実装方法を整理します。

Dawnでページ別にヘッダー色を変えるのが難しい理由

Dawn のヘッダーは、sections/header.liquid で 全ページ共通のセクションとして管理されています。

そのため、

• トップページ用
• 固定ページ用
• 商品ページ用

といった形で、ページごとに別のヘッダーを設定する前提にはなっていません。

実例も紹介しますが、結果として

• CSSだけで無理やり上書きする
• body クラスを当てずっぽうで指定する

といった実装をすると、後から崩れたり、管理しづらくなったりしがちです。

よくあるNGパターン

CSSだけでページ判定しようとする

僕もまず最初に考えたのが、CSSで対応する方法です。例えば、よくあるのが、次のような指定です。

body.template-index header {
  background-color: transparent;
}

TOPページのヘッダーだけ透過させたいケースです。これだけでも多くの場合とりあず動作します。しかしながら、それぞれの設定状況によって次のような問題が起きる可能性があります。

• 固定ページ・コレクションで条件が増える
• スクロール時のヘッダー挙動と衝突する
• Dawnアップデートでクラス構造が変わる
• 管理画面から制御できない

設定したい画面が増えたり、別の箇所で設定したCSSによって壊れてしまうかもしれません。

理想的な対処法（設計）

より確実にデザインを実装するには、以下のような設計方針で考えていきたいところです。

• ページ判定は Liquid 側で行う
• ヘッダーに「状態クラス」を付与する
• CSS はクラス切り替えだけを担当する
• JavaScript には極力依存しない

上記のような設計方針で実装できれば、Dawnの構造を壊さず、後から調整もしやすくなります。

実装例：トップページとそれ以外を判定する

ここでは 簡易的な実装例を紹介します。

1. header.liquid にクラスを追加

sections/header.liquid を開き、
ヘッダーのラッパー要素に条件分岐を追加します。

<header
  class="header
  {% if template.name == 'index' %}
    header--top
  {% else %}
    header--default
  {% endif %}
">

この例の通りに更新すると

• トップページ → header--top
• それ以外 → header--default

というクラスが付与されるようになります。

2. CSSでヘッダー色を切り替える

次に クラスに合わせたCSS を追加します。

.header--top {
  background-color: transparent;
}

.header--default {
  background-color: #ffffff;
}

これで、

• トップページは透明ヘッダー
• 下層ページは白ヘッダー

という挙動になります。

固定ページ・特定ページだけ変えたい場合

すべてを網羅するのが難しいので、実例ではTOPページだけを判定していますが、条件分岐を調べて増やせば、固定ページや特定テンプレートだけ変更するパターンも作れます。

{% if template.name == 'index' %}
  header--top
{% elsif template.name == 'page' %}
  header--page
{% else %}
  header--default
{% endif %}

１例ですが、上記のように実装することも出来ます。

実装時の注意点

実際の運用では、次の点に注意が必要かもです。

• ヘッダーがスクロール時に色変更される設定との干渉
• モバイル表示での背景色・可読性
• Dawnアップデート時の差分確認
• ページが増えたときの条件分岐の肥大化

特に、「あとから色々調整したくなるケース」が多いので、自分が編集した場所がわかるようにしたり、バックアップを取っておいたりしましょう。

まとめ

• Dawnでは標準設定でページ別ヘッダー色変更はできない
• CSSだけの対応は壊れやすい
• Liquid でページ判定 → CSSで切り替えが基本
• 運用を考えると管理しやすい構成が重要

簡易的な対応であればこの記事の方法でも十分対応できます！ページ数が増えたり、デザイン調整が頻繁に入る場合は「管理画面から制御できる仕組み」を用意した方が良いかもです。

補足：「管理画面から制御できる仕組み」について

※この記事では 仕組みと簡易実装例を紹介しました。

• 管理画面からページ別にヘッダー色を切り替えたい
• コード編集を最小限にしたい
• 元に戻せる形で導入したい

という方向けに、Dawn専用で実装済みのヘッダー色切り替えパーツを用意しています。

※Shopify公式テーマ「Dawn」本体は含まれません。