如何安裝 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 網站。
  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. 從清單中選擇 自定義液體 。
  6. 將相關展示位置代碼複製並粘貼到剛剛出現的左側邊欄中。
    1. 共用按鈕放置代碼：
    2. 分享按鈕 放置代碼
    3. Reaction Buttons placement code
  7. 按兩下右上角的保存。

為方便起見，以下是預覽：

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

  1. 在左側導航欄中，選擇「在線商店>主題」，然後按兩下「操作」 >「編輯代碼」。
  2. 在左側邊欄中，向下滾動到 “部分 ”資料夾，然後選擇 main-product.liquid （如果您使用的是較舊的主題，請轉到範本並找到 product.liquid 檔）。然後，找到以下代碼：
    {{ product.description }}
    注意：您可以使用 Control + F 在其上搜索「描述」一詞（請務必按下文件內部，以便在代碼編輯器中搜索內容），嘗試將按鈕放在具有此名稱的一個或多個部分之後的新行中。一個部分/元素，它用末尾的“}”字元分隔。

  3. 在產品描述的上方或下方複製並粘貼相關的放置代碼。
    1. 共用按鈕放置代碼：
    2. 分享按鈕 放置代碼
    3. Reaction Buttons placement code

為方便起見，以下是預覽：

3. Adding Inline ShareThis tools on a page or blog

  1. 在左側導航欄中，選擇在線商店>頁面。然後，按下要在其中顯示按鈕的頁面。 
  2. 按兩下內容部分中的顯示 HTML <> 按鈕。
  3. 複製並貼上下面的相關放置代碼，無論您想 ShareThis 工具。
    1. 共用按鈕放置代碼：
    2. 分享按鈕 放置代碼
    3. Reaction Buttons placement code