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

**URL:** <https://community.shopify.com/t/topic/206722>\
**Category:** 技術的なQ＆A\
**Created:** [April 9, 2023, 6:05am UTC](https://community.shopify.com/t/topic/206722 "2023-04-09T06:05:52Z")\
**Posts on this page:** 2\
**Page:** 1

## AI-generated summary

Dawnテーマを使用しているユーザーが、スマホサイズで画面下部に固定アイコンバーを表示させる方法を質問しています。

**要望の詳細：**
- 画面下部に固定でアイコンメニューを横並びに配置
- 商品詳細ページでは非表示にしたい（「カートへ入れる」などのボタンと重複するため）

**提案された解決策：**
フルバランスの渡邉氏から回答があり、CSSの調整で実装可能とのこと。具体的には：
- ヘッダー要素（.header）を`position:fixed;`で画面下に固定
- ハンバーガーメニューのドロワー（.menu-drawer）の位置も調整
- theme.liquidに`<style>`タグでCSSを記述
- 商品ページを除外するには`{% unless template == 'product' %}`の条件分岐で囲む

不明点があれば追加で連絡可能とのことで、質問は解決に向かっている状況です。

<div class="post-metadata">

**Author:** ![mongorian346](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/mongorian346/32/111736_2.png) [@mongorian346](https://community.shopify.com/u/mongorian346)\
**Post date:** [April 9, 2023, 6:05am UTC](https://community.shopify.com/t/topic/206722/1 "2023-04-09T06:05:52Z")

</div>

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

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

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

 ![スクリーンショット_2023-04-09_14_57_00.png](https://canada1.discourse-cdn.com/shopifyforum/original/4X/9/4/a/94a12e01824dc1e29a9c04b73879a5389acfbd77.jpeg)

---

<div class="post-metadata">

**Author:** ![Anonymous\_44fbe07fc59d9ccaacd70575fd5a5155](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/anonymous_44fbe07fc59d9ccaacd70575fd5a5155/32/194200_2.png) [@Anonymous\_44fbe07fc59d9ccaacd70575fd5a5155](https://community.shopify.com/u/Anonymous_44fbe07fc59d9ccaacd70575fd5a5155)\
**Post date:** [April 10, 2023, 9:15am UTC](https://community.shopify.com/t/topic/206722/2 "2023-04-10T09:15:37Z")

</div>

Mongorian346さま

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

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

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

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

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

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

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

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

フルバランス 渡邉