FROM CACHE - jp_header
このコミュニティはピアツーピアサポートに移行しました。Shopify サポートは今後、このコミュニティへのサービスを提供いたしません。これからもぜひ、他のマーチャントやパートナーとつながり、サポートし合い、経験を共有してください。 当社の行動規範に違反する行動や削除を希望するコンテンツがありましたら、引き続きご報告ください

Re: LINEアイコン

解決済

LINEアイコン

大坪陽一
訪問者
2 1 2

初めて質問させて頂きます。

 

Craftというテーマのヘッター、フッターにLINEアイコンを

追加したいのですが設定方法がわかりません。

 

教えていただけますか?

2 件の受理された解決策

株式会社フルバランス
Shopify Partner
1613 573 740

成功

ラインアイコンの追加にはテーマのコードを編集する必要があります。

手順を簡単にまとめさせていただきますので参考にしていただければと思います。

まず、テーマのコードを編集を選択していただき以下方法でコードを編集してください。

 

①設定ファイル>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のリンクを追加していただければ、アイコンを設置できます。

 

何かご不明点あれば、ご質問ください。

解決できましたらベストアンサーいただければ励みになります。

何卒よろしくお願いいします。

 

株式会社フルバランス

鶴蒔

株式会社フルバランス
Shopify専門のEC成長支援会社です。ストアの新規構築から運用や改善のサポートなどShopifyに関する幅広いサービスを行なっております。
ECの技術・実務・成長、お悩みのことがあれば、お気軽にご相談ください。
『つくる人、売る人の成長と成功を最大化する。』 株式会社フルバランス

元の投稿で解決策を見る

大坪陽一
訪問者
2 1 2

成功

ありがとうございます。

LINEアイコンを設置することが出来ました。

元の投稿で解決策を見る

3件の返信3

株式会社フルバランス
Shopify Partner
1613 573 740

成功

ラインアイコンの追加にはテーマのコードを編集する必要があります。

手順を簡単にまとめさせていただきますので参考にしていただければと思います。

まず、テーマのコードを編集を選択していただき以下方法でコードを編集してください。

 

①設定ファイル>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のリンクを追加していただければ、アイコンを設置できます。

 

何かご不明点あれば、ご質問ください。

解決できましたらベストアンサーいただければ励みになります。

何卒よろしくお願いいします。

 

株式会社フルバランス

鶴蒔

株式会社フルバランス
Shopify専門のEC成長支援会社です。ストアの新規構築から運用や改善のサポートなどShopifyに関する幅広いサービスを行なっております。
ECの技術・実務・成長、お悩みのことがあれば、お気軽にご相談ください。
『つくる人、売る人の成長と成功を最大化する。』 株式会社フルバランス
大坪陽一
訪問者
2 1 2

成功

ありがとうございます。

LINEアイコンを設置することが出来ました。

chottomat
訪問者
2 0 1

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?