LINE商品展示

LINE商品展示(一) 前置設置+商品模版設定

【LINE商品展示一 前置設置+商品模版建立】

商品很棒,卻無人問津?如何讓看見你的商品?
開設Rich Menu之前,我們需要先做個小功課;
選單需要放什麼內容,什麼樣的內容是客人會想看的?
先把你的想法列出來!再來做設定超簡單!!

客製化屬於自己品牌的LINE Rich Menu!

-- 🎬影片時間軸 --

架構講解        00:09
商品模版建立 07:58

 

延伸閱讀:
商品上架
線上訊息自動回覆

LINE商品展示(二) 資訊版+我的最愛模板+卡片建立

【LINE商品展示二 資訊版+商品模板建立】

規劃完Rich menu,須將符合menu上的資訊放上去。
在連接資訊前,先把版型及內文卡片安排好,讓消費者可以一目瞭然!
運用各式模版卡片,讓品牌的LINE@生活圈豐富起來!!

-- 🎬影片時間軸 --

資訊版建立 00:08
我的最愛模板建立
03:20
商品卡片建立 
05:38
資訊卡片建立 
12:38

LINE商品展示(三) MENU設定+客戶最愛商品

【LINE商品展示三 前置設置+商品模板建立】

模板、卡片都設定完成後
需要將他們組合完成,把對應卡片放進選單按鈕的位置
客製化自己的line選單最後一步!
利用選單內容互動,增加與客戶的黏著度!

-- 🎬影片時間軸 --

MENU 00:06
客戶最愛商品 09:58

講堂:如何設置吸睛選單讓顧客成主顧

如何建立專屬LINE商城,讓你的客人在LINE逛不完!

-- 🎬影片時間軸 --

商品展示&模板製作
準備素材 01:36
選單設定
07:17
問題QA   40:43

LINE分享卡片設定

步驟 1:建立一個LINE Login至Provider中;若已經有現有的LINE Login則可以直接選取

步驟 2:建立一個新的LIFF Applications 並打開下圖中的「shareTargetPicker」

截圖 2024-02-01 上午11.53.51.png

步驟 3:開啟Very1後台將藍色的網址「Share callback Url」複製到 LIFF, 紅色的則從 「LINE LIFF」 獲得資訊

取得的LIFF ID 格式:1657617185-zWRMKKOD

-> 將前面數字填寫到第二格Share Login Channel ID 1657617185 ,Share Liff ID 則寫入 1657617185-zWRMKKOD

截圖 2024-02-01 下午12.02.36.png

步驟4:LIFF 需根據以下的內容建立

LIFF app name:自訂可辨識即可 (範例 -> ShareCardLiff )

Size:LIFF App開啟網頁佔版面比例,建議選擇 -> Compact 約50%   ( *Full 100% , Tall 約80% )

Endpoint URL:[藍框] 從Very1後台 -> 將 Share callback Url 複製貼上

Scopes:[紅框] 選擇-> profile 和 chat_message.write

Add friend option:是否跳轉加入LINE官方帳號好友 -> On (Aggressive)

Scan QR:選擇 -> off

截圖 2024-02-01 下午12.00.17.png


截圖 2024-02-01 下午12.00.08.png

如何使用

★注意:設定卡片如使用「分享卡片按鈕」時,其他按鈕「只能使用網址連接」哦!

截圖 2024-02-01 下午1.38.01.png

卡片-場景設定

元件

  • 場景:Very1 系統中,發送LINE客製化樣式給客⼾的基礎單位。例如推播,商品展⽰。 
場景包含的內容:「場景」「卡片」

  • 卡片:結構為上、中、下三個區域的樣式,每個卡片有多個分⾴,最多可以20個分⾴。 
建立⽅式:(1) ⾃定義:從空⽩開始建立 (2) 套⽤模板 

場景案例:組成結構可以如下 .png

➥場景案例:組成結構可以如上

要點:

1.  場景要建立⼀個「入⼝」,才可以被使⽤ 
2.  場景可以包含另⼀個場景

限制:

1.  卡片不能被共⽤(場景可以共⽤)
2.  入⼝卡片無法編輯。可採⽤建立⼀個「修改中」的卡片,當暫時入⼝,即可修改  

如何開始

STEP 1:   建立第⼀個空場景 1.jpg


STEP 2:  建立第⼀張卡片。「新增卡片」
       PS:  可以看到場景為「未設定入⼝」
2.jpg


STEP 3:  設定第一張卡片
3-1.jpg      3-2.jpg      3-3.jpg


STEP 4:  根據紅⾊驚嘆號,將應該設定的⽂字,設定完畢 (如案例:已經是一個可使⽤的場景)

4-1.jpg       4-2.jpg


STEP 5: 如何讓卡片之間,產⽣連線關係
            (1) 準備好兩張卡片 
            (2) 於第⼀張卡片建立按鈕,根據下圖連接到⽬標卡片場景 
            (3) 儲存後,可以看到卡片之間產⽣了線,線中間的內容為按鈕名稱

5-1.jpg5-2.jpg

STEP 6:  正式啟⽤⼀個場景。最後⼀個步驟:設為入⼝ 

6-1.jpg         6-2.jpg

STEP 7:  建立⼀個空的場景,⽤來收納另⼀個卡片流程。⽤途:重複使⽤/視覺整潔

7-1.jpg       7-2.jpg

7-3.jpg

建議

1. 名稱中清楚寫入使⽤⽬的。例如:商品展⽰(第⼀層)-XXX, 20241104推播-OOO 
2. 整個場景都設計完流程,再設定入⼝ 

提醒

1. 跨品牌/帳號複製卡片,相依關係會消失 
2. 卡片移入場景,相依關係會消失 
3. 「Alt + 滾輪可」以調整顯⽰⼤⼩ 

場景編輯器-介面說明

W-03.jpg

W-04.jpg


場景編輯器-選取範圍

W-02.jpg


模板編輯器-介面說明

W-02-1.jpg