# 安裝於 Shopify 內

## 於 FIRST LINE 新增聊天插件

[![](https://shopify-assets.shopifycdn.com/shopifycloud/start-launch-web/assets/d85b9cab000824a606c5beb5f3e27540.svg)](https://accounts.shopify.com/store-login)

透過左側選單，於「管道」⇒ 「即時聊天」內新增一插件，並依序設定相關資料，如橫幅標題、簡短介紹等。

這邊需注意的是，「允許的網域」設定請輸入來自 shopify 目前的網域，如 xxxx.myshopify.com。

![](https://842546780-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MNRu7dk70ei7JV9HlW9%2F-MjiOOe2mywSebERlI2J%2F-MjiPQHYFmAQZHdaMygi%2Fimage.png?alt=media\&token=73e7ed71-dc5c-4598-bda0-252380e1fb96)

當設定並新增完畢後，於「嵌入代碼」頁面複製代碼，稍後將於 Shopify 貼上，將即時聊天嵌入。

## 於 Shopify 貼上代碼

### 登入 Shopify 管理頁面

前往 <http://www.shopify.com/login/> 頁面，並登入你的商店管理。

### 前往佈景主題設定

點選左側「網路商店」⇒ 「佈景主題」後，再點擊「自訂」按鈕，前往商店主題介面。

![](https://842546780-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MNRu7dk70ei7JV9HlW9%2F-MjiPl_qxYdpCZ7t3yVu%2F-MjiQfDHiAOP2pt34A32%2F%E6%88%AA%E5%9C%96%202021-09-16%2017.56.33.png?alt=media\&token=6e2e159d-0c43-415f-b8d5-10ec0fbc4efb)

### 編輯主題程式碼

接著，進入管理介面後，點擊「編輯程式碼」選項。

![](https://842546780-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MNRu7dk70ei7JV9HlW9%2F-MjiR-Cv_E46iS9oYG0F%2F-MjiR10mGGEYiO9KtDyj%2F%E6%88%AA%E5%9C%96%202021-09-16%2017.57.11.png?alt=media\&token=b4f65b0c-e8ef-4bd0-bd41-96e7d560b07d)

### 貼上即時聊天代碼

開啟編輯佈景主題的程式碼介面後，選擇位於「Layout」下方的「theme.liquid」檔案，並將稍早複製的代碼添加至 \</body> 標籤前。

![](https://842546780-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MNRu7dk70ei7JV9HlW9%2F-MjiRrftu7zvTZWwauVT%2F-MjiRtzJdY3xobT1txrl%2F%E6%88%AA%E5%9C%96%202021-09-16%2017.57.53.png?alt=media\&token=d99b7169-f9c1-4aaa-9386-a543ff7c8fd3)

### 儲存收工！

現在你可以點擊預覽視窗開啟你的商店，開始用即時聊天跟顧客溝通了！

![](https://842546780-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MNRu7dk70ei7JV9HlW9%2F-MjiSrHZjQKIEoPsJpqL%2F-MjiTThS-Un2YD0vxLCt%2Fimage.png?alt=media\&token=742986c1-c55d-4c24-b13d-87ca5e32a8e3)