商品情報にスキップ
公開日：2024.03.12
【Dawn】Shopifyのテーマ「Dawn」で告知バーをヘッダーと一緒に固定表示する設定例
用途
Shopifyのテーマ「Dawn」でヘッダーを固定表示する場合、メニューやロゴ、カートなどが含まれる部分だけが固定されます。とはいえ可能であれば告知バーも常に表示されるようにしたいところです。直接コード編集せず、テーマエディタでJavaScriptを使った簡易な設定方法です。
テーマ「Dawn」で告知バーをヘッダーと一緒に固定表示する設定例
【設定方法】テーマエディタでヘッダーにカスタムLiquidセクションを追加してコードを挿入
【補足事項】告知バーが複数ある場合も対応可能 & 常時表示はどのタイプもOK
【補足事項】記述するjavascriptが実行されるタイミングを`load`から`DOMContentLoaded`に変更すれば画面が読み込まれた直後からヘッダーが固定されるが、テーマエラーが表示されるので注意
サンプルコード
動作検証済テーマ：Dawn/Rise 15.2.0
