Tag: dawn

Shopifyの公式無料テーマであるDawnを活用して、ECサイトを開発する機会が増え、Dawnの良いところ悪いところが見えてきました。 特に困ったケースが、 といったデザインの要望です。 しかし、Dawn の標準設定には「ページごとにヘッダーの色を切り替える」機能はありませんでした。 この記事では、Dawn で特定のページだけヘッダーの色を変えるための考え方と実装方法を整理します。 Dawnでページ別にヘッダー色を変えるのが難しい理由 Dawn のヘッダーは、sections/header.liquid で 全ページ共通のセクションとして管理されています。 そのため、 といった形で、ページごとに別のヘッダーを設定する前提にはなっていません。 実例も紹介しますが、結果として といった実装をすると、後から崩れたり、管理しづらくなったりしがちです。 よくあるNGパターン CSSだけでページ判定しようとする 僕もまず最初に考えたのが、CSSで対応する方法です。例えば、よくあるのが、次のような指定です。 TOPページのヘッダーだけ透過させたいケースです。これだけでも多くの場合とりあず動作します。しかしながら、それぞれの設定状況によって次のような問題が起きる可能性があります。 設定したい画面が増えたり、別の箇所で設定したCSSによって壊れてしまうかもしれません。 理想的な対処法（設計） より確実にデザインを実装するには、以下のような設計方針で考えていきたいところです。 上記のような設計方針で実装できれば、Dawnの構造を壊さず、後から調整もしやすくなります。 実装例：トップページとそれ以外を判定する ここでは 簡易的な実装例を紹介します。 1. header.liquid にクラスを追加 sections/header.liquid を開き、ヘッダーのラッパー要素に条件分岐を追加します。 この例の通りに更新すると というクラスが付与されるようになります。 2. CSSでヘッダー色を切り替える 次に クラスに合わせたCSS を追加します。 これで、 という挙動になります。 固定ページ・特定ページだけ変えたい場合 すべてを網羅するのが難しいので、実例ではTOPページだけを判定していますが、条件分岐を調べて増やせば、固定ページや特定テンプレートだけ変更するパターンも作れます。 １例ですが、上記のように実装することも出来ます。 実装時の注意点 実際の運用では、次の点に注意が必要かもです。 特に、「あとから色々調整したくなるケース」が多いので、自分が編集した場所がわかるようにしたり、バックアップを取っておいたりしましょう。 まとめ 簡易的な対応であればこの記事の方法でも十分対応できます！ページ数が増えたり、デザイン調整が頻繁に入る場合は「管理画面から制御できる仕組み」を用意した方が良いかもです。 補足：「管理画面から制御できる仕組み」について ※この記事では 仕組みと簡易実装例を紹介しました。 という方向けに、Dawn専用で実装済みのヘッダー色切り替えパーツを用意しています。 ※Shopify公式テーマ「Dawn」本体は含まれません。