使用商店版型可以一鍵快捷同步網店首頁到 App，並可實時同步網店最新資訊到 App，無需您重複操作編輯，方便快捷。
⚠️ 開始前請注意：目前商店版型僅同步「支援 SHOP Builder」的首頁內容，如果您的首頁不是使用的 SHOP Builder 的話， App 將無法支援同步。
本篇文章將分別介紹：
一、商店版型設定步驟
步驟一
前往 SHOPLINE 後台 >「Shopper App 管理 > App 設計 > 首頁設計 > 目前版型」，點選商店版型的「設定」進入 App 頁面編輯器。
＊注意：如您進入 App 設計頁面出現「頁面／元件更新提醒」彈窗，請點擊「立即升級」進行後台功能升級。如點擊取消升級，將無法正常同步網店首頁內容。
步驟二
進入商店版型頁面後，會彈出元件展示提示。點按「我知道了」關閉彈窗。
步驟三
頁面左側元件區和中間預覽區會自動同步網店首頁內容，除頂部應用欄、底部應用欄、側邊欄、主要分頁、懸浮元件、直播懸浮元件外，其餘同步元件不支援在該頁面重新進行編輯設定。如需修改內容，請至「網店設計 > 網店分頁」。
中間預覽區內容和 App 展示效果一致。如果您看到預覽區展示空白頁面並提示無可支援的元件，則有可能是您的網店首頁非新編輯器首頁，或您首頁的元件都是不支援同步的。
步驟四
點擊可設定元件，於右側編輯區進行相關設定，請參考：
＊注意：商店版型的「頂部應用欄、底部應用」和 Simple 版型共用，如在某一個版型裡修改，另一個版型也將自動同步。
步驟五
於左側欄位點擊「主題設定」，進行色彩及商品設定，設定方法請參考：主題設定 | Shopper App。
＊商店版型的「主題設定」和 Simple 版型共用，如在某一個版型裡修改，另一個版型也將自動同步。
步驟六
以上設定完成後，點擊右上角「更新並使用」。如果您的 App 已更新到最新版，重啟 App 後，App 首頁內容將立即更新；如果 App 尚未更新到最新版，需更新後首頁才會同步。
＊注意：
- 未更新到新版 App 的顧客還是會看到原 Simple 版型的首頁內容；已更新新版 App 的顧客會看到最新的商店版型內容。建議您在一段時間內維持原 Simple 版型首頁內容。
- 商店版型使用過程中，如果您的網店首頁從支援新頁面編輯器切換為普通首頁，App 首頁將展示原首頁內容，不會同步進行首頁內容更新。
- 如您在網店首頁更新同步的元件內容，App 端會自動同步更新。
步驟七
在「App 設計 > 首頁設計 > 目前版型」頁面，使用中的版型將顯示「使用中」標籤。
二、與網店元件同步規則／展示差異
1. 元件同步注意事項
- 支援同步公告欄、文字組合、圖片組合、圖文組合、輪播、影片組合、商品類別、商品輪播列表、商品列表、商品描述、折疊段落、商品分類標籤、活動倒數。
- 不支援同步部落格、銷售組合、Instagram、訂閱、客製化語法元件。
- 不支援同步頁首和頁尾。
- 店面級別設定裡僅支援同步色彩 > 公告欄的設定，其餘設定全部不支援同步。
2. 與網店元件展示差異
| 1. 公告欄 | 標題置左展示，文案超過一行將顯示「...」 |
| 標題為空，App 端不同步 | |
| 2. 輪播 | 不同步「字型大小」及「邊距」設定 |
| 不同步按鈕背景色及按鈕文字顏色 | |
| 「文字位置（手機）」設定為「圖片之下」，文字固定為黑色 | |
| 3. 圖文組合 | 僅填寫標題無設定圖片，App 端不同步 |
| 設定 GIF 圖片，App 預設展示首張 GIF 圖 | |
| 4. 商品類別 | 設定類別不配置圖片、配置圖片不設定類別、不配圖片或類別，App 端皆不同步 |
| 5. 影片組合 | 不同步「簡潔播放模式」、「自動播放」、「預設靜音」、「邊距」設定 |
| 播放按鈕套用「App 設計 > 主題設定 > 色彩」按鈕背景色 | |
| App 端播放預設暫停 | |
| 影片連結錯誤，App 端不同步 | |
| Facebook 影片暫無法顯示封面圖，但顧客在 App 點擊播放按鈕後可正常觀看影片 | |
| 6. 商品列表 | 商品欄數預設顯示一欄 2 個 |
| 7. 商品分類標籤 | 標籤顏色套用「App 設計 > 主題設定 > 色彩」按鈕背景色 |
| 標籤未設定商品和分類，App 端將不會顯示 | |
| 8. 活動倒數 | 不同步「邊距」設定 |
| 關閉「自訂元件顏色」設定，App 端元件按鈕的顏色不同步網店設定，將套用「App 設計 > 主題設定 > 色彩設定」按鈕背景色 | |
| 未設定「活動期間」，App 端將不顯示此元件 |
評論