LoginSignup
4
2

More than 3 years have passed since last update.

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

Last updated at Posted at 2021-03-30

完成イメージ

スクリーンショット 2021-03-30 14.48.53.png

はじめに

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

  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. 完成

スクリーンショット 2021-03-30 14.48.53.png

おわりに

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

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

4
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
2