拖拉版型網站設定

拖拉版型編輯器讓您不用寫程式，用滑鼠拖曳就能調整首頁、商品頁等版面，即時預覽後一鍵發布到前台官網。

| 拖拉版型

拖拉版型介紹¶

「拖拉版型」是 CYBERBIZ 新一代的版型，前台頁面由一個個 區塊 組成。每個區塊代表頁面上的一段內容，例如主視覺輪播、圖文介紹、商品列表等。在拖拉版型編輯器中，您可以：

• 新增、移除區塊： 自由增減頁面上的內容段落。
• 拖曳排序： 用滑鼠上下拖動，調整區塊在頁面上的先後順序。
• 編輯內容： 點選區塊後，於右側填入文字、上傳圖片、設定連結與選擇商品。
• 即時預覽： 中間畫面同步顯示修改後的樣子，並可切換電腦、平板、手機檢視。
• 發布上線： 確認無誤後一鍵發布，將版型套用到前台官網。

整個編輯器分為三大區域： 左側區塊列表、中間即時預覽、左側區塊設定，所有操作都圍繞這三個區域進行。

頁面功能總覽¶

使用前提與限制¶

開始之前，請先確認以下條件，這會影響您能不能使用拖拉編輯器，以及哪些頁面可以編輯：

• 版型須為「拖拉版型」： 只有標示 「拖拉設定」 的版型才能使用本文的拖拉編輯器。舊的「預設版型」走另一套網站設定流程，不在本文範圍。
• 可拖拉的頁面有限： 目前支援拖拉編輯的頁面為首頁、商品頁面與自訂頁面等，並非每個頁面都能拖拉。完整清單請見 可拖拉編輯的頁面。
• 部分區塊需加值功能： 多數區塊所有拖拉版型皆可使用，少數區塊(如商品評論、門市據點列表)需另外開通對應加值功能才會出現，請見 可新增區塊類型。

操作步驟¶

以下依日常使用情境，從進入編輯器到發布上線，逐一說明。

進入拖拉版型編輯器¶

1. 開啟主題版型頁面： 進入後台的 「網站外觀/套版主題管理 > 主題版型」 頁面，這裡列出您商店已安裝的所有版型。
2. 找到拖拉版型： 在版型卡片上確認是否標示 「拖拉設定」，這代表它是支援拖拉編輯的版型。
3. 進入編輯器： 點擊該版型卡片上的 「網站設定」 按鈕，即進入拖拉版型編輯器¹。

新增區塊¶

1. 點擊新增： 在左側區塊列表下方，點擊 「新增區塊」。
2. 選擇區塊類型： 在彈出的清單中選擇想要的區塊樣式²，例如輪播圖、圖文、商品列表等。
3. 確定新增： 點擊 「確定新增」，新區塊會加入頁面，並出現在左側列表中，接著即可點選它進行內容編輯。

編輯區塊內容¶

1. 點選區塊： 在左側列表點擊任一區塊，面板會展開該區塊的設定選項。
2. 填寫內容： 依區塊類型填入對應內容，常見的設定包含：
   • 文字： 直接輸入標題、說明文字，輸入後請按 Enter 套用變更。
   • 圖片： 點擊 「選擇圖片」 或 「上傳圖片」 上傳檔案，也可選擇 「貼上圖片URL」 填入外部圖片網址。
   • 連結： 設定點擊區塊後要前往的頁面或網址。
   • 商品： 透過 「選擇商品」 挑選要呈現在區塊中的商品。
3. 編輯內含小區塊： 部分區塊(如輪播圖)底下還有多個小區塊，可逐一點入分別設定。

調整區塊順序¶

1. 找到拖曳把手： 在左側區塊列表中，每個可調整的區塊都有一個拖曳圖示 (移動把手)。
2. 上下拖動： 按住拖曳把手，將區塊往上或往下拖動到想要的位置後放開，前台頁面的呈現順序就會跟著改變。

顯示或隱藏區塊¶

每個區塊都可以暫時隱藏，而不必刪除：

1. 點擊眼睛圖示： 在左側列表中，點擊區塊上的眼睛圖示 即可切換 顯示 或 隱藏。
2. 確認效果： 被隱藏的區塊不會出現在前台，但您先前的設定內容會完整保留，日後重新顯示即可恢復。

移除區塊¶

1. 進入區塊設定： 點選欲刪除的區塊，展開設定面板。
2. 點擊移除： 點擊 「移除」，該區塊即會從頁面中刪除。

切換編輯頁面與預覽¶

1. 切換編輯頁面： 透過上方工具列的頁面下拉選單，切換目前要編輯與預覽的頁面(例如首頁、商品頁面)。

   

2. 切換預覽裝置： 點擊上方的 電腦 / 平板 / 手機 圖示，預覽畫面會依該裝置寬度調整，方便檢查 RWD 呈現。

3. 預覽前台實際效果： 點擊 「預覽」 會另開新分頁，以前台實際樣貌呈現目前的編輯結果。

   

切換語系編輯¶

若您的商店已開通多國語系(語系數量大於 1)，上方工具列會出現 語系切換：

1. 選擇語系： 在工具列點選要編輯的語系。
2. 分別設定內容： 切換後，編輯與預覽的是該語系版本的版型，您可為每個語系分別設定文字與圖片。

復原、重做與儲存¶

1. 復原 / 重做： 編輯過程中若要回到上一步，點上方的 「上一動作」 圖示；要還原則點 「下一動作」 。
2. 儲存變更： 完成編輯後，點擊右上角的 「儲存」 保存。

發布主題¶

當您編輯的是未發布的版型，完成後需發布才會套用到前台：

1. 點擊發布： 在編輯器上方點擊 「發布」。
2. 確認替換： 系統會跳出提示「此操作將替換您當前主題，並將它移至未發佈的主題中⋯」，確認後點擊 「確認並發布」。
3. 完成上線： 此版型即成為前台正式版型，顧客造訪商店時就會看到新的版面。

全站共用設定¶

全站共用設定不屬於單一頁面，而是套用到 整個官網。在拖拉版型編輯器左側面板下方，可進入導覽列、彈窗廣告、頁腳、顏色設定與全站設定。

導覽列與頁腳¶

導覽列與頁腳的設定較完整，另有專文說明：

彈窗廣告¶

彈窗廣告會在顧客進站時自動跳出。在全站共用設定中可選擇以下內容形式，並設定顯示條件：

顏色設定¶

針對全站的基礎視覺元素進行定義：

• 主色調與文字顏色： 一鍵變更全站的主色調顏色及全站字體顏色。
• 強調色： 最重要的設定之一，會自動套用於系統多個動態 UI 元素。

全站設定¶

集中控管官網的基礎視覺識別、搜尋引擎優化(SEO)、全域商品顯示行為以及網站安全防護等核心設定。

視覺識別與品牌資產¶

• 網站圖示設定：
  • Favicon: 設定顯示於瀏覽器分頁標籤上的小圖示。
  • OG Image(轉貼連結預設圖片)： 設定網站連結分享至 Facebook 或 LINE 時顯示的預設縮圖。查看設定教學

• 導覽列圖示： 系統預設 3 種樣式，商家亦可上傳自定義圖示檔案。

  一頁式商店限制

  自訂導覽列圖示僅支援 2025 年 7 月後 建立的一頁式商店。

• 字型設定： 調整全站網頁所套用的字體樣式。

網站 SEO 與安全保護¶

• SEO 設定： 可定義網站的 標題、 簡述 與 關鍵字，優化搜尋引擎對網站的收錄與排名。若標題欄位留空，系統會預設以商店名稱作為標題。查看設定教學
• 網頁鎖右鍵： 勾選可禁止使用者透過點擊滑鼠右鍵自行下載圖片或複製文字，保護原創內容。查看設定教學

全域商品顯示行為¶

此區設定會 套用到全站所有商品列表與商品頁（首頁商品區塊、商品群組頁、多層級分類、搜尋頁、商品詳情頁等），統一商品卡片與價格的呈現方式，不需逐一設定每件商品。以下依後台設定面板由上到下的順序說明：

• 顯示商品標語： 在商品圖／名稱下方顯示商品特色或促銷標語，同步套用於首頁商品區塊、分類頁、商品頁、任選折扣、紅配綠與搜尋頁。查看設定教學
• 顯示商品色票小圖 企業版： 在商品群組頁與多層級分類頁顯示款式顏色小圖，讓顧客先看到可選色系。查看設定教學

• 顯示已銷售數量： 在商品名稱下方顯示累計銷售數量，營造熱銷感。

  

• 顯示定期定額活動標籤 企業版³： 商品綁定定期定額活動時，於商品上顯示活動標籤。

• 顯示商品開賣時間 PLUS版 / 企業版： 商品已設定上架時間但尚未開賣時，前台顯示開賣倒數（紅利商城頁除外）。

  

• 顯示商品價格區間 PLUS版 / 企業版： 多款式不同價時，以「最低～最高」區間顯示售價並隱藏定價；未開啟則顯示最低售價＋定價。

  • 注意：已開啟「預設點選第一個款式」的商品頁、商品彈窗、首頁主打商品不適用。

  

• 文字排列： 商品卡片文字（名稱、價格等）的對齊方式，可選 置左／置中／置右（預設置左）。

• 款式選單： 商品頁款式選擇器樣式，可選 下拉式／按鈕式（預設按鈕式）。

  按鈕式下拉式

  

  

• 商品影片設定 PLUS版 / 企業版： 商品有影片時，將影片 置於商品圖片之前或之後（即圖片輪播的第一張或最後一張，預設之前）。查看設定教學

• 商品購買數量上限： 每個款式可加入購物車的數量上限，留空或填 0 表示無上限。

• 折扣貼紙 非 PLUS版 / 企業版： 上傳一張貼紙圖（建議 100×100px），當任一款式售價低於定價時，自動顯示於商品圖左上角。

  

• 圖片寬高比例： 商品列表圖片比例，可選 1:1／3:4（預設 1:1）。

• 商品圖游標懸停效果： 滑鼠移到商品圖時的效果，可選 快速加入購物車按鈕／圖片切換／陰影‧邊框強調／放大效果（預設快速加入購物車按鈕）。

  快速加入購物車按鈕圖片切換陰影‧邊框強調放大效果

  

  

  

  

動態標籤設定 商品標籤¶

商品標籤會依條件 自動 標示於商品圖上，不需逐一手動設定。於「全站設定」中點擊 「商品標籤列表」 進入設定頁，即可設定下列標籤（面板由上到下依序排列），每類皆可獨立啟用並選擇呈現方式。

標籤種類與觸發條件

• 特價標籤： 商品售價低於定價時自動顯示。
• 缺貨標籤： 商品庫存為 0 且設為停止銷售時自動顯示。
• 定期定額標籤： 商品被加入定期定額活動時自動顯示。
• 自定義標籤（最多 5 組）： 各自綁定一個後台「商品標籤」，凡套用該標籤的商品就會自動顯示。

呈現方式（每個標籤可獨立設定）

• 文字： 自行輸入要顯示的標籤文字。
• 圖片： 上傳標籤圖片，並選擇圖片標籤大小（大／小）。
• 折扣折數： 僅「特價標籤」提供，依售價與定價自動以折數呈現。

標籤底色預設套用「顏色設定」中的強調色；多個標籤同時成立時會依系統固定順序並列。

商品標籤會依條件 自動 顯示於商品圖上，不需逐一手動標記。面板由上到下依序為 特價、缺貨、定期定額、自定義標籤 1～5。

標籤種類與觸發條件

• 特價標籤： 商品售價低於定價時自動顯示。
• 缺貨標籤： 商品庫存為 0 且設為停止銷售時自動顯示。
• 定期定額標籤： 商品被加入定期定額活動時自動顯示。
• 自定義標籤（最多 5 組）： 各自綁定一個後台「商品標籤」，凡套用該標籤的商品就會自動顯示。

每個標籤的設定欄位

點選任一標籤後，會依序出現以下欄位（部分為條件顯示）：

• 啟用核取方塊： 勾選後該標籤才生效。
• 商品標籤（下拉）： 僅自定義標籤 —— 選擇要對應的後台商品標籤。
• 標籤類型： 選擇呈現方式：
  • 文字： 出現「標籤文字」欄，輸入要顯示的文字（按 Enter 套用）。
  • 圖片： 出現「圖片」上傳欄，並可選「圖片標籤大小」大／小（特價標籤預設大，其餘預設小）。
  • 折扣折數： 僅特價標籤 —— 系統依售價與定價自動換算折數呈現，無需手動輸入。

設定方式

1. 於「全站共用設定 > 全站設定 > 商品標籤」找到要設定的標籤。
2. 勾選啟用，並（自定義標籤）綁定對應的後台商品標籤。
3. 選擇標籤類型，依類型填入文字或上傳圖片。
4. 於中間預覽確認後儲存。已發布版型即時生效；未發布版型需完成發布。

標籤底色預設套用「顏色設定」中的強調色；多個標籤同時成立時會依系統固定順序並列。

系統會根據特定條件自動為商品附上標籤，並依固定的優先順序由左至右排列：

• 定期定額標籤： 商品綁定定期定額活動時顯示。
• 特價標籤： 當商品售價低於定價時顯示。
• 缺貨標籤： 商品庫存為 0 且設定為停止銷售時顯示。
• 自定義標籤： 商家可設定最多 5 組 自定義標籤(支援文字或圖片類型)，並透過與後台商品標籤關聯來觸發顯示。

備註：這些標籤的底色通常套用「顏色設定」中的「強調色」。

參考資料¶

• 拖拉版型網站設定
• 各頁面設定
• 可新增區塊類型對照表
• 設定選單與導覽列

各頁面設定¶

拖拉版型透過上方工具列的 頁面下拉選單 切換不同頁面。除了首頁、自訂頁面、單頁式頁面以「新增區塊」的方式自由組合外，其餘頁面的版面由系統固定，僅提供以下各自的設定項目。

商品頁面¶

商品頁面主要由四個功能區塊組成，可依需求開啟或調整排序。

商品群組頁面¶

針對群組頁面可進行以下細節設定：

• 左側選單連結： 指定該群組頁面要套用哪一組導覽選單(需先在 選單／導覽列設定 完成設置)。
• 商品欄數： 商品每排顯示的數量。
• 商品數量上限： 設定每頁顯示的商品數量。
• 更多商品顯示方式： 設定顯示更多商品的呈現方式 —— 分頁跳轉或向下無限滾動。

商品多層級分類¶

針對多層級分類頁面的呈現方式進行微調。

部落格頁¶

用於呈現多篇文章的摘要列表。

• 每頁文章數量： 自訂每頁要顯示的文章總數。
• 顯示精選文章： 勾選後，系統會在部落格列表頁底部顯示特定的「精選文章」，適合提高熱門文章曝光。
• 精選文章群組： 開啟精選文章後，進一步選擇要顯示哪一個部落格群組的文章作為精選內容。

部落格文章頁¶

用於顯示單篇完整文章的詳細內容。

• 文章標籤區標題： 系統會自動抓取該文章所屬群組內的所有「文章標籤」並在此區塊呈現。

客服頁¶

客服頁面在前台主要以「聯絡我們」表單形式呈現，供訪客留言諮詢。

• 問題類型設定： 自訂「聯絡我們」表單中的下拉式問題選單。設定路徑為後台 會員 > 客服問題分類。
• 聯絡資訊設置： 除表單外，建議在 頁腳(Footer) 區塊同步設定完整的公司電話、地址與 Email，增加品牌信任感。

404 頁¶

當消費者訪問到失效連結(如活動結束、商品下架或網址錯誤)時的顯示畫面，可自訂視覺以緩解負面體驗。

• 更換圖片： 自行上傳並更換 404 頁面的圖片，建議設計符合品牌風格或有趣的引導圖。
• 標題： 設定 404 頁面的標題文字。
• 返回首頁： 設定返回首頁按鈕的文字。

快速到貨頁¶

用於自訂快速到貨專區的視覺與醒目入口。

• Logo 背景： 設定導覽列顏色(Logo 背景)，幫助消費者區分一般專區與快速到貨專區。
• 顯示快速到貨按鈕： 勾選後，系統會在官網全站導覽列上方顯示明顯的專區入口，引導消費者點擊。

搜尋頁¶

搜尋頁面目前提供以下自訂設定項目：

• 選擇選單： 指定搜尋頁面左側要套用的選單連結列表(需先 建立選單)。
• 商品顯示資訊： 搜尋結果中的商品會同步套用「全站共用設定」中的顯示規範，包含價格區間、商品標語以及已銷售數量。
• 標籤顯示： 搜尋結果頁支援顯示定期定額、特價、缺貨以及自定義標籤。

參考資料¶

• 拖拉版型網站設定
• 全站共用設定
• 可新增區塊類型對照表
• 可拖拉編輯的頁面對照表

重要規範與限制¶

• 拖拉版型才能拖拉編輯： 只有標示「拖拉設定」的版型適用本文的編輯器，預設版型請改用舊版網站設定。
• 可編輯頁面有限： 僅首頁、商品頁面、自訂頁面等支援拖拉，商品群組頁、部落格頁、搜尋頁等不可拖拉編輯，完整清單見 可拖拉編輯的頁面。
• 部分區塊需加值功能： 少數區塊需開通對應加值功能才會出現在新增清單中，詳見 可新增區塊類型。
• 部分區塊有數量上限： 某些區塊或其內含的小區塊有數量上限，達到上限後就無法再新增。
• 檔期設定(選配)： 部分版型支援為區塊設定上架與下架時間，讓區塊只在指定期間顯示於前台，此功能需另外開通。

後續操作¶

常見問題¶

參考資料¶

• 可拖拉編輯的頁面對照表
• 可新增區塊類型對照表
• 新增商品

CYBERBIZ 的 拖拉版型 （Drag-and-Drop Layout）是一項直覺化的官網設計工具，其核心優勢在於 不需要編寫程式碼，商家僅需透過滑鼠拖曳、點選與設定，即可快速調整官網前台的視覺版面與功能配置。

以下為拖拉版型的主選單、功能介紹與操作教學：

如何進入拖拉版型設定¶

1. 進入路徑：管理後台 > 「 網站外觀 」 > 「 套版主題管理 」。
2. 啟動編輯：確認目前使用的是拖拉版型（若非，可至「瀏覽更多主題」下載）後，點選「 網站設定 」即可開始編輯。

全站共用設定¶

以下設定會套用至官網的所有頁面：

導覽列¶

操作位置：管理後台 > 網站外觀 > 套版主題管理 > 導覽列。

可自訂網站 Logo 圖案及其在電腦版的高度。樣式可選「預設」、「併排置左」或「併排置右」，並支援設定搜尋欄位的開關。

頁腳¶

支援綁定自定義選單、填寫聯絡資訊、自訂文字介紹，以及開啟社群媒體（Facebook/Instagram/LINE/YouTube）的圖示連結。

彈窗廣告¶

可依行銷需求設定圖片、影片或互動遊戲作為首頁彈窗。

顏色與圖示設定¶

可變更全站強調色；此外可設定網站圖示（Favicon）、轉貼連結圖片（OG Image）及導覽列的 Icon 樣式。

首頁區塊功能¶

首頁是由多個「區塊」組成，您可以自由新增、刪除或排序以下內容：

1. 輪播素材：設定多張廣告圖片，支援電腦/平板/手機分開上傳，並可調整圖片停留秒數。
2. 商品分類櫥窗：可展示全部商品或指定分類（自訂/條件分類）的商品，並自訂展開方式（往下展開或左右滑動）與排列個數。
3. 自訂排版設計（進階）：此區塊允許在一橫列中並排顯示多個元件（如圖片、影片、跑馬燈、單個商品或 HTML），商家可透過設定「 版面螢幕占比 」（如 50%+50%）來決定寬度。
4. 主打商品：僅綁定 1 件重點商品，直接在首頁顯示款式選單、數量選擇器與購買按鈕，藉此提升轉換率。
5. 折疊內容：設計官網 FAQ 或購物須知，採單列區塊點擊展開的設計。
6. 自訂 HTML：供進階用戶貼入語法，例如嵌入 Instagram 貼文牆（elfsight 應用）。

商品頁面與標籤強化功能¶

拖拉版型針對商品展示提供了更細緻的開關功能：

其他頁面管理¶

除了首頁，商家還可以針對以下頁面進行個別設定：

• 商品群組頁面：設定分類頁左側的篩選選單及每頁商品顯示數量。
• 部落格頁面：調整列表頁的每頁文章數、精選文章來源，以及單篇文章頁的版面內容。
• 其他：包含 404 錯誤頁面（更換圖片）、搜尋結果頁與客服頁面。

拖拉版型功能說明¶

拖拉版型（Drag-and-Drop） 讓商家無需撰寫程式碼，即可透過圖形化介面直覺地建立與調整官網外觀。

拖拉版型編輯器介面總覽¶

進入與基本設定¶

• 進入路徑：前往後台 網站外觀 > 套版主題管理，確認使用拖拉版型（拖拉版型標籤）後點選 網站設定。

• 全站共用設定：

  • 導覽列：可設定選單排列樣式（預設/併排置左/併排置右）、背景是否透明，以及次選單是否同步展開。瞭解 如何設定選單與導覽列。
  • 彈窗廣告：可設定圖片、影片、互動遊戲或排程跑馬燈廣告。
  • 頁腳：提供「上下」或「左右」排序樣式，並可開啟 社群媒體圖示 的顯示與連結。瞭解 如何設定頁腳。
  • 顏色設定：可一鍵變更全站的主色調、強調色（如標籤顏色）及字體顏色。
  • 全站設定：可設定 favicon、網站 Logo、字型、網站 SEO、商品相關設定及商品標籤。

彈窗廣告¶

商家可以根據行銷目的，選擇以下幾種內容形式：

• 圖片彈窗：商家可分別上傳電腦版、平板版與手機版圖片（電腦版為必填），並設定圖片點擊後導向的網址。

• 影片彈窗：目前支援嵌入 YouTube 影片 連結進行展示。

• 互動遊戲：可將後台設定好的「輪盤遊戲」或「紅包抽獎」放入彈窗中，增加趣味性並發放紅利或優惠券（此功能為官網會員專屬，需登入才可參與）。

• 排程跑馬燈：可在彈窗內載入預先製作好的跑馬燈內容，達成自動化更新廣告圖的需求。

顏色設定¶

商家可以針對全站的基礎視覺元素進行定義：

• 主色調與文字顏色：可一鍵變更全站的主色調顏色及全站字體顏色。

• 強調色：這是最重要的設定之一，會自動套用於系統多個動態 UI 元素。

全站設定¶

提供商家集中控管官網的基礎視覺識別、搜尋引擎優化（SEO）、全域商品顯示行為以及網站安全防護等核心設定。

視覺識別與品牌資產¶

• 網站圖示設定：

  • Favicon： 設定顯示於瀏覽器分頁標籤上的小圖示。
  • OG Image (轉貼連結預設圖片)： 設定網站連結分享至 Facebook 或 LINE 時顯示的預設縮圖。

• 導覽列圖示： 系統預設 3 種樣式，商家亦可上傳自定義圖示檔案。

• 字型設定： 調整全站網頁所套用的字體樣式。

網站 SEO 與安全保護¶

• SEO 設定： 可定義網站的 標題、 簡述 與 關鍵字，優化搜尋引擎對網站的收錄與排名。若標題欄位留空，系統會預設以商店名稱作為標題。

• 網頁鎖右鍵： 勾選可禁止使用者透過點擊滑鼠右鍵，自行下載圖片或複製文字，保護原創內容。

全域商品顯示行為¶

商家可統一設定商品在各列表頁與詳細頁的呈現方式：

• 商品標語： 商品特色或促銷標語。

• 商品色票小圖*： 可開啟在官網前台顯示商品顏色款式小圖。

• 銷售數量： 可開啟顯示商品的 已銷售數量。

• 開賣時間*： 針對設定為尚未上架的商品，可開啟顯示商品的 開賣倒數時間。

• 價格區間： 可勾選顯示商品 價格區間，開啟後前台會自動隱藏原有的 定價 標籤。

• 商品款式選單： 可設定前台商品款式顯示方式為下拉選單或是按鈕。

• 商品影片設定*： 若商品有設定影片，可指定影片顯示在圖片彈窗的第一格或最後一格。

• 商品購買數量上限： 設定每個款式商品可以被加入到購物車中的上限。

• 商品圖游標懸停效果：設定游標移動到商品圖片上方的效果，包括顯示加入購物車按鈕、圖片切換、陰影/邊框強調、放大效果。

• 折扣貼紙*： 當任一款式售價金額低於定價時會顯示此折扣貼紙於商品圖片左上方位置。

動態標籤設定 (商品標籤)¶

系統會根據特定條件自動為商品附上標籤，並依據固定的優先順序由左至右排列：

• 定期定額標籤： 商品綁定定期定額活動時顯示。

• 特價標籤： 當商品售價低於定價時顯示。

• 缺貨標籤： 商品庫存為 0 且設定為停止銷售時顯示。

• 自定義標籤*： 商家可設定最多 5 組 自定義標籤（支援文字或圖片類型），並透過與後台商品標籤關聯來觸發顯示。

• 備註：這些標籤的底色通常套用「顏色設定」中的「強調色」。

首頁與頁面內容編輯¶

商家可點選 新增區塊 來組合多種功能模組，並透過滑鼠拖拉調整順序。點擊 區塊名稱可進入相關編輯頁面。

實際選項依照方案跟功能設定可能有所不同。

輪播素材¶

透過多張圖片輪替展示，吸引消費者注意力並推廣重要活動。

點擊「素材」文字即可進入編輯頁面。

• 圖片上傳：支援分別上傳 電腦版、平板版與手機版 的圖片素材。

• 圖片連結：點開下拉選單可選擇要連結的項目，支援官網內部的商品頁、分類頁、行銷活動頁，或自行輸入 外部連結。

• 圖片替代文字 (ALT)：商家應務必填寫圖片替代文字，此舉有助於 優化 SEO 搜尋引擎排名。

• 刪除素材：若不再需要該張圖片，可點擊「移除素材」將其刪除。

版面細節設定 (其他版面設計)¶

除了圖片本身，商家可以微調輪播的呈現方式：

• 圖片停留秒數：設定每張圖片在自動跳至下一輪之前所停留的時間（秒）。

• 圖片切換速度：設定圖片切換的速度，數值越大代表切換速度越慢（秒）。

• 圖片數量與間距：可設定每一輪顯示的圖片張數；若設定多張（2張以上），可調整圖片之間的間距。

  

• 版面邊距：可分別設定電腦版與手機版的 左右外邊距 及 底部外邊距，確保圖片在不同裝置上比例適中。

橫幅廣告¶

• 圖片上傳：可分別上傳電腦版、平板版與手機版的圖片，確保在不同裝置上都能完美呈現。

• 圖片連結：點開選單可選擇連結至特定商品、分類群組、行銷活動頁，或設定 外部連結。

• 按鈕設定：可選擇是否開啟按鈕，並自訂按鈕文字與位置（中上、置中、中下）。

• 版面邊距：可針對電腦版與手機版分別設定左右外邊距及底部外邊距，調整與其他區塊的距離。

商品分類¶

商品分類可讓商家設計商品櫥窗，展示特定分類商品群。

• 標題：輸入商品櫥窗區塊的名稱。

• 選擇商品分類：可選「展示全部商品」、「指定自訂分類」或「指定條件分類」。

• 配置展示規則：

  • 商品數量上限：建議設在 36 個以內 以維持網站載入速度。
  • 商品展開：可選擇「往下展開」或「左右滑動」。
  • 商品欄數：電腦版可設每排 2~6 個；手機版（含平板）為 1~3 個。
  • 商品排列：可選擇「置左」、「置中」、「置右」排列。
  • 文字排列：可選擇「置左」、「置中」、「置右」排列。
  • 版面外邊距：可設定左右外邊距、底部外邊距。電腦版與手機版(手機版包含平板版)可分開設定。
  • 電腦版分類樣式：提供「預設」、「顯示部分內容」、「全顯示」三種呈現風格。
  • 商品圖游標懸停效果：設定滑鼠移動到商品圖片上顯示的效果，提供 「快速加入購物車按鈕」、「圖片切換」、「陰影/邊框強調」、「放大效果」。

影片設定¶

• 標題： 輸入影片標題。

• 影片連結：僅支援 YouTube 影片連結格式。

• 自動播放：開啟後，訪客瀏覽至頁面影片區塊時影片將自動播放。

• 隱藏外框：當影片開啟自動播放，且啟用隱藏外框，該 YouTube 無法暫停影片。

• 重複播放：開啟後，影片播放結束時將自動返回起始點重新播放，形成無間斷循環。

• 版面外邊距：可設定左右外邊距、底部外邊距。電腦版與手機版(手機版包含平板版)可分開設定。

分頁頁籤¶

在首頁展示多個部落格群組，讓消費者能透過頁籤切換快速瀏覽不同主題的文章。

• 新增區塊： 點擊「新增部落格群組」，商家可以挑選預先在「部落格管理」中建立好的主題分類放入頁籤中。

• 即時預覽： 在設定過程中，商家可以透過編輯器右方的畫面 即時查看 頁籤的呈現樣式與切換效果。

• 版面設計： 在「其他版面設計」選項中，商家可以針對該區塊的間距、外邊距、欄數等視覺細節進行微調。

自訂排版設計¶

商家可在同一個橫列中新增多個不同類型的素材元件，並設定各元件的顯示比例與排列順序，以調整該橫列的版型配置。

• 圖片： 可分別上傳 電腦版、平板版與手機版 圖片，並設定圖片連結、替代文字 (ALT) 及版面螢幕占比。

• 影片： 僅支援 YouTube 影片 連結。商家需將影片上傳至 YouTube 後，在此貼上網址並設定顯示比例。

• 排程跑馬燈： 商家可從預先建立好的「跑馬燈進階設定」群組中選擇欲展示的跑馬燈，並設定其螢幕占比。

• 自訂 HTML： 支援輸入自定義代碼。

  注意：若代碼與網站語法不相容可能導致畫面異常，建議謹慎使用。

• 商品： 商家可挑選 單個商品 展示，並設定「電腦版商品分類樣式」。

  限制： 此區塊僅適用於 2025 年 9 月 4 日後建立的一頁式商店；若商店在此日期前建立，請勿使用此商品區塊，以免產生前台顯示錯誤。

其他排版細節設定

在「其他版面設計」選項中，商家可以進行以下微調：

• 邊距設定： 分別設定電腦版與手機版（含平板）的 左右外邊距 與 底部外邊距。

• 區塊間距： 調整電腦版中並排素材之間的間隔距離。

• 行動裝置排版： 針對平板與手機，可設定排版方式為「 單個一列 」或「 兩個一列 」。

圖文介紹¶

區塊與圖片設計

商家可在此設定圖片的呈現方式與位置：

• 圖片素材：至少需上傳電腦版圖片，系統亦支援分別上傳平板與手機版圖片以達到最佳顯示效果。

• 圖片位置：可設定圖片位於文字的「左側」或「右側」。

• 電腦版占比：商家可自行設定圖片在電腦版畫面中的占比比例，藉此微調圖文之間的平衡。

• SEO 優化：設定圖片時應填寫「圖片替代文字 (ALT)」，這能讓搜尋引擎更準確定義圖片內容，有助於優化網站排名。

文字素材與內容編輯

「圖文介紹」區塊支援多組文字內容組合：

• 素材上限：文字素材（包含標題、內文、按鈕）最多可設定 3 組，且可重複使用相同類型的素材。

• 標題與內文：可自訂文字內容、設定字級（文字大小），內文部分提供簡易文字編輯器供商家輸入。

• 按鈕設定：

  • 可自訂按鈕文字與按鈕顏色。
  • 按鈕連結：可點開下拉選單選擇導向站內商品、分類、行銷活動頁，或自行設定外部連結。

• 顯示排序：在「區塊設定」中，商家可以透過拖拉方式自由調整標題、內文與按鈕的顯示順序。

版面細節與樣式設定

在「其他版面設計」選項中，商家可以進行細部美化：

• 文字排版：可統一設定文字排版為「 靠左 」、「 置中 」或「 靠右 」。

• 色彩設定：可分別調整區塊的 文字顏色 與 背景顏色。

• 邊距調整：可針對電腦、平板與手機版分別設定 左右外邊距 與 底部外邊距，調整與其他區塊的間距。

自訂 HTML¶

商家自行編輯 HTML 內容或嵌入 CSS 語法，用以添加官網預設功能之外的自定義素材或第三方服務工具（如：IG 動態牆）。

• 自訂 HTML 內容：點選 編輯 按鈕可開啟編輯器。商家可在此直接 輸入 HTML 語法，且該區塊同時 支援 CSS 語法。

• 其他版面設計（邊距設定）：可針對 電腦版 與 手機版（含平板） 左右外邊距 及 底部外邊距。

• 嵌入第三方外掛（如 Elfsight IG 牆）：在 elfsight 取得追蹤碼後，新增「自訂 HTML」區塊，點擊編輯並貼上語法即可在官網顯示 IG 動態牆。

文字編輯¶

建立結構化內文、展示品牌資訊。進入該區塊後，商家可以針對以下維度進行調整：

• 內文編輯： 在文字編輯器進行內容撰寫。

• 字級設定： 商家可以自由調整內文的 文字大小（字級），以符合視覺美感。

• 邊距調整： 可針對 電腦版、平板與手機版 分別設定 左右外邊距 與 底部外邊距 ，用以控制區塊與網頁邊界或其他區塊的間距。

主打商品¶

在區塊設定中點擊 商品設定 來綁定欲展示的商品，請留意以下規範：

• 綁定數量： 此區塊僅限綁定 1 件 商品。

• 適用狀態： 商品必須為 已上架 狀態。系統不支援顯示「未上架」、「已下架」、「未公開」或「已刪除」的商品。

• 不支援類型： 此區塊 不支援 「組合商品」與「電子票券」。

區塊內容自訂與排序

您可以依據行銷需求，自由選擇要在區塊中顯示的資訊，並透過拖拉調整其 顯示順序：

• 可顯示項目： 包含「商品標題」、「價格」、「款式選單」、「數量選擇器」、「購買按鈕」以及自定義的「文字」。

• 彈性調整： 若不希望消費者直接在該區塊選擇數量，可將「數量選擇器」關閉；若想加強導購語氣，可善用「文字」欄位進行補充說明。

版面設計與同步規則

• 邊距設定： 點擊「 其他版面設計 」，可設定此區域與網站邊界（左右與底部）的距離，確保視覺平衡。

• 樣式同步： 為了維持網站視覺的一致性，以下資訊會直接 與該商品在商品頁的設定保持同步，無法在此區塊單獨更改：

  • 商品圖片比例。
  • 款式選單樣式（如色票小圖或下拉選單）。
  • 預設款式設定。
  • 商品售完後的按鈕文字（如：補貨中、聯絡店家）。

折疊內容¶

展示資訊量較大但非即時需要全數閱讀的內容，如官網的 FAQ（常見問題）、 購物須知、 配送政策 或 售後服務 說明。

點擊該區塊的 其他版面設計 分頁，可調整以下視覺細節：

• 區塊標題： 設定整個折疊區域的總體標題（例如：常見問題 QA）。

• 顏色設定： 可自訂區塊的文字與背景色彩，以符合品牌視覺。

• 邊距調整： 設定此區域與網站邊界（左右及底部）的距離。

折疊項目內容編輯

商家可以依據需求逐一新增具體的內容條目：

• 內容輸入： 每個項目皆可分別輸入 項目標題 與 詳細內文。

• 圖示設定： 可為每個折疊項目設定對應的 Icon（圖示），增加視覺辨識度。

• 項目數量限制： 單一個「折疊內容」區塊內， 最多可設定 10 個 折疊項目。

商品頁面¶

商品頁面主要由四個功能區塊組成，可依需求開啟或調整排序：

商品群組頁面¶

在拖拉編輯器中，您可以針對群組頁面進行以下細節設定：

• 商品分類設定：

  • 左側選單連結：可指定該群組頁面要套用哪一組導覽選單（需先在「選單/導覽列設定」 完成設置）。

  • 商品欄數：商品每排顯示的數量。

  • 商品數量上限：設定每頁顯示的商品數量。

  • 更多商品顯示方式：設定顯示更多商品的呈現方式，分頁跳轉或是向下無限滾動顯示。

商品多層級分類¶

需先建立商品多層級分類架構 。

完成結構後，商家可針對多層級分類頁面的呈現方式進行微調。

部落格頁¶

此頁面主要用於呈現多篇文章的摘要列表。

• 每頁文章數量：商家可以自訂每頁要顯示的文章總數。

• 顯示精選文章：勾選此功能後，系統會在部落格列表頁的底部顯示特定的「精選文章」，適合用來增加熱門文章的曝光。

• 精選文章群組：在開啟精選文章後，可以進一步選擇要顯示哪一個部落格群組內的文章作為精選內容。

部落格文章頁¶

此頁面用於顯示單篇完整文章的詳細內容。

• 文章標籤區標題：系統會自動抓取該文章所屬群組內的所有「文章標籤」並在此區塊呈現。

客服頁¶

客服頁面在前台主要以「聯絡我們」表單的形式呈現，供訪客留言諮詢。

• 問題類型設定：商家可自訂「聯絡我們」表單中的下拉式問題選單。設定路徑為後台 會員 > 客服問題分類。

• 聯絡資訊設置：除了表單外，建議在 頁腳 （Footer）區塊同步設定完整的公司電話、地址與 Email，增加品牌信任感。

針對顧客留言的客服頁面，拖拉版型支援建立 Google reCAPTCHA 安全驗證 ，以防止機器人攻擊或垃圾訊息。

404 頁¶

引導當消費者訪問到失效連結（如活動結束、商品下架或網址錯誤）時的顯示畫面。商家可以透過簡單的設定，自訂該頁面的視覺。

• 更換圖片：商家可以 自行上傳並更換 404 頁面的圖片。建議設計符合品牌風格或有趣的引導圖案，以緩解負面體驗。例如：提示網頁已走失，並提供回到首頁的按鈕提示。
• 標題：設定 404 頁面標題文件。
• 返回首頁：設定返回首頁按鈕文字。

快速到貨頁¶

用於自訂快速到貨專區的視覺與醒目入口。

• Logo 背景：設定 導覽列顏色（Logo 背景），以幫助消費者區分一般專區與快速到貨專區。

• 顯示快速到貨按鈕：勾選後系統會在官網全站導覽列上方顯示明顯的專區入口，引導消費者點擊。

搜尋頁¶

搜尋頁面目前提供以下自訂設定項目：

• 選擇選單：商家可以指定搜尋頁面左側要套用的 選單連結列表 （需先建立選單）。

• 商品顯示資訊：搜尋結果中的商品會同步套用「全站設定」中的顯示規範，包含 商品價格區間 （顯示最低價至最高價）、 商品標語 以及 已銷售數量。

• 標籤顯示：搜尋結果頁支援顯示多種商品標籤，包含 定期定額標籤、 特價標籤、 缺貨標籤 以及 自定義標籤。

搜尋範圍與邏輯說明

搜尋（放大鏡）功能的運作邏輯如下：

• 搜尋範圍：系統不只查詢「商品名稱」，搜尋範圍亦涵蓋 商品群組名稱、商品廠商以及商品介紹。

• 分詞邏輯：商品標題支援 分詞搜尋，需完全符合分詞才會被搜到；例如使用「空格」或「-」會將標題切分為單詞，若輸入標題為「ER-1410」，搜尋「1410」可找到，但若標題為「ER1410」，搜尋「1410」則無法找到。

• 排除搜尋：若商家有部分商品不希望出現在搜尋頁，可於商品編輯頁的「基本設定」中 關閉「商品搜尋功能」，該商品將無法在站內搜尋框、所有商品列表以及外部 Google 搜尋中被檢索。

後續操作¶

常見問題¶