メニューとフッターに「LINE」アイコンの設置方法について

[merrow]

テーマ「Dawn」で制作しています。

メニュー（ドロワー）とフッターに「LINE」のアイコンを追加したいと考えています。

追加する方法をご教授頂ければと思います。

よろしくお願いいたします。

[Qcoltd · Accepted solution]

ご質問いただいている、LINEアイコンを追加したい件ですが、設置されたい位置やアイコンのサイズがわかりかねますので、下記条件前提で表示する方法を説明させていただきます。

アイコン：正方形

ヘッダー：PCではサーチアイコンの左、スマホではメニュー内ログインボタン上

フッター：共通でSNSアイコンが表示される位置

設定手順

１.管理画面 > コンテンツ > ファイルから使用するアイコンをアップロード

２.管理画面 > オンラインストア > テーマ > カスタマイズボタンの横にある「…」 > コードを編集をクリック

３.コード編集画面の「ファイルを検索」エリアに、『header.liquid』と入力しソートされたファイルを開きます。

４.header.liquid内で下記コードを探し、
『<div class="header__icons{% if section.settings.enable_country_selector or section.settings.enable_language_selector %} header__icons--localization header__localization{% endif %}">』
次の行に下記コードを追加

<div  class="header__icon header__icon--summary link  focus-inset small-hide">
  <img class="line_icon" src="1で登録したアイコンのURL">
</div>

５.header.liquid内で下記コードを探し、
『<div class="menu-drawer__utility-links">』
前の行に下記コードを追加

<div class="menu-drawer__icon header__icon header__icon--summary link focus-inset">
  <img class="line_icon" src="1で登録したアイコンのURL">
</div>

６.コード編集画面の「ファイルを検索」エリアに、『social-icons.liquid』と入力しソートされたファイルを開きます。

７.social-icons.liquid内で、下記コードを探し、
『<ul class="footer__list-social list-unstyled list-social">』
次の表に下記コードを追加

<li class="list-social__item">
  <img class="line_icon link" src="1で登録したアイコンのURL">
</li>

８.管理画面 > オンラインストア > カスタマイズボタンをクリック

９.左側テーマ設定をクリック

１０.カスタムCSSを選択し、下記CSSを追加し保存

.line_icon {
  display: block;
  width: 4.4rem;
  height: 4.4rem;
}
@media screen and (min-width: 750px)
  .line_icon {
    width: 2.2rem;
    height: 2.2rem;
    margin: 1.1rem;
  }
}
@media screen and (max-width: 749px) {
  .line_icon {
    width: 2.2rem;
    height: 2.2rem;
    margin: 1.1rem;
  }
}
.menu-drawer__icon {
  padding: 2.2rem 3.2rem;
}

表示例

PCヘッダー

スマホヘッダー

PCフッター

スマホフッター

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

[hwa-japan]

初めまして、dawn(13.0.1)のメインテーマを複製して作成してます。

上記内容の10.のカスタムCSSを実行致しますと、

「オンラインストアのエディタセッションを公開できません」

というエラーが出てくるようになりました。（最初は出てこなかった）下記の解決策以外に何か方法ありますでしょうか？

https://community.shopify.com/c/%E6%8A%80%E8%A1%93%E7%9A%84%E3%81%AAq-a/%E3%82%AB%E3%82%B9%E3%82%BF%...

また、以下の内容を変更しております。

1.５.header.liquid内で下記コードを探し、『<div class="menu-drawer__utility-links">』前の行に下記コードを追加

の場所が発見出来なかったため、未入力です。

2.フッターにデフォルトで入ってるインスタグラムアイコンをヘッダーにも追加したかったのでインスタグラムの内容を追加。

3.リンク内容の記述がなかったのでリンクタグ追加

4.10.の追加CSS内容でアイコンの大きさと位置の変更

コードは下記の通りです。

よろしくお願い致します。

CSS

.line_icon {

  display: block;

  width: 2.4rem;

  height: 4.4rem;

}

@media screen and (min-width: 750px)

  .line_icon {

    width: 2.2rem;

    height: 2.2rem;

    margin: 1.1rem;

  }

}

@media screen and (max-width: 749px) {

  .line_icon {

    width: 2.2rem;

    height: 2.2rem;

    margin: 1.1rem;

  }

}

.menu-drawer__icon {

  padding: 2.2rem 3.2rem;

}

<div class="header__icon header__icon--summary link focus-inset small-hide">

  <a href="リンクurl">

    <img class="line_icon" src="アイコンurl">

  </a>

</div>

<div class="header__icon header__icon--summary link focus-inset small-hide">

  <a href="リンクurl">

    <img class=“instagram_icon" src="アイコンurl">

  </a>

</div>

<li class="list-social__item">

  <a href="リンクurl">

    <img class="line_icon link" src="アイコンurl">

  </a>

</li>