最近はShopify(ショッピファイ)を使うことが多くなりました。
Shopifyはカナダの企業が展開しているEコマース用のプラットフォームで、世界のCMS市場ではWordPressに次いで2位とのこと。知っておいて損はありません。
約3年前から使ってるのですが、当時は日本語のマニュアルもなくGoogle翻訳なくては構築できませんでしたが、日本語に対応してからは国内でも徐々に人気が出てきています。
使ったことのない方は、是非無料体験してみて下さい。
初めてiPhoneを触ったときくらいの衝撃です。
さて、本題です。
柔軟なカスタマイズができるのも、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ファイルをエディタで開き、最初の<svg>
タグを以下の様に編集します。
<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-line" viewBox="0 0 512 512">
「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 %} <li> <a target="_blank" href="//social-plugins.line.me/lineit/share?url={{ shop.url | append: share_permalink }}" class="btn btn--small btn--share share-line"> {% include 'icon-line' %} <span class="share-title" aria-hidden="true">{{ 'general.social.share_on_line' | t }}</span> <span class="visually-hidden">{{ 'general.social.alt_text.share_on_line' | t }}</span> </a> </li> {% endif %}
6. 設置完了!
商品ページをご確認ください。
こんな感じで設置されてるはずです。

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