Shopifyの商品ページに「LINEで送る」ボタンを追加する方法

完成イメージ

#はじめに

こちらの記事を参考に実装しました。

1. 言語ファイルの編集
2. schemaの編集
3. アイコンの登録

までは参考記事と同じです。
これ以降は記事内容が古くなっていたので、
最新の情報をまとめておこうと思います。

実装方法

4. LINEのカラーコードを設定 (css)

オンラインストア > テーマ > アクション > コードを編集する

から、ファイルエディターを開きます。

次に、「Assets」より「theme.css」を開きます。

4251行目から始まる部分に、LINEのカラーコードを設定しましょう。

/Assets/theme.css

/* 4251行目 */
.btn--share {
  background-color: transparent;
  border-color: var(--color-border);
  color: var(--color-text);
  margin-right: 5px;
  margin-bottom: 10px; }
  .btn--share:not([disabled]):hover, .btn--share:focus {
    background-color: transparent;
    border-color: var(--color-btn-social-focus);
    color: var(--color-text); }
  .btn--share .icon {
    vertical-align: middle;
    width: 16px;
    height: 16px;
    margin-right: 4px; }
  .btn--share .icon-facebook {
    fill: #3b5998; }
  .btn--share .icon-twitter {
    fill: #00aced; }
  .btn--share .icon-pinterest {
    fill: #cb2027; }
/* 追加箇所 ここから */
  .btn--share .icon-line {
    fill: #00b900; }
/* 追加箇所 ここまで */

5. 「LINEで送る」ボタンを表示する (html)

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

「LINEで送る」ボタンを表示するためのコードを追記しましょう。

/Snippets/social-sharing.liquid

<!-- /snippets/social-sharing.liquid -->
<ul class="social-sharing">

  <!-- 追加箇所 ここから -->
  {% 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 %}
  <!-- 追加箇所 ここまで -->

  {% if settings.share_facebook %}
    <li>
      <a target="_blank" href="//www.facebook.com/sharer.php?u={{ shop.url | append: share_permalink }}" class="btn btn--small btn--share share-facebook">
        {% include 'icon-facebook' %}
        <span class="share-title" aria-hidden="true">{{ 'general.social.share_on_facebook' | t }}</span>
        <span class="visually-hidden">{{ 'general.social.alt_text.share_on_facebook' | t }}</span>
      </a>
    </li>
  {% endif %}

  {% if settings.share_twitter %}
    <li>
      <a target="_blank" href="//twitter.com/share?text={{ share_title | url_param_escape }}&amp;url={{ shop.url | append: share_permalink }}" class="btn btn--small btn--share share-twitter">
        {% include 'icon-twitter' %}
        <span class="share-title" aria-hidden="true">{{ 'general.social.share_on_twitter' | t }}</span>
        <span class="visually-hidden">{{ 'general.social.alt_text.share_on_twitter' | t }}</span>
      </a>
    </li>
  {% endif %}

  {% if settings.share_pinterest %}
    <li>
      <a target="_blank" href="//pinterest.com/pin/create/button/?url={{ shop.url | append: share_permalink }}&amp;media={{ share_image | img_url: '1024x1024' }}&amp;description={{ share_title | url_param_escape }}" class="btn btn--small btn--share share-pinterest">
        {% include 'icon-pinterest' %}
        <span class="share-title" aria-hidden="true">{{ 'general.social.share_on_pinterest' | t }}</span>
        <span class="visually-hidden">{{ 'general.social.alt_text.share_on_pinterest' | t }}</span>
      </a>
    </li>
  {% endif %}

</ul>

6. 完成

おわりに

この記事がいいなと思ったらLGTMやストックよろしくお願いします。

Ciimaオンラインアートショップ ではShopifyを利用してアート作品の販売を行っています。
そちらもチェックしていただけると嬉しいです。