ShareThis' ShopifyにJavascriptコードでツールをインストールする方法

If you would like to customize and manage your tools through the ShareThis Platform instead of using the ShareThis Shopify App, you can follow this steps:

  1. Log in or sign up to the ShareThis プラットフォーム.
  2. Add your domain.
  3. Copy your unique <strong>ShareThis code</strong>. You can find your unique installation <script> code (i.e. <head> code) by navigating into Settings > Setup (in the ShareThis プラットフォーム).
  4. Go to Apps. Enable the App you want to display in your website.
  5. ShopifyのWebサイトにログインします。
  6. 左のナビゲーションバーで、「オンラインストア」＞「テーマ」を選択し、「アクション」ドロップダウンから、「コードの編集」をクリックします。
  7. 異なるファイルやフォルダの中から、「レイアウト」を選択し、「theme.liquid」をクリックします。
  8. <strong>Paste </strong>the unique ShareThis code that you copied from step 3 into the <head> section of your website.
  9. (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.
    1. カスタムリキッドブロックを使用した商品ページへのインラインShareThis ツールの追加
    2. テーマコード編集による商品ページへのインラインShareThis ツールの追加
    3. ページやブログにインラインShareThis ツールを追加する

テーマをカスタマイズする前に、まずバックアップを取ることをお勧めします。 けいめい をクリックしてテーマを複製し、変更を元に戻したい場合のバックアップコピーにします。

1. Adding Inline ShareThis tools to your product page using a Custom Liquid Block

インラインボタンのコードを配置する際に、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. 右上の「保存」をクリックします。

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

2. Adding Inline ShareThis tools to your product page by editing the Theme Code

  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

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

3. Adding Inline ShareThis tools on a page or blog

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