> For the complete documentation index, see [llms.txt](https://docs.omnichat.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.omnichat.ai/features/tong-xun-qu-dao/di-san-fang-ying-yong/chuan-jie-shopify.md).

# 串接 Shopify

串接後會將 Shopify 的會員聯絡人同步到 Omnichat 後台中，後續有登入官網會員的客人在對話插件對話時，對話頁面中就會顯示其會員資料。（功能非自動同步，需手動同步）

{% 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&amp;token=89316e9b-f71d-4111-83f7-52fc77afb10e" alt=""><figcaption></figcaption></figure>

### 步驟二

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

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

{% hint style="info" %}
可同時參照 [Shopify 建立 App 說明文件](https://shopify.dev/docs/apps/build/dev-dashboard/create-apps-using-dev-dashboard)
{% endhint %}

前往 Dev Dashboard，點選右上角 “Create app“

<figure><img src="https://2493459343-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LaFmilpuDQ-f7VKjHCH%2Fuploads%2FT7RnsPiCEg8IpRlwpS1f%2Fimage.png?alt=media&amp;token=de4ccb63-15f1-4fa8-a8c5-ac5b98a9ddb5" alt=""><figcaption></figcaption></figure>

### 步驟三

輸入要建立的 App name，並點選 Create

<figure><img src="https://2493459343-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LaFmilpuDQ-f7VKjHCH%2Fuploads%2F04GP5dzQ2MAl4HTip4hI%2F2.png?alt=media&amp;token=b5c65580-69fd-4935-92be-ad6adf61ded6" alt=""><figcaption></figcaption></figure>

### 步驟四

進到 Create a version 後，往下拉到 Access

<figure><img src="https://2493459343-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LaFmilpuDQ-f7VKjHCH%2Fuploads%2FEMIQFqOyn0vblqrHAAwW%2F3.png?alt=media&amp;token=9f7d8399-249f-411d-9dfa-4a09b0861e20" alt=""><figcaption></figcaption></figure>

### 步驟五

Access 的 Scopes 填入：read\_all\_orders, read\_customers, read\_orders，並且按 Release

<figure><img src="https://2493459343-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LaFmilpuDQ-f7VKjHCH%2Fuploads%2F2Lwl82k4B18peN8ZI4KM%2F4.png?alt=media&amp;token=98c799df-aba3-45d6-9521-2dfc4869bcbb" alt=""><figcaption></figcaption></figure>

### 步驟六

若有需要，可填入版本資訊，並按 Release

<figure><img src="https://2493459343-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LaFmilpuDQ-f7VKjHCH%2Fuploads%2FjHSYUd1duyGxSBwnnYfF%2F5.png?alt=media&amp;token=ea3e7614-46cf-4174-a649-b66591e60d31" alt=""><figcaption></figcaption></figure>

### 步驟七

建立 app 完成

<figure><img src="https://2493459343-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LaFmilpuDQ-f7VKjHCH%2Fuploads%2FXgNqtewwA7dgYQcLgbdD%2F6.png?alt=media&amp;token=285c8a4a-636e-4625-a4dc-4b83cc7be0d1" alt=""><figcaption></figcaption></figure>

### 步驟八

點選右邊回到 Home 點擊 Install App 來安裝

<figure><img src="https://2493459343-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LaFmilpuDQ-f7VKjHCH%2Fuploads%2F8oCluMYHtGyYwxmIPpPa%2F7.png?alt=media&amp;token=42fd8542-4c1c-4de6-bc0a-c0916ec01a48" 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%2FmLUCsGq6BTiHhBNvxd4u%2F8.png?alt=media&amp;token=ac4d35d2-c162-471d-9320-cb2a1ef46ff0" alt=""><figcaption></figcaption></figure>

### 步驟十

點選 Install 進行安裝

<figure><img src="https://2493459343-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LaFmilpuDQ-f7VKjHCH%2Fuploads%2FSP1sKr8BDkyU9dZsTJgS%2F9.png?alt=media&amp;token=16f809be-49e5-4b1f-a709-d853f449e9f6" alt=""><figcaption></figcaption></figure>

### 步驟十一

安裝成功後會顯示在商店後台左手邊的 Side Menu

<figure><img src="https://2493459343-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LaFmilpuDQ-f7VKjHCH%2Fuploads%2FuXepcnxEJohI8owlts5i%2F10.png?alt=media&amp;token=50a216f1-2673-4f01-845e-bc7b768e3879" alt=""><figcaption></figcaption></figure>

### 步驟十二

#### 取得 ”**商店 URL“**

點選 Shopify 後台 > 左下角 Settings

<figure><img src="https://2493459343-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LaFmilpuDQ-f7VKjHCH%2Fuploads%2F3C1kPjQpe3yrC7P7RS6F%2Fimage.png?alt=media&amp;token=764241fc-e480-40f0-9671-a3c9396c9eba" alt=""><figcaption></figcaption></figure>

複製左側上方商店 URL

<figure><img src="https://2493459343-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LaFmilpuDQ-f7VKjHCH%2Fuploads%2FNzKuMXNj3pqA9iXRJscy%2Fimage%201.png?alt=media&amp;token=71625c37-7b6c-4f30-ae6e-7570c459a670" 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&amp;token=27a069b1-124c-4a6e-a9d8-276c01925701" alt=""><figcaption><p>確認網域</p></figcaption></figure>

### 步驟十三

#### 取得 Client ID、Secret

Shopify 後台 > 右上角切換至 Dev Dashboard

<figure><img src="https://2493459343-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LaFmilpuDQ-f7VKjHCH%2Fuploads%2FJMs3Z1eiCxn1hD8Xsr2u%2Fimage.png?alt=media&amp;token=9e3c9381-6901-4e07-b617-b2c93df45db0" alt=""><figcaption></figcaption></figure>

點選設定好的 App

<figure><img src="https://2493459343-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LaFmilpuDQ-f7VKjHCH%2Fuploads%2FBbzk3LfBqNCMJZ3mMUFd%2Fimage%20(1).png?alt=media&amp;token=01a9519a-fc1c-4200-8c48-fef6e73c5bd7" alt=""><figcaption></figcaption></figure>

點選左側 Apps > Settings，取得右側 Credentials 裡的 Client ID、Secret

<figure><img src="https://2493459343-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LaFmilpuDQ-f7VKjHCH%2Fuploads%2FNHYB7mSfofC22OiCZIhH%2Fimage%20(2).png?alt=media&amp;token=3013a649-9562-4b19-aafd-c63a4a1929cf" alt=""><figcaption></figcaption></figure>

### 步驟十四

在 Omnichat 後台貼上前面「步驟十二、十三」取得的 “商店 URL”、“Client ID”、“Secret”

{% hint style="info" %}
會員資料 和 訂單資料 如無特殊需求，可使用相同 App 即可
{% endhint %}

{% hint style="info" %}
可自行依需求開啟 Ako 資料同步

若需要將 Shopify 的會員手機資料新增為 Omnichat 的 WhatsApp 事件，請將 「自動新增 WhatsApp 聯絡人」 打勾，並選擇要同步的帳號串接成功後，在應用程式的右側會顯示功能選單
{% endhint %}

<figure><img src="https://2493459343-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LaFmilpuDQ-f7VKjHCH%2Fuploads%2FuyKSRcToGYuy7mSkEhwf%2F12-4.png?alt=media&amp;token=13d6da08-3e67-40fd-a114-90dfe0b1d0b9" 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%2FMzX2dIUS5Ze7uX8ktrhV%2F%E6%88%AA%E5%9C%96%202023-02-15%20%E4%B8%8A%E5%8D%8810.28.54.png?alt=media&amp;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&amp;token=3517ebaf-d807-4bbb-a467-a25fc0a9d818" alt=""><figcaption><p>取得串接資料後的選單畫面</p></figcaption></figure>

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

立即同步

<figure><img src="https://2493459343-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LaFmilpuDQ-f7VKjHCH%2Fuploads%2FRtNFty6dXJR8EoPqX0J0%2F1783593671416.jpg?alt=media&amp;token=a764cc51-665c-4495-a149-5b570c288d7a" 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%2FeIjTm0FhqH7YPq5dWAFJ%2F1783593700497.jpg?alt=media&amp;token=6e928ddb-5baa-4f01-a4a0-23dab79aa386" alt=""><figcaption></figcaption></figure>

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

{% 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%2FwpDpfVndbWQhcXBSAhjf%2F1783593769573.jpg?alt=media&amp;token=04a1e33b-c46f-4b5f-9a21-06df91277811" alt=""><figcaption></figcaption></figure>

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

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

### 注意事項

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