Liquid、JavaScriptなどに関する質問
テーマ「Dawn」で制作しています。
メニュー(ドロワー)とフッターに「LINE」のアイコンを追加したいと考えています。
追加する方法をご教授頂ければと思います。
よろしくお願いいたします。
解決済! ベストソリューションを見る。
成功
ご質問いただいている、LINEアイコンを追加したい件ですが、設置されたい位置やアイコンのサイズがわかりかねますので、下記条件前提で表示する方法を説明させていただきます。
アイコン:正方形
ヘッダー:PCではサーチアイコンの左、スマホではメニュー内ログインボタン上
フッター:共通でSNSアイコンが表示される位置
設定手順
1.管理画面 > コンテンツ > ファイルから使用するアイコンをアップロード
2.管理画面 > オンラインストア > テーマ > カスタマイズボタンの横にある「…」 > コードを編集をクリック
3.コード編集画面の「ファイルを検索」エリアに、『header.liquid』と入力しソートされたファイルを開きます。
4.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>
5.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>
6.コード編集画面の「ファイルを検索」エリアに、『social-icons.liquid』と入力しソートされたファイルを開きます。
7.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>
8.管理画面 > オンラインストア > カスタマイズボタンをクリック
9.左側テーマ設定をクリック
10.カスタム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フッター
スマホフッター
ご参考まで。
(キュー小坂)
成功
ご質問いただいている、LINEアイコンを追加したい件ですが、設置されたい位置やアイコンのサイズがわかりかねますので、下記条件前提で表示する方法を説明させていただきます。
アイコン:正方形
ヘッダー:PCではサーチアイコンの左、スマホではメニュー内ログインボタン上
フッター:共通でSNSアイコンが表示される位置
設定手順
1.管理画面 > コンテンツ > ファイルから使用するアイコンをアップロード
2.管理画面 > オンラインストア > テーマ > カスタマイズボタンの横にある「…」 > コードを編集をクリック
3.コード編集画面の「ファイルを検索」エリアに、『header.liquid』と入力しソートされたファイルを開きます。
4.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>
5.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>
6.コード編集画面の「ファイルを検索」エリアに、『social-icons.liquid』と入力しソートされたファイルを開きます。
7.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>
8.管理画面 > オンラインストア > カスタマイズボタンをクリック
9.左側テーマ設定をクリック
10.カスタム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フッター
スマホフッター
ご参考まで。
(キュー小坂)
初めまして、dawn(13.0.1)のメインテーマを複製して作成してます。
上記内容の10.のカスタムCSSを実行致しますと、
「オンラインストアのエディタセッションを公開できません」
というエラーが出てくるようになりました。(最初は出てこなかった)下記の解決策以外に何か方法ありますでしょうか?
また、以下の内容を変更しております。
1.5.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>
サポートの選択肢が増えていく中、最適となる選択の判断が難しくなっているかと存じます。今回は問題の解決に最適となるサポートの選択方法を、紹介させて頂きます。 選択肢のご紹介...
By Mirai Oct 6, 20242023年初頭、Shopifyペイメントアカウント、及びShopifyアカウント全体のセキュリティを強化する為の変更が適用されました。ユーザーのアカウントセキュリティを強化す...
By Mirai Sep 29, 2024概要: 年末/年明けは、消費者が最もショッピングを行う時期の一つです。特に、ブラックフライデー・サイバーマンデー(BFCM)は、世界中で注目される大規模なセールイベントであ...
By JapanGuru Sep 25, 2024