Shopify
Wink Shopify App 讓旅遊業者、體驗販售者和住宿商家能直接在 Shopify 商店前台展示即時 Wink 庫存 — 可與產品並列,放在登陸頁面或主題中的任何位置。
wink-travel/wink-shopify-plugin on GitHub 原始碼、開發者設定指南與貢獻說明。
- 前往 Shopify App Store 並搜尋 Wink Travel。
- 點擊 Add app 並依照 OAuth 流程授權。
- 在 Wink App 設定中,輸入您的 Client ID 和 Client Secret。 前往 Applications 取得您的憑證。
- 點擊 Verify & Save。成功訊息表示連線完成。
啟用 App Embed Block
Section titled “啟用 App Embed Block”App Embed Block 會自動將 Wink 腳本和樣式表注入每個頁面 — 您無需編輯主題程式碼。
- 在 Shopify 後台,前往 Online Store → Themes → Customize。
- 點擊左側面板的 App embeds。
- 開啟 Wink Travel。
- 點擊 Save。
在頁面中新增元件
Section titled “在頁面中新增元件”- 在主題編輯器中,打開您想放置 Wink 內容的頁面或區塊。
- 點擊 Add block,並從 Wink 區塊中選擇:
- Wink Content — 飯店卡片、格狀排列或地圖
- Wink Lookup — 目的地搜尋欄
- Wink Search — 行程選擇按鈕
- Wink Account — 登入按鈕
- Wink Itinerary — 行程狀態按鈕
- Wink Cart — 購物車按鈕
- 對於 Wink Content,選擇 Layout Type 並輸入來自 Wink Studio 的 Layout ID。
- 點擊 Save。
可用的主題區塊
Section titled “可用的主題區塊”| 區塊 | 用途 |
|---|---|
| Wink Content | 顯示飯店卡片、排名格狀、地圖等 |
| Wink Lookup | 目的地與飯店搜尋欄 |
| Wink Search | 開啟行程選擇器的圖示按鈕 |
| Wink Account | 登入 / 使用者帳戶按鈕 |
| Wink Itinerary | 顯示目前行程的按鈕 |
| Wink Cart | 購物車摘要按鈕 |