FROM CACHE - jp_header
解決済

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

しょっぱいマン
観光客
16 0 2

初心者です。無料テーマ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

 

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

1 件の受理された解決策

株式会社フルバランス
Shopify Partner
1473 520 651

成功

しょっぱいマンさま

 

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

 

弊社環境でも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をコピペ

 

スクリーンショット 2022-08-25 9.54.30.png

 

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

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

 

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

 

 

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

元の投稿で解決策を見る

3件の返信3

株式会社フルバランス
Shopify Partner
1473 520 651

成功

しょっぱいマンさま

 

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

 

弊社環境でも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をコピペ

 

スクリーンショット 2022-08-25 9.54.30.png

 

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

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

 

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

 

 

株式会社フルバランス(Shopify Experts)
Shopify専門のEC成長支援会社です。ストアの新規構築から運用や改善のサポートなどShopifyに関する幅広いサービスを行なっております。
ECの技術・実務・成長、お悩みのことがあれば、お気軽にご相談ください。
『すべてのブランドの特大成長エンジンを搭載する』 株式会社フルバランス
しょっぱいマン
観光客
16 0 2

株式会社フルバランス様

 

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

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

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

 

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

 

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

 

しょっぱいマン
観光客
16 0 2

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

 

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

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

 

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

 

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

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

 

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

 

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

 

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

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