Shopifyに「LINEで送る」ボタンを追加する方法

Shopifyカスタマイズの最新情報は「10ca」にて紹介しております。
【Shopify】独自のシェアボタンを実装

最近はShopify（ショッピファイ）を使うことが多くなりました。

Shopifyはカナダの企業が展開しているEコマース用のプラットフォームで、世界のCMS市場ではWordPressに次いで2位とのこと。知っておいて損はありません。

約3年前から使ってるのですが、当時は日本語のマニュアルもなくGoogle翻訳なくては構築できませんでしたが、日本語に対応してからは国内でも徐々に人気が出てきています。

使ったことのない方は、是非無料体験してみて下さい。
初めてiPhoneを触ったときくらいの衝撃です。

Shopify

さて、本題です。

柔軟なカスタマイズができるのも、Shopifyの魅力のひとつ。

今回は日本のECではお馴染みの「LINEで送る」ボタンを、デフォルトテーマ「Debut」への追加する方法をご紹介します。

1. 言語ファイルの編集

管理画面→オンラインストア→テーマの「現在のテーマ」より、アクション→「コードを編集する」からコードエディタの画面を開きます。

次に「Locales」より言語ファイル「en.default.json」を開きます。

41行目よりソーシャルメディア関連の記述がありますので、以下のように追記して保存します。

"social": {
"share_on_facebook": "Share",
"share_on_twitter": "Tweet",
"share_on_pinterest": "Pin it",
"share_on_line": "Share",
"alt_text": {
"share_on_facebook": "Share on Facebook",
"share_on_twitter": "Tweet on Twitter",
"share_on_pinterest": "Pin on Pinterest",
"share_on_line": "Share on LINE"
}
},

続いて「Locales」より日本語ファイル「ja.json」を開き以下の通り追記し保存します。テキスト内容はお好みで編集してください。

"social": {
"share_on_facebook": "シェア",
"share_on_twitter": "ツイート",
"share_on_pinterest": "ピンする",
"share_on_line": "LINEで送る",
"alt_text": {
"share_on_facebook": "Facebookでシェアする",
"share_on_twitter": "Twitterに投稿する",
"share_on_pinterest": "Pinterestでピンする",
"share_on_line": "LINEで送る"
}
},

2. schemaの編集

テーマエディタで操作できるようにschema（スキーマ）を編集します。

「Config」より「settings_schema.json」を開くと、840行目より「Facebookシェア」を有効にする設定の記述がありますので、とりあえずまるっとコピーて「share_pinterest」の下（915行目）にペーストしましょう。

{
"type": "checkbox",
"id": "share_facebook",
"label": {
"da": "Del på Facebook",
"de": "Teilen auf Facebook",
"en": "Share on Facebook",
"es": "Compartir en Facebook",
"fi": "Jaa Facebookissa",
"fr": "Partager sur Facebook",
"hi": "Facebook पर साझा करें",
"it": "Condividi su Facebook",
"ja": "Facebookでシェアする",
"ko": "Facebook에서 공유",
"nb": "Del på Facebook",
"nl": "Delen op Facebook",
"pt-BR": "Compartilhar no Facebook",
"pt-PT": "Partilhe no Facebook",
"sv": "Dela på Facebook",
"th": "แชร์บน Facebook",
"zh-CN": "在 Facebook 上共享",
"zh-TW": "分享至 Facebook"
},
"default": true
},

idは「share_line」に変更。
labelはほとんど知らない言語なので、「Facebook」の部分を「LINE」に置換するだけの力技でいきますが、こだわる人はちゃんと翻訳してください。
ja（日本語）だけは「LINEで送る」としました。

{
"type": "checkbox",
"id": "share_line",
"label": {
"da": "Del på LINE",
"de": "Teilen auf LINE",
"en": "Share on LINE",
"es": "Compartir en LINE",
"fi": "Jaa LINEissa",
"fr": "Partager sur LINE",
"hi": "LINE पर साझा करें",
"it": "Condividi su LINE",
"ja": "LINEで送る",
"ko": "LINE에서 공유",
"nb": "Del på LINE",
"nl": "Delen op LINE",
"pt-BR": "Compartilhar no LINE",
"pt-PT": "Partilhe no LINE",
"sv": "Dela på LINE",
"th": "แชร์บน LINE",
"zh-CN": "在 LINE 上共享",
"zh-TW": "分享至 LINE"
},
"default": true
},

そして「保存する」をクリックしてください。

3. アイコンの登録

LINEの公式からAIをダウンロードしてSVGに変換するのもアリかもしれませんが、規約的にマズそうだし作業も面倒なので別の方法にします。

Font AwesomeというWebアイコンフォントサービスにLINEアイコンがあります。
LINEアイコン詳細ページの「line」という見出し下の右側にダウンロードアイコンがあるので、それをクリックしてSVGをダウンロードします。

SVGファイルをエディタで開き、最初の タグを以下の様に編集します。



「Snippets」の「新しいsnippetを追加する」をクリックして「icon-line」という名前でスニペットを作成します。

ここに編集したSVGコードを貼り付けて保存します。

4. CSSファイルの編集

「Assets」より「theme.scss.liquid」を開きます。

465行目にソーシャルアイコンのカラー設定がありますので以下の様にLINEのカラーを登録します。

// Social icons
$color-facebook: #3b5998;
$color-twitter: #00aced;
$color-pinterest: #cb2027;
$color-line: #00b900;

続いて5575行目に以下を追記して保存します。

.icon-line {
fill: $color-line;
}

5. liquidを編集する

「Snippets」より「social-sharing.liquid」を開きます。

Pinterestの下に以下のコードを貼り付けて保存します。

{% if settings.share_line %}


{% include 'icon-line' %}
{{ 'general.social.share_on_line' | t }}
{{ 'general.social.alt_text.share_on_line' | t }}


{% endif %}

6. 設置完了！

商品ページをご確認ください。
こんな感じで設置されてるはずです。

他のテーマも似たようなやり方で設置できるはず。