Lineアイコン

日本語 ディスカッション 技術的なQ＆A
, ,
1

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

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

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

教えていただけますか？

1 Like
2

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

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

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

①設定ファイル>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ファイルをそのままペーストする。

④次にセクションファイル > 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 -%}
    - {%- render 'icon-LINE' -%}
          {{ 'general.social.links.LINE' | t }}
      
    

  {%- endif -%}

以上の工程でテーマカスタマイズ画面にLINEの枠を新に制作し、アイコンも追加した状態なので、飛ばしたいLINEのリンクを追加していただければ、アイコンを設置できます。

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

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

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

株式会社フルバランス

鶴蒔

3 Likes
3

ありがとうございます。

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

1 Like
4

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?