完成系はこんな感じ
Debutではないので位置などは多少違うものの大まかには合っていて、config/settings_schema.jsonとsettings_data の編集まではOK
(この時点で恐らくカスタマイズ画面に、SNSのライン項目が登場してるはず？なのでLINEプロフィールリンクを入力)
★別作業として サイトにSNSアイコンの設置
元々SNSアイコンがメニューバーに埋め込まれていたので、sidebar liquidに他のSNSリンクもあったけど、footerに移動したかったので全てsections/footer.liquidにコピー
PCでの中央寄せができてない...わからず放置中
参考サイト
またこのままだとLINEはサイト上に表示されていないので、↑のsections/footer.liquidに
{% if settings.social_line_link != blank %}
<li>
<a href="{{ settings.social_line_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'LINE' }}">
{% include 'icon-line' %}
<span class="icon__fallback-text">LINE</span>
</a>
</li>
{% endif %}
を追加しておく★
話は戻り
LINEアイコンを追加 からが少し違って
>>今回はFont AwesomeというWebアイコンフォントサービスからLINE アイコンの SVGをダウンロードしました。
ダウンロードしたSVGファイルは 、既に存在する他のソーシャルメディアアイコン同様、snippets/ ディレクトリに保存します。ファイル名は他と合わせて icon-line.liquid とします。
SVGファイルの svg要素を、他の svg ファイル同様に以下のように編集します。
<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-line" viewBox="0 0 448 512">
ここまでやると入力したLINEプロフィールには飛べるものの、アイコン画像が透明状態で見えない...
そこでこれに加えて、引用サイト(↑LINEアイコン)に飛んでSVGコードをコピー、icon line liquidに追加した
<svg xmlns="http://www.w3.org/2000/svg" ~省略~ 34.9-81.5z"/></svg>
↑これがあることでうまくアイコン画像がサイト上に反映された
ただ、元々記載されていたSVGコードを削除すると消えてしまったので両方残した