DawnのフッタにLINEアイコンを設置したい

[しょっぱいマン]

初心者です。無料テーマDawnにてサイトを構築中です。

Shopify の Debut テーマに LINE のリンクアイコンを追加する ++ Gaji-Laboブログ

こちらの記事を見て、同様のことがしたくてコードを確認したのですが、テーマが違うせいかよくわかりませんでした。そこで、コード内にtwitter、facebook、pinterest、instagram、tiktok、tumblr、snapchat、youtube、vimeoが確認できましたので、この中の使わないであろうvimeoをlineに変更すれば良いのではと思い試してみたのですがうまくいきません。この方法では実現が難しいでしょうか？

（いじった場所）

▼settings_schema.json

▼cs.schema.json　～　zh-TW.schema.json　

→

"social_line_link": {
"label": "LINE",
"info": "https:\/\/line.me\/shopify"

▼settings_data.json

▼スニペット追加　名前：icon-line.liquid

中身（Font Awesomeからダウンロードしたものに、最初の部分をくっつけただけです）

<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-line" viewBox="0 0 448 512">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.1.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 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

よろしくお願い致します。

[株式会社フルバランス · Accepted solution]

しょっぱいマンさま

コード編集によるカスタマイズはテーマによってファイル名が変わるのでややこしいですよね。

弊社環境でもvimeoをlineに置き換える形で検証してみたところ、下記変更で反映されました。

言語関連のjsonファイルに関しては、en.default.jsonへの変更だけで反映されたのでcs.schema.json～zh-TW.schema.jsonの編集は不要かと思います。

settings.schema.json
"type": "text",
"id": "social_line_link",
"label": "Line",
"info": "t:settings_schema.social-media.settings.social_line_link.info"

settings_data.json

"social_line_link": "",

en.default.schema.json

"social_line_link": {
"label": "Line",
"info": "https:\/\/line.me\/shopify"
}

en.default.json

"links": {
"twitter": "Twitter",
"facebook": "Facebook",
"pinterest": "Pinterest",
"instagram": "Instagram",
"tumblr": "Tumblr",
"snapchat": "Snapchat",
"youtube": "YouTube",
"line": "Line",
"tiktok": "TikTok"
}

footer.liquid

{%- 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 -%}

icon-line.liquid (スニペットに新規作成)

ご質問に記載されていたsvgをコピペ

参考になりましたら幸いです。

またお困りのことがございましたら是非ご質問ください。

株式会社フルバランス　渡邉

[しょっぱいマン]

株式会社フルバランス様

お世話になっております。

初心者の質問内容について、ご検証いただきまして誠にありがとうございます。

ご指導いただきました通りにliquidを編集してみましたが、残念ながらうまくいきませんでした。

設定＞ブランド＞ソーシャルリンク＞ソーシャルリンクを追加で「LINE」アイコンを追加できるということでしょうか？

恐らく何かが違うのだと思い何度も見直しを行っておりますが、私の環境では「vimeo」は出てきますが「LINE」は出て来ない状況です。

[しょっぱいマン]

株式会社フルバランスさま

お世話になっております。

その後何度見直してもliquidは間違いなさそうだしLINEアイコンの表示自体を諦めていましたが、別件で色々調べているうちに何と表示できました＼(^o^)／

自分がやろうとしていたのは①でしたが②で表示されました！

①設定＞ブランド＞ソーシャルリンク＞ソーシャルリンクを追加で「LINE」アイコンを追加

②オンラインストア＞編集＞テーマ設定＞SNS＞URLを指定

②にはLINEが表示されていたので、LINEのURLを指定することでLINEアイコンが表示されました。

なぜ①がダメだったのかは今でもわかりませんが、とりあえず目的は達成できました。

ありがとうございました。

また何かありましたらよろしくお願い致します。