Liquid、JavaScriptなどに関する質問
成功
ラインアイコンの追加にはテーマのコードを編集する必要があります。
手順を簡単にまとめさせていただきますので参考にしていただければと思います。
まず、テーマのコードを編集を選択していただき以下方法でコードを編集してください。
①設定ファイル>settings_schema.jsonを開き、中の1313行目あたりから既存のSNSのものがあります。その中に新しくLINEのコード(以下コード)を埋め込みます。
{
"type": "text",
"id": "social_LINE_link",
"label": "t:settings_schema.social-media.settings.social_LINE_link.label",
"placeholder": "t:settings_schema.social-media.settings.social_LINE_link.info"
},
②設定ファイル>settings_data.jsonを開き、中の102行目あたりから既存SNSのコードがあるのでまたこれもLINEのコードを新たに(以下コード)を追加します。
"social_LINE_link": "",
③次にLINEアイコンを追加します。
今回はFont AwesomeというWebアイコンフォントサービスからLINE アイコンの SVGをダウンロードしました。
ダウンロードしたSVGファイルは 、既に存在する他のソーシャルメディアアイコン同様に、スニペットファイルに新規作成して、その中に保存します。ファイル名は他と合わせて icon-line.liquid とします。
新規作成したliquid内に以下SVGファイルをそのままペーストする。
<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M272.1 204.2v71.1c0 1.8-1.4 3.2-3.2 3.2h-11.4c-1.1 0-2.1-.6-2.6-1.3l-32.6-44v42.2c0 1.8-1.4 3.2-3.2 3.2h-11.4c-1.8 0-3.2-1.4-3.2-3.2v-71.1c0-1.8 1.4-3.2 3.2-3.2H219c1 0 2.1.5 2.6 1.4l32.6 44v-42.2c0-1.8 1.4-3.2 3.2-3.2h11.4c1.8-.1 3.3 1.4 3.3 3.1zm-82-3.2h-11.4c-1.8 0-3.2 1.4-3.2 3.2v71.1c0 1.8 1.4 3.2 3.2 3.2h11.4c1.8 0 3.2-1.4 3.2-3.2v-71.1c0-1.7-1.4-3.2-3.2-3.2zm-27.5 59.6h-31.1v-56.4c0-1.8-1.4-3.2-3.2-3.2h-11.4c-1.8 0-3.2 1.4-3.2 3.2v71.1c0 .9.3 1.6.9 2.2.6.5 1.3.9 2.2.9h45.7c1.8 0 3.2-1.4 3.2-3.2v-11.4c0-1.7-1.4-3.2-3.1-3.2zM332.1 201h-45.7c-1.7 0-3.2 1.4-3.2 3.2v71.1c0 1.7 1.4 3.2 3.2 3.2h45.7c1.8 0 3.2-1.4 3.2-3.2v-11.4c0-1.8-1.4-3.2-3.2-3.2H301v-12h31.1c1.8 0 3.2-1.4 3.2-3.2V234c0-1.8-1.4-3.2-3.2-3.2H301v-12h31.1c1.8 0 3.2-1.4 3.2-3.2v-11.4c-.1-1.7-1.5-3.2-3.2-3.2zM448 113.7V399c-.1 44.8-36.8 81.1-81.7 81H81c-44.8-.1-81.1-36.9-81-81.7V113c.1-44.8 36.9-81.1 81.7-81H367c44.8.1 81.1 36.8 81 81.7zm-61.6 122.6c0-73-73.2-132.4-163.1-132.4-89.9 0-163.1 59.4-163.1 132.4 0 65.4 58 120.2 136.4 130.6 19.1 4.1 16.9 11.1 12.6 36.8-.7 4.1-3.3 16.1 14.1 8.8 17.4-7.3 93.9-55.3 128.2-94.7 23.6-26 34.9-52.3 34.9-81.5z"/></svg>
④次にセクションファイル > footer.liquidを開き33行目あたりに既存SNSのコードが埋まっているのでその中に以下コードを埋め込みます。
== blank and settings.social_LINE_link
⑤ロケール> en.default.schema.jsonを開き、246行目あたりから既存SNSのコードが並んでいるので以下コードを追加
"social_LINE_link": {
"label": "LINE",
"info": "http:\/\/LINE.com\/shopify"
⑥スニペット> social-icons.liquidを開き、13行目あたりから既存SNSのコードが並んでいるのでその中に以下コードを追加する
{%- if settings.social_LINE_link != blank -%}
<li class="list-social__item">
<a href="{{ settings.social_LINE_link }}" class="link list-social__link">
{%- render 'icon-LINE' -%}
<span class="visually-hidden">{{ 'general.social.links.LINE' | t }}</span>
</a>
</li>
{%- endif -%}
以上の工程でテーマカスタマイズ画面にLINEの枠を新に制作し、アイコンも追加した状態なので、飛ばしたいLINEのリンクを追加していただければ、アイコンを設置できます。
何かご不明点あれば、ご質問ください。
解決できましたらベストアンサーいただければ励みになります。
何卒よろしくお願いいします。
株式会社フルバランス
鶴蒔
成功
ラインアイコンの追加にはテーマのコードを編集する必要があります。
手順を簡単にまとめさせていただきますので参考にしていただければと思います。
まず、テーマのコードを編集を選択していただき以下方法でコードを編集してください。
①設定ファイル>settings_schema.jsonを開き、中の1313行目あたりから既存のSNSのものがあります。その中に新しくLINEのコード(以下コード)を埋め込みます。
{
"type": "text",
"id": "social_LINE_link",
"label": "t:settings_schema.social-media.settings.social_LINE_link.label",
"placeholder": "t:settings_schema.social-media.settings.social_LINE_link.info"
},
②設定ファイル>settings_data.jsonを開き、中の102行目あたりから既存SNSのコードがあるのでまたこれもLINEのコードを新たに(以下コード)を追加します。
"social_LINE_link": "",
③次にLINEアイコンを追加します。
今回はFont AwesomeというWebアイコンフォントサービスからLINE アイコンの SVGをダウンロードしました。
ダウンロードしたSVGファイルは 、既に存在する他のソーシャルメディアアイコン同様に、スニペットファイルに新規作成して、その中に保存します。ファイル名は他と合わせて icon-line.liquid とします。
新規作成したliquid内に以下SVGファイルをそのままペーストする。
<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M272.1 204.2v71.1c0 1.8-1.4 3.2-3.2 3.2h-11.4c-1.1 0-2.1-.6-2.6-1.3l-32.6-44v42.2c0 1.8-1.4 3.2-3.2 3.2h-11.4c-1.8 0-3.2-1.4-3.2-3.2v-71.1c0-1.8 1.4-3.2 3.2-3.2H219c1 0 2.1.5 2.6 1.4l32.6 44v-42.2c0-1.8 1.4-3.2 3.2-3.2h11.4c1.8-.1 3.3 1.4 3.3 3.1zm-82-3.2h-11.4c-1.8 0-3.2 1.4-3.2 3.2v71.1c0 1.8 1.4 3.2 3.2 3.2h11.4c1.8 0 3.2-1.4 3.2-3.2v-71.1c0-1.7-1.4-3.2-3.2-3.2zm-27.5 59.6h-31.1v-56.4c0-1.8-1.4-3.2-3.2-3.2h-11.4c-1.8 0-3.2 1.4-3.2 3.2v71.1c0 .9.3 1.6.9 2.2.6.5 1.3.9 2.2.9h45.7c1.8 0 3.2-1.4 3.2-3.2v-11.4c0-1.7-1.4-3.2-3.1-3.2zM332.1 201h-45.7c-1.7 0-3.2 1.4-3.2 3.2v71.1c0 1.7 1.4 3.2 3.2 3.2h45.7c1.8 0 3.2-1.4 3.2-3.2v-11.4c0-1.8-1.4-3.2-3.2-3.2H301v-12h31.1c1.8 0 3.2-1.4 3.2-3.2V234c0-1.8-1.4-3.2-3.2-3.2H301v-12h31.1c1.8 0 3.2-1.4 3.2-3.2v-11.4c-.1-1.7-1.5-3.2-3.2-3.2zM448 113.7V399c-.1 44.8-36.8 81.1-81.7 81H81c-44.8-.1-81.1-36.9-81-81.7V113c.1-44.8 36.9-81.1 81.7-81H367c44.8.1 81.1 36.8 81 81.7zm-61.6 122.6c0-73-73.2-132.4-163.1-132.4-89.9 0-163.1 59.4-163.1 132.4 0 65.4 58 120.2 136.4 130.6 19.1 4.1 16.9 11.1 12.6 36.8-.7 4.1-3.3 16.1 14.1 8.8 17.4-7.3 93.9-55.3 128.2-94.7 23.6-26 34.9-52.3 34.9-81.5z"/></svg>
④次にセクションファイル > footer.liquidを開き33行目あたりに既存SNSのコードが埋まっているのでその中に以下コードを埋め込みます。
== blank and settings.social_LINE_link
⑤ロケール> en.default.schema.jsonを開き、246行目あたりから既存SNSのコードが並んでいるので以下コードを追加
"social_LINE_link": {
"label": "LINE",
"info": "http:\/\/LINE.com\/shopify"
⑥スニペット> social-icons.liquidを開き、13行目あたりから既存SNSのコードが並んでいるのでその中に以下コードを追加する
{%- if settings.social_LINE_link != blank -%}
<li class="list-social__item">
<a href="{{ settings.social_LINE_link }}" class="link list-social__link">
{%- render 'icon-LINE' -%}
<span class="visually-hidden">{{ 'general.social.links.LINE' | t }}</span>
</a>
</li>
{%- endif -%}
以上の工程でテーマカスタマイズ画面にLINEの枠を新に制作し、アイコンも追加した状態なので、飛ばしたいLINEのリンクを追加していただければ、アイコンを設置できます。
何かご不明点あれば、ご質問ください。
解決できましたらベストアンサーいただければ励みになります。
何卒よろしくお願いいします。
株式会社フルバランス
鶴蒔
成功
ありがとうございます。
LINEアイコンを設置することが出来ました。
Just tried this. It didn't work
Things started to unravel from Step 3, and Step 5 didn't provide any details as to actually what part of the script to insert the copied script, into,
"既存SNSのコードが並んでいる"
The codes did not appear in any of these files, or did not exist... what are we supposed to be looking for?
サポートの選択肢が増えていく中、最適となる選択の判断が難しくなっているかと存じます。今回は問題の解決に最適となるサポートの選択方法を、紹介させて頂きます。 選択肢のご紹介...
By Mirai Oct 6, 20242023年初頭、Shopifyペイメントアカウント、及びShopifyアカウント全体のセキュリティを強化する為の変更が適用されました。ユーザーのアカウントセキュリティを強化す...
By Mirai Sep 29, 2024概要: 年末/年明けは、消費者が最もショッピングを行う時期の一つです。特に、ブラックフライデー・サイバーマンデー(BFCM)は、世界中で注目される大規模なセールイベントであ...
By JapanGuru Sep 25, 2024