Dawn スライドショーの上に表示するボタン(コンテンツ)の位置のカスタマイズとボタンサイズ変更方法

[FABEA]

Dawnのスライドショーでリンク付きボタンを画像の上に表示しているのですが、

下記２点のコード編集方法を教えていただけますでしょうか。

＜前提設定条件＞

デスクトップのコンテンツ位置：左下

デスクトップのコンテンツ配置：左

モバイルのコンテンツ配置：左

1. デスクトップでのコンテンツ表示位置を左下に設定しているが、さらに下に表示させたい

デスクトップのスライドショー表示イメージ

2. モバイルでのボタンサイズが大きすぎるので小さくし、もっと下に表示したい

モバイルでのスライドショー表示イメージ

Shopifyコード編集は初心者です。よろしくお願い致します。

[株式会社フルバランス]

FABEA様

はじめまして、フルバランスの園畑です。

ご質問を確認いたしました。

Dawnのスライドショーですが、以下cssを追加することで調整できるかと思います。

<style>
.slideshow__text {
  position:relative;
}
.slideshow__text .banner__buttons { /* ボタンの位置 */
  position:absolute;
  top:50%;/* 任意の数字 */
}

.slideshow__text .banner__buttons .button {　/* ボタンサイズ調整 */
  min-height: 0;
  min-width: 0;
  padding: 10px 5px;/* 任意の数字 */
}
</style>

もっと自由にレイアウト調整されたい場合は、liquidコードにてカスタマイズをする必要があるかと存じます。

ご参考までに。

[FABEA]

フルバランスの園畑様

早速のご返信ありがとうございます。

仰せの通り、styleのcssをcomponent-slider.cssに追記し、ボタンの位置を変更することはできました。

ただ、ボタンサイズの変更が反映されません。ボタンサイズはどこか別の場所で設定されているのでしょうか。

また、コンテンツの親要素の場所を下を起点に位置設定を行う場合はどこを修正したらいいでしょうか。

見出し・小見出しを入力しないとボタンが上にずれてしまうためです。

ご教示いただければ幸いです。

宜しくお願い致します。