テーマDawnを利用しています。
下記のようにスマホサイズの時に、画面下に固定でアイコンを並べたバーを表示させたいのですが、可能ですか？
できれば商品詳細ページの時は非表示にしたいです。なぜなら「カートへ入れる」や「今すぐ購入」が表示させるようにしたいです。
Topic summary
Dawnテーマを使用しているユーザーが、スマホサイズで画面下部に固定アイコンバーを表示させる方法を質問しています。
要望の詳細：
- 画面下部に固定でアイコンメニューを横並びに配置
- 商品詳細ページでは非表示にしたい（「カートへ入れる」などのボタンと重複するため）
提案された解決策：
フルバランスの渡邉氏から回答があり、CSSの調整で実装可能とのこと。具体的には：
- ヘッダー要素（.header）を
position:fixed;で画面下に固定 - ハンバーガーメニューのドロワー（.menu-drawer）の位置も調整
- theme.liquidに
<style>タグでCSSを記述 - 商品ページを除外するには
{% unless template == 'product' %}の条件分岐で囲む
不明点があれば追加で連絡可能とのことで、質問は解決に向かっている状況です。
Mongorian346さま
はじめまして、フルバランスの渡邉です。
ご質問を確認いたしました。
cssの調整で可能かと存じます。
ヘッダー要素(.header)をposition:fixed;で画面下に固定し、ハンバーガーメニュークリック時に出てくるドロワー（.menu-drawer)の位置も調整するイメージです。
また、css自体をtheme.liquidなどにタグで囲んで書いて、{% unless template == ‘product’ %}{% endunless %}といった分岐で囲めば、商品ページは除外されるかと思います。
ご参考になりましたら幸いです。
私たちの励みにもなりますので、
お役に立てていればBest Answerボタンを押して頂ければ嬉しいです。
分からない点があれば、またいつでもご連絡ください。
フルバランス 渡邉
1 Like