Lineのお友達追加アイコンを、snsアイコンに並べて追加したい

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

Topic summary

ユーザーがLINEの「お友達追加」アイコンを他のSNSアイコンと並べて表示したいと質問。別のテーマ(Dawn以外)の参考記事を見つけたが、使用中のテーマでは該当コード(small--one-whole site-footer-item-tall)が見つからず困っていた。

解決方法:
フルバランスの渡邉氏が回答し、Dawnテーマの場合はsocial-icons.liquidというスニペットファイルで編集可能と案内。

追加アドバイス:
編集箇所が見つからない場合の一般的な手順も提示:

  1. 検証ツールで編集したい箇所のクラス名を探す
  2. テーマファイルをエクスポートしてVSCodeなどで開く
  3. クラス名で検索する

結果:
質問者は無事解決し、編集箇所の見つけ方も今後活用できると感謝の意を表明。

Summarized with AI on November 22. AI used: claude-sonnet-4-5-20250929.
1

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

LINEの「お友達追加」について、現在、他のSNSアイコンと分けて、表示させているのですが、可能であれば、並べたいと思っています。

下記記事を見つけたのですが、テーマが異なるためか、footer.liquidファイル内で、『small–one-whole site-footer-item-tall』を見つけることができませんでした。

LINEの友達追加ボタン - Shopify Community

「Dawn」テーマにて、どのようにしたらよいか、教えていただけましたら幸いです。

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

2

Ym915様

はじめまして、フルバランスの渡邉です。

ご質問を確認いたしました。

テーマによっては構造が違ってどこを編集すれば良いのか迷いますよね。

DAWNの場合はsocial-icons.liquidというスニペットファイルにて追加できます。

参考までに、編集箇所が見つからない場合は以下手順で該当ファイルを探せますので、お試しいただけますと幸いです。

  1. 検証ツールで編集したい箇所のクラス名を探す

参考記事：https://willcloud.jp/knowhow/dev-tools-01/

  1. テーマファイルをエクスポートし、VSCodeなどのエディターツールで開く

参考記事：https://help.shopify.com/ja/manual/online-store/themes/managing-themes/downloading-themes

  1. VSCode上でクラス名の検索をかける

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

私たちの励みにもなりますので、
お役に立てていればBest Answerボタンを押して頂ければ嬉しいです。

分からない点があれば、またいつでもご連絡ください。

フルバランス 渡邉

3

ありがとうございます。

解決しました！

また、編集箇所の見つけ方も教えていただき、ありがとうございます。

活用させていただきます。