FROM CACHE - jp_header

スマホサイズの固定バーでアイコンメニューを横並びに表示させたい

解決済

スマホサイズの固定バーでアイコンメニューを横並びに表示させたい

mongorian346
Shopify Partner
23 0 1

テーマDawnを利用しています。

下記のようにスマホサイズの時に、画面下に固定でアイコンを並べたバーを表示させたいのですが、可能ですか?

できれば商品詳細ページの時は非表示にしたいです。なぜなら「カートへ入れる」や「今すぐ購入」が表示させるようにしたいです。

 

スクリーンショット_2023-04-09_14_57_00.png

 

1 件の受理された解決策

株式会社フルバランス
Shopify Partner
1540 550 699

成功

Mongorian346さま


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

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

 

cssの調整で可能かと存じます。

ヘッダー要素(.header)をposition:fixed;で画面下に固定し、ハンバーガーメニュークリック時に出てくるドロワー(.menu-drawer)の位置も調整するイメージです。

 

また、css自体をtheme.liquidなどに<style>タグで囲んで書いて、{% unless template == 'product' %}{% endunless %}といった分岐で囲めば、商品ページは除外されるかと思います。

 

ご参考になりましたら幸いです。

私たちの励みにもなりますので、
お役に立てていればBest Answerボタンを押して頂ければ嬉しいです。

分からない点があれば、またいつでもご連絡ください。

フルバランス 渡邉

株式会社フルバランス(Shopify Experts)
Shopify専門のEC成長支援会社です。ストアの新規構築から運用や改善のサポートなどShopifyに関する幅広いサービスを行なっております。
ECの技術・実務・成長、お悩みのことがあれば、お気軽にご相談ください。
『すべてのブランドの特大成長エンジンを搭載する』 株式会社フルバランス

元の投稿で解決策を見る

1件の返信1

株式会社フルバランス
Shopify Partner
1540 550 699

成功

Mongorian346さま


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

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

 

cssの調整で可能かと存じます。

ヘッダー要素(.header)をposition:fixed;で画面下に固定し、ハンバーガーメニュークリック時に出てくるドロワー(.menu-drawer)の位置も調整するイメージです。

 

また、css自体をtheme.liquidなどに<style>タグで囲んで書いて、{% unless template == 'product' %}{% endunless %}といった分岐で囲めば、商品ページは除外されるかと思います。

 

ご参考になりましたら幸いです。

私たちの励みにもなりますので、
お役に立てていればBest Answerボタンを押して頂ければ嬉しいです。

分からない点があれば、またいつでもご連絡ください。

フルバランス 渡邉

株式会社フルバランス(Shopify Experts)
Shopify専門のEC成長支援会社です。ストアの新規構築から運用や改善のサポートなどShopifyに関する幅広いサービスを行なっております。
ECの技術・実務・成長、お悩みのことがあれば、お気軽にご相談ください。
『すべてのブランドの特大成長エンジンを搭載する』 株式会社フルバランス