FROM CACHE - jp_header

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

解決済
mongorian346
Shopify Partner
20 0 1

はじめまして。 

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

スクリーンショット_2023-09-08_11_38_48.png

1 件の受理された解決策
Qcoltd
Shopify Partner
935 373 355

成功

@mongorian346

 

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

 

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

 

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

 

追加方法

1.管理画面 > テーマ > カスタマイズボタンをクリック
Qcoltd_0-1694164201838.png

2.フッターの『セクションを追加』をクリックし『カスタムLiquid』を追加
Qcoltd_1-1694164202296.png

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

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

 

Qcoltd_3-1694164202277.png

<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>



5.カスタムCSSに下記CSSを追加

Qcoltd_4-1694164202242.png

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

6.
右上の保存ボタンをクリック

 

 

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

Qcoltd_5-1694164202296.png

 

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

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
https://techlab.q-co.jp/

元の投稿で解決策を見る

3件の返信3
Qcoltd
Shopify Partner
935 373 355

成功

@mongorian346

 

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

 

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

 

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

 

追加方法

1.管理画面 > テーマ > カスタマイズボタンをクリック
Qcoltd_0-1694164201838.png

2.フッターの『セクションを追加』をクリックし『カスタムLiquid』を追加
Qcoltd_1-1694164202296.png

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

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

 

Qcoltd_3-1694164202277.png

<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>



5.カスタムCSSに下記CSSを追加

Qcoltd_4-1694164202242.png

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

6.
右上の保存ボタンをクリック

 

 

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

Qcoltd_5-1694164202296.png

 

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

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
https://techlab.q-co.jp/
mongorian346
Shopify Partner
20 0 1

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

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

Qcoltd
Shopify Partner
935 373 355

@mongorian346

 

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

 

追加方法

1.管理画面のオンラインストア > コードを編集をクリック
Qcoltd_0-1695114933929.png

 

2.検索窓に『footer』と検索し『footer.liquid』を開く
Qcoltd_1-1695114934095.png

 

3.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>

 

Qcoltd_2-1695114934105.png

 

 

4.再び検索窓に『base』と検索し『base.css』を開く
Qcoltd_3-1695114933909.png

 

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

 

Qcoltd_4-1695114933911.png

 

 

 

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

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
https://techlab.q-co.jp/