【Dawn】フッターのSNSアイコンにLINEを追加する方法

# Shopifyノウハウ # Shopify運営店舗向け情報

はじめに

Shopifyでオンラインストアを運営していると、顧客とのコミュニケーション手段としてLINEを活用したいと考える方も多いのではないでしょうか。
LINEは大多数のユーザーにとって馴染みがあり、メルマガよりもLINEの方がメッセージの開封率が高くなりやすい傾向にあるため、実際に多くのECサイト・ECモールでもマーケティングツールとして活用されています。

しかしShopifyのDawnテーマには標準でLINEアイコンが含まれておらず、「LINEの設定項目がない」「アイコンを表示してLINEの登録へと誘導したい」といったお悩みを抱えているマーチャントさんも少なくありません。

そこで本記事では、プログラミングの知識がない方でも安心して実践できるよう、コピペで完結できる、DawnへのLINEアイコンの追加方法をステップバイステップでご紹介していきます！

実装方法

1. テーマ設定ファイルにLINEのURL入力欄を追加

テーマエディタ上でLINEのURLを設定できるようにするため、「settings_schema.json」を編集してLINEの設定を追加します。
ファイル内で

"name": "t:settings_schema.social-media.name"
と書かれている箇所を見つけ、他のSNSリンクの設定と同様に、以下のコードを追加してください。（画像はクリックで拡大します） 
{
  "type": "text",
  "id": "social_line_link",
  "label": "LINE"
}

これで、テーマエディタのテーマ設定 > SNS でLINEのURL設定が可能になります。
ここに、LINE公式アカウントのURL（例：https://lin.ee/xxxxxxx）を入力してください。

2. アイコン表示用のスニペットファイルを作成

LINEアイコン用のスニペットファイル「icon-line.liquid」を、下記内容で新規作成します。 

<svg aria-hidden="true" class="icon icon-line" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
    <path fill="currentColor" fill-rule="evenodd" d="M311 196.8v81.3c0 2.1-1.6 3.7-3.7 3.7h-13c-1.3 0-2.4-.7-3-1.5l-37.3-50.3v48.2c0 2.1-1.6 3.7-3.7 3.7h-13c-2.1 0-3.7-1.6-3.7-3.7V196.9c0-2.1 1.6-3.7 3.7-3.7h12.9c1.1 0 2.4 .6 3 1.6l37.3 50.3V196.9c0-2.1 1.6-3.7 3.7-3.7h13c2.1-.1 3.8 1.6 3.8 3.5zm-93.7-3.7h-13c-2.1 0-3.7 1.6-3.7 3.7v81.3c0 2.1 1.6 3.7 3.7 3.7h13c2.1 0 3.7-1.6 3.7-3.7V196.8c0-1.9-1.6-3.7-3.7-3.7zm-31.4 68.1H150.3V196.8c0-2.1-1.6-3.7-3.7-3.7h-13c-2.1 0-3.7 1.6-3.7 3.7v81.3c0 1 .3 1.8 1 2.5c.7 .6 1.5 1 2.5 1h52.2c2.1 0 3.7-1.6 3.7-3.7v-13c0-1.9-1.6-3.7-3.5-3.7zm193.7-68.1H327.3c-1.9 0-3.7 1.6-3.7 3.7v81.3c0 1.9 1.6 3.7 3.7 3.7h52.2c2.1 0 3.7-1.6 3.7-3.7V265c0-2.1-1.6-3.7-3.7-3.7H344V247.7h35.5c2.1 0 3.7-1.6 3.7-3.7V230.9c0-2.1-1.6-3.7-3.7-3.7H344V213.5h35.5c2.1 0 3.7-1.6 3.7-3.7v-13c-.1-1.9-1.7-3.7-3.7-3.7zM512 93.4V419.4c-.1 51.2-42.1 92.7-93.4 92.6H92.6C41.4 511.9-.1 469.8 0 418.6V92.6C.1 41.4 42.2-.1 93.4 0H419.4c51.2 .1 92.7 42.1 92.6 93.4zM441.6 233.5c0-83.4-83.7-151.3-186.4-151.3s-186.4 67.9-186.4 151.3c0 74.7 66.3 137.4 155.9 149.3c21.8 4.7 19.3 12.7 14.4 42.1c-.8 4.7-3.8 18.4 16.1 10.1s107.3-63.2 146.5-108.2c27-29.7 39.9-59.8 39.9-93.1z"/>
</svg>

3. 「social-icons.liquid」にLINEアイコン用のコードを追加

SNSアイコンを出力している「social-icons.liquid」を開き、他のSNS（FacebookやInstagramなど）の出力コードと同じように、下記のコードを追加します。（画像はクリックで拡大します） 

{% if settings.social_line != blank %}
    <li class="list-social__item">
        <a href="{{ settings.social_line_link }}" class="link list-social__link">
            <span class="svg-wrapper">
                {%- render 'icon-line' -%}
            </span>
        </a>
    </li>
{% endif %}

4. 「footer.liquid」の条件定義にLINEを追加

「footer.liquid」のSNSリンクのリスト生成部分にLINEを追加するため、下記の通り変更します。（画像はクリックで拡大します） 

assign has_social_icons = true
if settings.social_facebook_link == blank and settings.social_instagram_link == blank and settings.social_youtube_link == blank and settings.social_tiktok_link == blank and settings.social_twitter_link == blank and settings.social_pinterest_link == blank and settings.social_snapchat_link == blank and settings.social_tumblr_link == blank and settings.social_vimeo_link == blank
    assign has_social_icons = false
endif

↓ 下記に変更

assign has_social_icons = true
if settings.social_facebook_link == blank and settings.social_instagram_link == blank and settings.social_youtube_link == blank and settings.social_tiktok_link == blank and settings.social_twitter_link == blank and settings.social_pinterest_link == blank and settings.social_snapchat_link == blank and settings.social_tumblr_link == blank and settings.social_vimeo_link == blank and settings.social_line_link == blank
    assign has_social_icons = false
endif


以上の手順により、LINEのURLを設定したうえでフッターの「SNSのアイコン」をオンにすると、LINEのアイコンが表示されるようになります。
アイコンのカラーやサイズを変更したい場合は、任意のCSSファイルにてスタイルをご調整ください。

補足：Font Awesomeの読み込み確認

上記の方法は、「Font Awesome」というアイコンフォントライブラリがストアに読み込まれていることが前提です。
テーマに導入していない場合は以下のようにCDNを「theme.liquid」の<head>内に追加してください。 

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.7.0/css/all.css">

これにより、LINEだけでなく、他の主要なSNSアイコンも簡単に表示できるようになります。

まとめ

いかがでしたが？
EC運営におけるLINE活用は、新商品・セール情報の効果的な配信といったマーケティング効果や、配送状況連絡や購入後のアフターフォローといった顧客サポートの充実など、マーチャント・エンドユーザー双方にとって多くのメリットがあります。

LINEへの導線設置ができた次のステップとしては、公式アカウントでの自動応答設定や友だち登録の特典などを検討してみるのもおすすめです。
ストアに合った施策で、ビジネスをさらに成長させていきましょう。

実装にあたりご不明な点などがありましたら、ぜひお気軽にお問い合わせください！

ストア構築から運用コンサルまで売上UPのための全てをサポート！

共にストアを成長させる併走型コンサルサービスをご提供します
ご相談・ご質問はまずお気軽にご連絡ください

お問い合わせはこちら サービス詳細はこちら
一覧に戻る