商品情報にスキップ
1 1
公開日:2024.03.12

Shopifyのテーマ「Dawn」で告知バーをヘッダーと一緒に固定表示する設定例

Shopifyのテーマ「Dawn」で告知バーをヘッダーと一緒に固定表示する設定例

用途

  • ヘッダー管理・編集
詳細を表示する

Shopifyのテーマ「Dawn」でヘッダーを固定表示する場合、メニューやロゴ、カートなどが含まれる部分だけが固定されます。とはいえ可能であれば告知バーも常に表示されるようにしたいところです。直接コード編集せず、テーマエディタでJavaScriptを使った簡易な設定方法です。


テーマ「Dawn」で告知バーをヘッダーと一緒に固定表示する設定例


【設定方法】テーマエディタでヘッダーにカスタムLiquidセクションを追加してコードを挿入


【補足事項】告知バーが複数ある場合も対応可能 & 常時表示はどのタイプもOK


【補足事項】記述するjavascriptが実行されるタイミングを`load`から`DOMContentLoaded`に変更すれば画面が読み込まれた直後からヘッダーが固定されるが、テーマエラーが表示されるので注意


ご購入(すべて¥0です)いただくと、サンプルコードをご覧いただけるようになります。

すでにご購入済みの方はこちらからログインしてください。

サンプルコード

動作検証済テーマ:Dawn/Rise 15.2.0

テーマエディタでヘッダーにカスタムLiquidセクションを追加してコードを挿入

関連ポスト