2025 年 9 月 10 日
- 簡易說明拖拉版型可調整的內容。
操作目錄：
注意事項:
- 導覽列、彈窗廣告以及頁腳為全站共用設定。
- 顏色設定完後請至各個頁面確認設定是否符合商家的需求。
- 實際功能請依後台適用版本為主。
📌 拖拉版型 網站設定
後台路徑 :「網站外觀」→「套版主題管理」
- 進入後台，確認是拖拉版型後，點選「網站設定」。
- 進入拖拉版型設定，可依照每個頁面個別設定內容以及顏色設定、全站設定。
*導覽列、彈窗廣告、頁腳，雖然每個頁面都有但皆為同一個呈現畫面。
📌 全站共用設定功能
- 【導覽列/頁腳】 :
- 網站 Logo : 可上傳檔案，更換導覽列 Logo 圖案。
- 可於「電腦版 LOGO 高度」欄位，設定電腦版網頁的 LOGO 顯示高度。
「電腦版 LOGO 高度」僅影響電腦版顯示，平板及手機版保持原有的響應式顯示。
- 可於「電腦版 LOGO 高度」欄位，設定電腦版網頁的 LOGO 顯示高度。
- 導覽列樣式 : 可選擇「預設」/「併排置左」/「併排置右」，並可選擇背景是否透明呈現。
- 導覽列選單設定 : 可查看 選單/導覽列設定。
- 可選擇選單是否預設展開。
- 搜尋欄位設定 : 設定商城是否可以使用搜尋功能。
- 置頂公告 : (若僅想要倒數時間不要有置頂公告圖片，請將圖片設定留空)
- 僅顯示頁面 : 設定置頂公告圖片、時間倒數是否要在其他頁面呈現。
- 圖片 : 可設定上方置頂公告圖片，並設定圖片連結。(請預覽不同裝置的呈現是否符合貴司設定)
- 上架/下架時間 : 設定時間倒數時間。
- 顯示時間倒數 : 點擊顯示後，請務必設定上下架時間。
- 倒數文字/倒數背景 : 可自訂顏色。
- 網站 Logo : 可上傳檔案，更換導覽列 Logo 圖案。
- 【彈窗廣告】: 可選 圖片/影片/互動遊戲。
- 彈窗廣告 – 圖片
- 彈窗廣告 – 影片
- 彈窗廣告 – 互動遊戲
- 彈窗廣告 – 圖片
- 顏色設定
- 點選左下角「顏色設定」
- 可自行變更顏色
- 點選左下角「顏色設定」
- 全站設定
點選左下角的「全站設定」
- 圖示設定
- 網站圖示 Favicon : 可自行設定網站顯示標題。
- 轉貼分享圖片OG image : 當您貼上網站連結至某平台時，例：Facebook、Line。在這些平台上顯示的縮圖將會是您設定的 OG image。
- 其他相關設定請至 轉貼連結預設圖片(OG IMAGE)
- 網站SEO/網頁鎖右鍵
- 導覽列 icon 設定
- 系統預設 3 種樣式供您選擇，您也可自定義 icon。
- 若選擇自定義 icon，請上傳以下圖示檔案：
- 帳號
- 購物車
- 搜尋
- 首頁(手機版)
- 收藏(手機版)
- 導覽列(手機版)
- 選擇自定義 icon 時，建議讓圖示與相應功能有清晰的關聯性，確保顧客瀏覽網站時能直觀點擊。
- 若有未上傳的圖示，系統會自動帶入「預設」樣式。
- 2025 年 7 月前建立的一頁式商店，恕不支援此設定，將保留原有的 icon 樣式。
- 字型設定
- 商品相關設定/折扣貼紙/圖片寬高比例
【商品相關設定】: 可查看下方圖片查看功能對應位置。
【折扣貼紙】: 若勾起 「顯示定期定額活動標籤」，則不套用此處設定。
【圖片寬長比例】: 請依照您上傳的商品圖片來選擇呈現比例。(若有商品上下留有空白，建議可先更換呈現比例)
- 款式選單/商品購買數量上限
- 圖示設定
📌 首頁
點選新增區塊可新增多種功能
- 輪播素材
- 輪播素材介面 – 其他版面設計/素材
- 【其他版面設計】 : 可透過右方即時預覽，查看設定的是否符合。
- 【素材】 : 請依照上方格式上傳圖片，並可選擇點選圖片的連結。
- 輪播素材介面 – 其他版面設計/素材
- 橫幅廣告
- 橫幅廣告 : 可透過右方畫面即時查看設定。
- 橫幅廣告 : 可透過右方畫面即時查看設定。
- 商品分類 : 可透過右方畫面即時查看設定。
- 輸入標題並選擇商品分類。
- 可設定商品數量上限、商品展開方向、商品欄數(電腦版)、商品排列方向、文字排列方向。
- 可設定不同裝置外邊距。
- 【電腦版商品分類樣式】：可選擇預設/顯示部分內容/全顯示。
- 影片設定：可透過右方畫面即時查看設定。
- 目前僅支援 YouTube 影片連結格式。
- 分頁頁籤 : 新增部落格群組，可透過右方畫面即時查看設定。
- 自訂排版設計：您可自定義多個區塊，並彈性設定區塊的版面及順序。
區塊介紹
您可選擇以下樣式區塊：圖片
若想建立區塊，請設定以下欄位：
- 「電腦版圖片」、「平板版圖片」、「手機板圖片」：上傳對應裝置顯示的圖片。
- 「圖片連結」：選擇點擊圖片後會導向的頁面。
- 「圖片替代文字」：簡要說明圖片的主要資訊或用途。
- 「版面螢幕占比」：設定圖片在版面中的比例。
影片
若想建立區塊，請設定以下欄位：
- 「影片連結」：請貼上影片的YouTube網址。
- 目前僅支援YouTube網址格式的影片連結，若您有影片檔案，請先上傳至YouTube再行設定。
- 「版面螢幕占比」：設定影片在版面中的比例。
自訂HTML
若想建立區塊，請設定以下欄位：
- 可選擇輸入自訂語法。
商品
若想建立區塊，請設定以下欄位：
- 「選擇商品」：請選擇欲顯示的商品。
- 僅能選擇單個商品，若想顯示多個商品，請建立多個商品區塊。
- 「電腦版商品分類樣式」：可選擇商品資訊的顯示方式。
- 「版面螢幕占比」：設定影片在版面中的比例。
其他排版設計
您可以點擊「其他排版設計」，設定網站的邊距與區塊間的間距。
設計模組的版面比例
您可以透過設定「版面螢幕占比」來控制每個區塊在畫面中的寬度，讓多個區塊能在同一橫列中並排顯示。
排列邏輯說明：- 區塊會由左至右依序排列。 每一橫列的總占比上限為 100%。當區塊並排的占比超過 100%，系統會自動換行，將超出區塊及後續區塊顯示於下一列，以此類推。
常見排版範例：- 三欄式結構：建立 3 個區塊，每個區塊的占比設為 33%，三者加總不超過 100% 即可並排。
- 雙欄式結構：建立 2 個區塊，可設定為 60% + 40%、50% + 50% 等加總為 100% 的組合。
- 單欄式結構：如僅有一個區塊需滿版呈現，可設為 100%。
- 自訂HTML : 自行編輯 HTML 內容，並更改版面細節。
- 圖文介紹 : 可透過右方畫面即時查看設定。
- 區塊設定 : 可選擇 標題/內文/按鈕 ，並可編輯順序。
- 其他版面設計 : 可透過右方畫面即時查看設定。
- 圖片設計 : 可透過右方畫面即時查看設定。
- 區塊設定 : 可選擇 標題/內文/按鈕 ，並可編輯順序。
- 文字編輯 : 可透過右方畫面即時查看設定。
- 主打商品：可展示 1 件重點商品，提升特定商品曝光度與網站轉換率。
- 點擊「其他版面設計」，設定此區域與網站邊界的距離。
- 點擊「商品設計」，綁定此區域欲展示的商品。
- 僅限綁定1件商品。
- 商品須為「已上架」，不支援「未上架」、「已下架」、「未公開」、「已刪除」商品。
- 不支援組合商品、電子票券。
- 您可依需求調整主打商品區塊的內容，您可選擇顯示並排序以下資訊：
- 「商品標題」
- 「價格」
- 「款式選單」
- 「數量選擇器」
- 「購買按鈕」
- 「文字」
- 以下資訊會與商品頁設定保持同步：
- 圖片比例
- 款式選單樣式
- 預設款式
- 商品售完後按鈕文字
📌 商品頁面
商品頁面可編輯四種設定，基本設定/商品介紹/商品評論/相關商品
- 基本設定 : 依照圖中對照位置進行設定。
當商品無庫存且設定不可購買時，商品款式狀態設定
- 款式不可點選：前台商品款式按鈕將無法點選。
- 款式可點選：前台商品款式按鈕可以點選，點選後下方顯示聯絡店家。
商品價格標籤設定說明
- 勾選「顯示優惠售價」：
商品有定價，且定價大於售價，會顯示「優惠售價文字」。
商品有定價，且定價小於(等於)售價，會顯示「建議售價文字」。 - 勾選「顯示建議售價」：若商品無定價，會顯示「建議售價文字」。
- 若兩者皆不勾選：「優惠售價文字」和「建議售價文字」皆不會顯示。
- 若兩者皆勾選：系統將依「顯示優惠售價」和「顯示建議售價」邏輯進行判斷。
多款式商品價格顯示說明
- 不同款式間的售價相同，定價不同，且最高定價大於售價，則顯示售價與最高定價。
- 不同款式間的售價相同，定價不同，且最高定價小於(等於)售價，則顯示售價。
- 不同款式間的售價相同，定價相同，則顯示售價。
- 不同款式間的售價不同，則顯示最低售價與最高售價(ex. NT$40 ~ NT$41)。
- 商品介紹 : 設定標題名稱以及是否顯示該欄位。
- 商品評論 : 請依照 商品評論 文件進行設定。
- 相關商品 :
- 【商品群組其他商品】 :
依照「商品頁」「設定」「進階設定-商品自訂分類」群組中商品隨機顯示。 - 【自訂關聯群組商品】 :
依照「商品頁」「設定」「商品關聯群組」群組中商品隨機顯示。
- 【商品群組其他商品】 :
📌 商品群組頁面
商品群組頁面，可設定 商品分類設定
- 商品分類設定 :
- 【左側選單連結】 :
可選擇設定好的選單。(選單設定方式請至 選單/導覽列設定 查看)
- 【左側選單連結】 :
📌 商品多層級分類設定(僅限於plus版選配適用)
設定商品多層級分類
📌 部落格頁
- 【每頁文章數量】: 可設定文章顯示的數量。
- 【精選文章】: 選擇是否顯示精選文章，並選擇要作為精選文章的部落格。
📌 部落格文章頁
- 【文章標籤區標題】: 可至部落格管理設定文章的「標籤」，部落格群組內文章的所有「標籤」皆會在這裡呈現。
📌 客服
📌 404頁
- 404頁 : 自行更換404頁的圖片。
📌 搜尋頁
- 搜尋頁 : 可設定左側的選單。(選單/導覽列設定)
