ShareThis' Shopifyにツールをインストールする方法（ShareThis App付き）

当社のShopifyアプリを使えば、数回のクリックで簡単にシェアボタンやフォローボタンをウェブサイトに追加することができます。 

  1. に移動します。 ShareThis Share Buttonsアプリ をクリックし、アプリの追加ボタンを選択します。
  2. Install the app, then (optional) Pin it to your Shopify Navigation for quicker access.
  3. In the app, go to the settings section and enable your app:
    • Toggle On the ShareThis Script Embed option.
    • Click Save. (If this is disabled, your buttons will not appear.)
  4. Select your preferred ShareThis tool and customize it by choosing your social channels, size, shape, and more:
    • インラインシェアボタン。見出しや製品の近くにシェアボタンを設置すると視認性が高まる。 
    • 付箋シェアボタン。シェアボタンをウェブサイトの左または右のレールに固定し、訪問者がスクロールしながら共有できるようにします。 
    • Follow Buttons:あなたのウェブプレゼンスをトップのソーシャルメディアチャンネルに拡大します。 
    • 同意管理プラットフォーム。 ユーザーの同意設定を簡単に管理し、一般データ保護規則を含むEUのプライバシー規制に対応
  5. Ensure the Enable Buttons selection is On.
  6. Click Update to save your changes.
  7. (Optional) If you are adding Inline tools, choose one of the following methods. Inline tools (Inline Share Buttons, Follow Buttons or Reactions Buttons) require an extra snippet of code to work on your site.

    カスタムリキッドブロックを使って商品ページにインラインShareThis ツールを追加する

    インラインボタンのコードを配置する際に、Shopifyのテーマエディタを使用すると、視覚的なガイドを持つことができます。商品ページに限ったことではありませんが、この説明と最後のビデオに従って、商品説明文にコードを配置することもできます。

    Note: Before customizing your theme, it’s always recommended to make a backup first, follow けいめい をクリックしてテーマを複製し、変更を元に戻したい場合のバックアップコピーにします。

    1. オンラインストアのダッシュボードに移動します。
    2. テーマ」をクリックし、「カスタマイズ」と書かれた緑色のボタンをクリックします。
    3. ライブプレビューをクリックして、ボタンを表示させたいページに移動します。
    4. ボタンを挿入したい場所にマウスを置くと、「セクションを追加」というラベルの付いた青い小さなボタンが表示されます。
    5. 一覧から「 Custom Liquid 」を選択します。
    6. 先ほど表示された左サイドバーの該当するプレースメントコードをコピーして貼り付けてください。
      1. Share Buttonsの配置コードです。
      2. Follow Buttons配置コード
      3. Reaction Buttons placement code
    7. 右上の「保存」をクリックします。

    ご参考までに、プレビューをご覧ください。

    インラインShareThis ツールをページやブログに追加する。

    1. 左のナビゲーションバーで、「オンラインストア」＞「ページ」を選択します。次に、ボタンを表示させたいページをクリックします。 
    2. コンテンツ] セクションの[HTMLを表示する<>]ボタンをクリックします。
    3. ShareThis ツールを表示させたい場所に、下記のプレースメントコードをコピー＆ペーストしてください。
      1. Share Buttonsの配置コードです。
      2. Follow Buttons配置コード

    テーマコードを編集して、商品ページにインラインShareThis ツールを追加する

    1. 左のナビゲーションバーで、「オンラインストア」＞「テーマ 」を選択し、「アクション」＞「 コードの編集」をクリックします。
    2. 左サイドバーで、Sectionsフォルダまでスクロールダウンし、main-product.liquidを選択します（古いテーマを使用している場合、Templatesに 移動してproduct.liquidファイルを探します）。次に、次のコードを見つけます。
      {{ product.description }}
      注： Control + F で "description" という単語を検索できます（コードエディタ内で内容を検索できるように、必ずファイルの内側をクリックしてください）。セクション/エレメントは、最後に"}"文字で区切られます。

    3. 商品説明の上または下に、該当するプレースメントコードをコピー＆ペーストしてください。
      1. Share Buttonsの配置コードです。
      2. Follow Buttons配置コード
      3. Reaction Buttons placement code

    ご参考までに、プレビューをご覧ください。