Lineアイコン

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

Topic summary

質問内容:
CraftテーマのヘッダーとフッターにLINEアイコンを追加する方法についての質問。

提案された解決方法:
6つのステップで実装する手順が提示されました:

  1. settings_schema.json（1313行目付近）にLINEのコードを追加
  2. settings_data.json（102行目付近）にLINEのコード追加
  3. Font AwesomeからLINE SVGアイコンをダウンロード
  4. footer.liquid（33行目付近）にコード埋め込み
  5. en.default.schema.json（246行目付近）にコード追加
  6. social-icons.liquid（13行目付近）にコード追加し、新規スニペットファイルicon-line.liquidを作成

結果:

  • 最初の質問者は成功を報告
  • 別のユーザーは手順3以降で問題が発生し、ステップ5の詳細が不足していると指摘。一部のファイルで既存SNSコードが見つからず、実装に失敗

現状: 解決方法の有効性に差があり、より詳細な説明が必要な可能性がある

Summarized with AI on November 12. AI used: claude-sonnet-4-5-20250929.
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?