# スマホサイズの時のみ、ボトムナビゲーションバーを設置したい

**URL:** <https://community.shopify.com/t/topic/248647>\
**Category:** 技術的なQ＆A\
**Tags:** css, html\
**Created:** [September 8, 2023, 2:43am UTC](https://community.shopify.com/t/topic/248647 "2023-09-08T02:43:06Z")\
**Posts on this page:** 4\
**Page:** 1

## AI-generated summary

スマートフォン表示時のみ、画面下部に固定のボトムナビゲーションバーを実装する方法についての質問と回答。

**質問内容:**
- スマホサイズでヘッダーはそのままに、画面下部にアイコンを並べた固定ナビゲーションバーを追加したい
- アプリを使わずに実装したい

**回答された実装方法:**

1. **管理画面からの追加方法:**
   - テーマのカスタマイズ > フッターに「カスタムLiquid」セクションを追加
   - セクションの余白を0pxに設定
   - HTMLマークアップとCSSを追加
   - カスタムCSSは500文字制限があるため、超える場合はbase.cssへの記載を推奨

2. **テーマファイル(liquid)の直接編集方法(Dawn 11.0.0テーマ):**
   - `footer.liquid`の29行目下にHTMLコードを追加
   - `base.css`の最下部にCSSコードを追加
   - メディアクエリ(`@media screen and (min-width: 990px)`)でスマホサイズのみ表示するよう制御

**技術的ポイント:**
- `position: fixed`で画面下部に固定
- フレックスボックスでアイコンを横並び配置
- アイコンやリンク先は別途カスタマイズが必要

<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:** [September 8, 2023, 2:43am UTC](https://community.shopify.com/t/topic/248647/1 "2023-09-08T02:43:06Z")

</div>

はじめまして。

スマホサイズの時、ヘッダーはそのままでさらに画面下部に下記スクショのようにアイコンを並べた固定ナビゲーションバーを設置したいのですが、アプリを使用せずに実装したいです。わかる方がいらっしゃいましたら教えていただきたいです。

 ![スクリーンショット_2023-09-08_11_38_48.png](https://canada1.discourse-cdn.com/shopifyforum/original/4X/2/5/1/2517df9777037d95be25aeaf123523a880e90f2b.jpeg)

---

<div class="post-metadata">

**Author:** ![Qcoltd](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/qcoltd/32/900_2.png) [@Qcoltd](https://community.shopify.com/u/Qcoltd)\
**Post date:** [September 8, 2023, 9:17am UTC](https://community.shopify.com/t/topic/248647/2 "2023-09-08T09:17:11Z")

</div>

@mongorian346 様

ご質問いただいているボトムナビゲーションバーの件ですが、テーマファイル（liquid）を修正し追加する方法と、管理画面のテーマのカスタマイズから追加する方法があります。

テーマファイルを修正した方が無駄なコードが出力されないので、コード的には綺麗なのですが、現在ご利用のテーマが不明なため管理画面のテーマのカスタマイズから追加する方法をご説明させて頂きます。

ご説明するコードはメニューの雛形となりますので、アイコンや名称、リンク先は別途ご設定ください。

### 追加方法

１．管理画面 \> テーマ \> カスタマイズボタンをクリック

 ![Qcoltd_0-1694164201838.png](https://canada1.discourse-cdn.com/shopifyforum/original/4X/f/e/6/fe626e068af0c08f2e228a257b226274de0d3608.png)

２．フッターの『セクションを追加』をクリックし『カスタムLiquid』を追加

 ![Qcoltd_1-1694164202296.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/9/e/9e2dc233efffafeb3d60b93fc09813bdb5e3ad18.jpeg)

３．追加された『カスタムLiquid』を開き、セクションの余白の『上部の余白』『下部の余白』を0pxに変更

 ![Qcoltd_2-1694164202266.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/b/7/b739cf1da069f989c542c9a53d99d29f421f3324.png)

４．カスタマイズされたLiquid内に下記コードを追加

 ![Qcoltd_3-1694164202277.png](https://canada1.discourse-cdn.com/shopifyforum/original/4X/b/7/2/b72b0f7b795d97df83e9c50950f74ad78de557ca.png)

```markup

- メニューA

- メニューB

- メニューC

- メニューD

```

５．カスタムCSSに下記CSSを追加

 ![Qcoltd_4-1694164202242.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/c/e/ce5f5fa163e9799c8e728f1c6d822bafe6f32207.png)

```markup
.sp-only-footer {
  background: #fff;
  border-top: solid 1px #ddd;
  position: fixed;
  width: 100vw;
  bottom: 0;
  z-index: 2;
}
.sp-footer-menu {
  list-style: none;
  padding: 0;
  display: flex;
}
.sp-footer-menu li {
  width: 25%;
  text-align: center;
  font-size: 12px;
}
@media screen and (min-width: 990px) {
  .sp-only-footer {
    display: none;
  }
}

```

※カスタムCSSは500文字までしか追加できない為、500文字を超える場合は、base.css等のテーマファイルのcssに記載することをお勧めします。

６．右上の保存ボタンをクリック

以上でスマートフォンで表示したい際、下記の様なボトムナビゲーションが表示されます。

 ![Qcoltd_5-1694164202296.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/8/6/86d408da41c3ec057f41eaa36526a7b4ad053629.png)

ご参考まで  
(キュー小坂)

---

<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:** [September 8, 2023, 11:43am UTC](https://community.shopify.com/t/topic/248647/3 "2023-09-08T11:43:48Z")

</div>

詳細に返事していただき誠にありがとうございます。

テーマはDAWN 11.0.0を使用しています。テーマファイル（liquid）を修正する方法をお聞きすることは可能でしょうか？

---

<div class="post-metadata">

**Author:** ![Qcoltd](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/qcoltd/32/900_2.png) [@Qcoltd](https://community.shopify.com/u/Qcoltd)\
**Post date:** [September 19, 2023, 9:18am UTC](https://community.shopify.com/t/topic/248647/4 "2023-09-19T09:18:42Z")

</div>

@mongorian346 様

liquidファイルに記述する方法ですが、Dawn11.0.0テーマに変更が加えられていない前提で回答させていただきます。

### 追加方法

１．管理画面のオンラインストア \> コードを編集をクリック

 ![Qcoltd_0-1695114933929.png](https://canada1.discourse-cdn.com/shopifyforum/original/4X/1/a/4/1a4f719332a0b0dd940f5e14077362415e79519d.jpeg)

２．検索窓に『footer』と検索し『footer.liquid』を開く

 ![Qcoltd_1-1695114934095.png](https://canada1.discourse-cdn.com/shopifyforum/original/4X/9/8/b/98b7b28dd9d9e19345ad2ce13216e310981ed11d.png)

３．footer.liquidの29行目の下に下記コードを追加し保存ボタンをクリック

```markup

- メニューA

- メニューB

- メニューC

- メニューD

```

 ![Qcoltd_2-1695114934105.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/5/1/51a69262cf71674dd93876f19df0f4ae6d561601.png)

４．再び検索窓に『base』と検索し『base.css』を開く

 ![Qcoltd_3-1695114933909.png](https://canada1.discourse-cdn.com/shopifyforum/original/4X/b/e/c/bec0c36fab35bd29c0b716841a13afa8341ab790.png)

５．『base.css』の一番下に下記CSSを追加し保存ボタンをクリック

```markup
.sp-only-footer {
  background: #fff;
  border-top: solid 1px #ddd;
  position: fixed;
  width: 100vw;
  bottom: 0;
  z-index: 2;
}
.sp-footer-menu {
  list-style: none;
  padding: 0;
  display: flex;
}
.sp-footer-menu li {
  width: 25%;
  text-align: center;
  font-size: 12px;
}
@media screen and (min-width: 990px) {
  .sp-only-footer {
    display: none;
  }
}

```

 ![Qcoltd_4-1695114933911.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/1/6/164ba34f9d9c1fac8ab98e8775578bef3640aca2.png)

ご参考まで  
(キュー小坂)