Dawnテーマで画像バナーでテキストやボタンの位置を画像の下にしたいです。

Topic summary

Dawnテーマの画像バナーで、テキストやボタンを画像の下に常時表示したいという要望。

対応案(画像バナーセクションを使う場合):

  • sections/image_banner.liquid(Liquidテンプレート)をDOMレベルで編集して配置を変更。
  • DOM編集が不要なら、CSSのカスタマイズで位置を下に固定する調整も可能。

対応案(セクションを分ける場合):

  • 画像バナーには画像のみを設定し、その直下にリッチテキストセクションを配置して、テキスト/ボタンを常時表示。

用語補足:

  • DOMレベル編集=テンプレート構造の変更、CSS=見た目の配置変更、リッチテキスト=任意のテキストやボタンを置けるコンテンツ。

結果/最新状況:

  • 画像バナーの下にリッチテキストを置く方法で対応し、問題は解決。
  • 具体的なコード例やCSSスニペットの提示はなし。
Summarized with AI on February 16. AI used: gpt-5.

dawnテーマを使っています。画像バナーのセクションで「モバイル上にコンテナを表示」にチェックした時のように、画像の下にテキストやボタンが表示されるのを、常に表示されるようにしたいです。

ご教授お願いします。

画像バナーセクションを使用して、画像の下にテキストやボタンを常に表示したい、というご質問なのか、

画像バナーセクションにこだわらず、画像の下にテキストやボタンを常に表示したい、というご質問なのかによって回答が変わります。

画像バナーセクションを使用して、画像の下にテキストやボタンを常に表示したい場合

DOMレベルでカスタマイズされたい場合は、

画像バナーセクションのコードは、

Dawn5.0では、sections/image_banner.liquid にありますので、こちらをカスタマイズいただくのが良いかと思います。

https://github.com/Shopify/dawn/blob/main/sections/image-banner.liquid

DOMレベルでのカスタマイズが不要であれば、

CSSのカスタマイズだけでも調整可能かと思います。

画像バナーセクションにこだわらず、画像の下にテキストやボタンを常に表示したい場合

新たにセクションを作成いただくか、

画像バナーセクションには画像だけを設定し、

そのすぐ下に、リッチテキストセクションを配置する、

というやり方でも、

実現できそうです。

ご参考まで。

(キュー田辺)

ありがとうございます。画像バナーの下にリッチテキストを置くことで対応できました。