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

[mongorian346]

はじめまして。 

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

[Qcoltd · Accepted solution]

@mongorian346様

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

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

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

追加方法

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


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


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


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

<div class="sp-only-footer">
<ul class="sp-footer-menu">
<li><a href="">メニューA</a></li>
<li><a href="">メニューB</a></li>
<li><a href="">メニューC</a></li>
<li><a href="">メニューD</a></li>
</ul>
</div>

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

.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に記載することをお勧めします。

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

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

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

[mongorian346]

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

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

[Qcoltd]

@mongorian346様

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

追加方法

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

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

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

<div class="sp-only-footer">
<ul class="sp-footer-menu">
<li><a href="">メニューA</a></li>
<li><a href="">メニューB</a></li>
<li><a href="">メニューC</a></li>
<li><a href="">メニューD</a></li>
</ul>
</div>

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

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

.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;
  }
}

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