# 串接 Shopify

{% hint style="info" %}
串接支援情境

* 會員資料同步\
  \- 單次所有會員資料同步\
  \- Webhook 異動即時同步
* 自動新增 WhatsApp 聯絡人
  {% endhint %}

### 步驟一

在 Omnichat 選單中找到串接頁面：「通訊渠道  >  第三方應用」，並點擊 Shopify 的串接按鈕

<figure><img src="https://2493459343-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LaFmilpuDQ-f7VKjHCH%2Fuploads%2F9E4uZEbKRkAJ3z6Ihoqj%2F%E6%88%AA%E5%9C%96%202023-02-15%20%E4%B8%8A%E5%8D%8810.24.56.png?alt=media&#x26;token=89316e9b-f71d-4111-83f7-52fc77afb10e" alt=""><figcaption></figcaption></figure>

### 步驟二

{% hint style="info" %}
若沒有建立過 shopify app，請繼續往下參考

若已經建立過 shopify app，可以直接前往 [步驟八](#bu-zhou-ba)
{% endhint %}

回到 Shopify 設定後台，並點擊左下角的 Settings >> Apps and slaes channel&#x20;

<div><figure><img src="https://2493459343-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LaFmilpuDQ-f7VKjHCH%2Fuploads%2FMGwMaKCgEkFtzfwatY9y%2F%E6%88%AA%E5%9C%96%202024-11-08%20%E4%B8%8A%E5%8D%8810.27.08.png?alt=media&#x26;token=ec4706d4-aa3c-452b-a952-9e29762e40fb" alt=""><figcaption></figcaption></figure> <figure><img src="https://2493459343-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LaFmilpuDQ-f7VKjHCH%2Fuploads%2F6cefaBzuGJfx5W2tCl1B%2F%E6%88%AA%E5%9C%96%202024-11-08%20%E4%B8%8A%E5%8D%8810.27.23.png?alt=media&#x26;token=a9fbc4cf-7be9-479c-b571-a5ad08e24032" alt=""><figcaption></figcaption></figure></div>

### 步驟三

點選 Develop apps >> Create an app

<div><figure><img src="https://2493459343-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LaFmilpuDQ-f7VKjHCH%2Fuploads%2Ffbbeq5ah4TxDTfd10z07%2F%E6%88%AA%E5%9C%96%202024-11-08%20%E4%B8%8A%E5%8D%8810.29.56.png?alt=media&#x26;token=e3ae74f5-1cd2-4bfd-aa08-5acd942e3bec" alt=""><figcaption></figcaption></figure> <figure><img src="https://2493459343-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LaFmilpuDQ-f7VKjHCH%2Fuploads%2FQ1xw1C1IMcL0xqpIAgZx%2F%E6%88%AA%E5%9C%96%202024-11-08%20%E4%B8%8A%E5%8D%8810.30.29.png?alt=media&#x26;token=13c75ed0-334b-41ee-b40d-353014c23f47" alt=""><figcaption></figcaption></figure></div>

### 步驟四

替 App 名稱命名，並選擇有權限的帳號後，進入介面點擊 「Configure Admin API scopes」

<figure><img src="https://2493459343-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LaFmilpuDQ-f7VKjHCH%2Fuploads%2F9GVAXVQGZnB3f6iXlecP%2F%E6%88%AA%E5%9C%96%202024-11-08%20%E4%B8%8A%E5%8D%8810.32.11.png?alt=media&#x26;token=73d6ac38-66c9-4f1c-8ff1-10d2484850cd" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2493459343-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LaFmilpuDQ-f7VKjHCH%2Fuploads%2FliUFbfPwGCQycG7Tg3RJ%2F%E6%88%AA%E5%9C%96%202024-11-08%20%E4%B8%8A%E5%8D%8810.33.53.png?alt=media&#x26;token=f31960d5-57f4-4ac4-8aad-289ccffeaeb4" alt=""><figcaption></figcaption></figure>

### 步驟五

授權 API 權限，需要至少授權 「`read_customers」`

Webhook subscriptions 選擇 2024-04 版本

並點擊頁面最下方的 Save 儲存

<figure><img src="https://2493459343-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LaFmilpuDQ-f7VKjHCH%2Fuploads%2FG3lpNLKwhLcAqSGV2xmn%2F%E6%88%AA%E5%9C%96%202024-11-08%20%E4%B8%8A%E5%8D%8810.36.43.png?alt=media&#x26;token=6eba8a31-164d-4a6e-8310-463422e18d64" alt=""><figcaption></figcaption></figure>

### 步驟六

點擊 Install app 並同意

<figure><img src="https://2493459343-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LaFmilpuDQ-f7VKjHCH%2Fuploads%2F5dmnI2NT7COnT2F16leO%2F%E6%88%AA%E5%9C%96%202024-11-08%20%E4%B8%8A%E5%8D%8810.39.46.png?alt=media&#x26;token=42d8ec05-de5e-4e93-8849-6fb3fa5a1e92" alt=""><figcaption></figcaption></figure>

### 步驟七

點擊 「Reveal token once」 取得 API access token

{% hint style="danger" %}
此 token 僅可顯示一次，請妥善保存
{% endhint %}

<figure><img src="https://2493459343-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LaFmilpuDQ-f7VKjHCH%2Fuploads%2FYjFst5ebiO6Fdmb6ScCq%2F%E6%88%AA%E5%9C%96%202024-11-08%20%E4%B8%8A%E5%8D%8810.42.00.png?alt=media&#x26;token=786287fe-9e99-47c5-9621-c9bfa0f96c73" alt=""><figcaption></figcaption></figure>

### 步驟八

複製所有串接資訊至 Omnichat 後台

若需要將 Shopify 的會員手機資料新增為 Omnichat 的 WhatsApp 事件，請將 「自動新增  WhatsApp 聯絡人」 打勾，並選擇要同步的帳號

<figure><img src="https://2493459343-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LaFmilpuDQ-f7VKjHCH%2Fuploads%2FmUDkVQ3sCwBxz67flCSi%2F%E6%88%AA%E5%9C%96%202024-11-08%20%E4%B8%8A%E5%8D%8810.48.24.png?alt=media&#x26;token=8d812f5e-9414-45be-8e26-55dff523a228" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2493459343-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LaFmilpuDQ-f7VKjHCH%2Fuploads%2FuFJpbVPGDTp22PVPrBa4%2F%E6%88%AA%E5%9C%96%202024-11-08%20%E4%B8%8A%E5%8D%8810.23.11.png?alt=media&#x26;token=a8954c64-a1b2-4f98-8dbb-cfc9e04bff54" alt=""><figcaption></figcaption></figure>

{% hint style="danger" %}
注意：若您有使用自訂網域，需到 「網域」 頁面，使用預設的商店URL， "必須符合 https\://{store\_name}.myshopify.com" 格式，若使用自訂的商店URL，會導致串接失敗。\
\
確認路徑：Shopify設定後台>網域
{% endhint %}

<figure><img src="https://2493459343-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LaFmilpuDQ-f7VKjHCH%2Fuploads%2FEXdM8CUUBnx8SmyQ60yG%2FmessageImage_%E7%B6%B2%E5%9F%9F.jpg?alt=media&#x26;token=27a069b1-124c-4a6e-a9d8-276c01925701" alt=""><figcaption><p>確認網域</p></figcaption></figure>

### 步驟九

串接成功後，會顯示同步按鈕，點擊 「立即同步」 會立刻執行同步功能

點擊「稍後同步」的話，也可以隨時回來串接應用程式的功能選單再度同步

<figure><img src="https://2493459343-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LaFmilpuDQ-f7VKjHCH%2Fuploads%2FMzX2dIUS5Ze7uX8ktrhV%2F%E6%88%AA%E5%9C%96%202023-02-15%20%E4%B8%8A%E5%8D%8810.28.54.png?alt=media&#x26;token=81e1cab3-856c-4921-840d-7b185eea2fa1" alt=""><figcaption></figcaption></figure>

串接成功後，在應用程式的右側會顯示功能選單

<figure><img src="https://2493459343-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LaFmilpuDQ-f7VKjHCH%2Fuploads%2FynjJa2iR34pb94hwC2IV%2F%E6%88%AA%E5%9C%96%202023-01-04%20%E4%B8%8A%E5%8D%8810.21.16.png?alt=media&#x26;token=3517ebaf-d807-4bbb-a467-a25fc0a9d818" alt=""><figcaption><p>取得串接資料後的選單畫面</p></figcaption></figure>

1. 編輯：可以更改商店的串接資訊
2. 資料同步：除了能再次同步聯絡人資料到最新的狀態外，也可以看到上次同步狀態的資訊
3. 解除串接：若要取得不同商店的聯絡人，可以解除串接後再次串接

### 步驟十

完成同步後，會顯示底下畫面。

{% hint style="info" %}
同步資訊中，若「新聯絡人同步數量」為 0，代表這次同步的過程中沒有新增加的聯絡人。
{% endhint %}

<figure><img src="https://2493459343-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LaFmilpuDQ-f7VKjHCH%2Fuploads%2Fq0Buk03KfAZTstunSHlR%2F%E6%88%AA%E5%9C%96%202023-02-15%20%E4%B8%8A%E5%8D%8810.29.17.png?alt=media&#x26;token=1aea071b-fed0-42b6-93d4-aafb77bf7c57" alt=""><figcaption></figcaption></figure>

### 會員資料同步完成後畫面

若完成同步後，可以到「聯絡人及推播訊息 > 網站」的列表中，找到 Shopify 的客人資料。

{% hint style="info" %}
會員資料同步包含以下資料

* 姓名、會員編號、Email、電話、標籤
* 自訂屬性：Shopify - 累積訂單數、Shopify - 累積消費金額、Shopify - 備註、Shopify - Email 行銷同意、Shopify - SMS 行銷同意
  {% endhint %}

<figure><img src="https://2493459343-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LaFmilpuDQ-f7VKjHCH%2Fuploads%2FvZdTs117m8Z4dsNYcNIG%2F%E6%88%AA%E5%9C%96%202023-02-15%20%E4%B8%8A%E5%8D%8810.33.03.png?alt=media&#x26;token=896a6a93-aa23-49b0-a3ac-e31a2928b824" alt=""><figcaption></figcaption></figure>

### 注意事項

1. 若在近期有更新連絡人，但串接後沒有看到聯絡人數量更新，請嘗試解除串接後重新串接。