各頁面設定指南

依頁面類型說明拖拉版型的各項設定，包含首頁區塊、商品頁面、部落格、客服頁等。

| 全版本
| 拖拉版型

各頁面設定說明¶

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

各頁面設定需在拖拉版型編輯器中進行，請先參閱 拖拉版型網站設定 了解如何進入編輯器。

使用前提與限制¶

開始之前，請先確認以下條件：

• 已進入拖拉版型編輯器： 需先開啟拖拉版型編輯器，請見 進入拖拉版型編輯器。
• 已使用拖拉版型： 只有標示「拖拉設定」的版型才適用本文的設定。
• 部分頁面需先完成前置設定： 例如多層級分類、客服功能開通、門市設定等，請依各頁面章節的說明確認。

操作步驟¶

依所需頁面類型快速跳轉：首頁、商品頁面、商品群組頁面、商品多層級分類、部落格頁、部落格文章頁、客服頁、404 頁、快速到貨頁、搜尋頁。

首頁¶

首頁可新增以下 13 種區塊。多數區塊的設定面板會提供一個 其他版面設定 展開面板，裡面除了各區塊的特有項目外，都包含一組共通的 版面邊距（單位 px），以下各區塊章節 只列出其特有設定，共通的版面邊距不再重複說明。

通用操作方式：

1. 在頁面下拉選單中選擇「首頁」，可參考切換編輯頁面與預覽了解預覽方式。
2. 在左側區塊列表點擊「新增區塊」，選擇要新增的區塊類型。
3. 點選區塊，在右側面板中編輯其內容與設定。
4. 完成後點擊「儲存」保存變更。

輪播素材¶

可放入多張輪播「素材」的主視覺區塊。

1. 新增「輪播素材」區塊。

2. 在設定面板點擊 其他版面設定，展開後設定 區塊層級 屬性：

   • 圖片停留秒數：每輪停留幾秒後切下一輪（預設 3 秒）。
   • 圖片切換速度：切換動畫的速度，數值越大切換越慢（預設 0.3 秒）。

   

   電腦版平板版、手機版

   • 版面左右外邊距（預設 0px，設 0 即滿版）、版面底部外邊距（預設 50px）。
   • 圖片數量：每輪並排張數，電腦版可選 1～8（預設 1）。
   • 圖片間距：張與張之間的距離（預設 12px，需 2 張以上才作用）。

   

   • 版面左右外邊距（預設 0px）、版面底部外邊距（預設 50px）。
   • 圖片數量：手機版僅可選 1～3（預設 1）。
   • 圖片間距：預設 8px。

   

3. 為 每張素材 設定圖片：

   • 上傳 電腦版（建議寬 1920px）／平板版（960px）／手機版（480px） 圖片，單張不超過 1MB，支援 JPG／PNG／JPEG／GIF。
   • 僅上傳電腦版時，平板與手機會自動沿用同一張。
   • 設定 圖片連結（可勾選「在新分頁開啟連結」）與 圖片替代文字（alt）（有助 SEO）。

   

4. 設定 素材文字（同樣是每張素材各自設定）：

   • 內容位置：置左／置中／置右。
   • 填入 標題文字、內文文字、按鈕文字、按鈕連結（按鈕連結亦可勾選新分頁開啟）。
   • 分別設定 標題、內文、按鈕底色、按鈕文字 的顏色。

   

1. 新增「輪播素材」區塊。

2. 在右側面板中點擊 其他版面設定，展開後設定以下 區塊層級 屬性：

   • 圖片停留秒數、切換速度。
   • 電腦／手機版可各自設定圖片數量與間距。

   

3. 為 每張素材 上傳電腦／平板／手機版圖片，設定圖片連結（可開啟新分頁）與圖片替代文字（alt）。

   

4. 設定 素材文字：選擇內容位置，填入標題、內文、按鈕文字與連結，並設定標題／內文／按鈕的顏色。

   

橫幅廣告¶

單張橫幅圖片，常用於活動入口。

1. 新增「橫幅廣告」區塊。

2. 上傳電腦／平板／手機版圖片。

   

3. 設定圖片連結與替代文字（alt）。

   

   

4. 可開啟 顯示按鈕，設定按鈕位置、文字與底色／文字色。

   

商品分類¶

從指定商品分類帶入商品的列表區塊。

1. 新增「商品分類」區塊。
2. 填寫 標題，點擊 選擇商品分類 挑選要顯示的分類。

3. 設定商品數量上限與商品展開方式。

   

4. 在 版面設定 中調整電腦／手機版的商品欄數、商品排列、文字排列。

   

5. 在 樣式設定 中選擇電腦版商品分類樣式、商品圖游標懸停效果、商品圖圓角。

   

   

影片設定¶

嵌入單支影片。

1. 新增「影片設定」區塊。
2. 填寫 標題 與 影片連結。
3. 設定自動播放、隱藏外框、重複播放等選項。

分頁頁籤¶

以頁籤呈現多個部落格的文章。

1. 新增「分頁頁籤」區塊。

2. 在 其他版面設定 中填寫標題，設定文章欄數。

   

3. 在 部落格 小區塊中，各別選擇要顯示的部落格。

   

自訂排版設計¶

自由組合多種小區塊的彈性版面，可設定區塊間距與手機版排版。

1. 新增「自訂排版設計」區塊。
2. 點擊 新增小區塊，選擇要加入的元件類型：

圖文介紹¶

圖片搭配文字與按鈕的介紹區塊。

1. 新增「圖文介紹」區塊。
2. 設定文字排版、文字色／背景色。
3. 上傳電腦／平板／手機版圖片，選擇圖片位置與電腦版版面占比。
4. 在 小區塊 中編輯標題（可設字級）、內文（可設字級）、按鈕（文字、底色／文字色、連結）。

自訂 HTML¶

直接貼入 HTML 程式碼，適合放第三方語法或自訂內容。

1. 新增「自訂 HTML」區塊。
2. 點擊「編輯」，在 HTML 編輯器中貼入程式碼。

應用程式¶

放入已安裝的應用程式元件。

1. 新增「應用程式」區塊。
2. 點擊 選擇套件，選取已安裝的應用程式。

文字編輯¶

純文字編輯區塊，提供進階文字編輯器。

1. 新增「文字編輯」區塊。
2. 在進階文字編輯器中輸入內容，可使用標題、樣式、連結等功能。

CMS 加值¶

進階自訂區塊，提供 HTML／CSS／JS／Import 程式碼編輯器，並可帶入指定商品分類與商品數量上限。

1. 新增「CMS」區塊（需開通 CMS 加值功能）。
2. 在程式碼編輯器中編寫或貼入 HTML／CSS／JS 程式碼。
3. 設定要帶入的商品分類與商品數量上限。

主打商品¶

聚焦呈現單一商品並提供購買操作。

1. 新增「主打商品」區塊。
2. 點擊 選擇商品 挑選要顯示的商品。
3. 選擇商品圖片位置。
4. 在 小區塊 中設定商品標題（字級、可帶商品連結）、文字、購買按鈕、價格、款式選單、數量選擇器。

折疊內容¶

可展開／收合的內容區塊，適合 FAQ 或購物須知。

1. 新增「折疊內容」區塊。
2. 填寫 標題，設定背景／容器／邊框／文字顏色、內外邊距。
3. 在 折疊項目 小區塊中，編輯項目標題、標題圖示、內容（進階文字編輯器）。

商品頁面¶

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

在頁面下拉選單選擇「商品頁面」，即可進行以下設定：

商品群組頁面¶

針對群組頁面，可指定要套用哪一組導覽選單（需先在 選單／導覽列設定 完成設置）。

1. 在頁面下拉選單選擇「商品群組頁面」。
2. 設定 商品欄數（每排顯示的商品數量）。
3. 設定 商品數量上限（每頁顯示的商品數量）。
4. 選擇 更多商品顯示方式（分頁跳轉或向下無限滾動）。

商品多層級分類¶

針對多層級分類頁面的呈現方式進行微調。需先 建立商品多層級分類架構。

部落格頁¶

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

1. 在頁面下拉選單選擇「部落格頁」。
2. 設定 每頁文章數量。
3. 勾選 顯示精選文章，在部落格列表頁底部顯示特定精選文章。
4. 開啟精選文章後，選擇要顯示哪一個部落格群組作為精選內容。

部落格文章頁¶

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

1. 在頁面下拉選單選擇「部落格文章頁」。
2. 設定 文章標籤區標題，系統會自動抓取該文章所屬群組內的所有文章標籤並在此區塊呈現。

客服頁¶

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

1. 在頁面下拉選單選擇「客服頁」。
2. 設定 問題類型：前往後台 會員 > 客服問題分類 自訂表單中的下拉式問題選單。
3. 建議在 頁腳(Footer) 區塊同步設定完整的公司電話、地址與 Email，增加品牌信任感。
4. 如需防止機器人攻擊，可 啟用留言區 reCAPTCHA。

404 頁¶

當消費者訪問到失效連結時的顯示畫面，可自訂視覺以緩解負面體驗。

1. 在頁面下拉選單選擇「404 頁」。
2. 上傳自訂圖片，建議設計符合品牌風格或有趣的引導圖。
3. 設定 標題 與 返回首頁按鈕文字。

快速到貨頁¶

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

1. 在頁面下拉選單選擇「快速到貨頁」。
2. 設定 Logo 背景（導覽列顏色），幫助消費者區分一般專區與快速到貨專區。
3. 勾選 顯示快速到貨按鈕，系統會在官網全站導覽列上方顯示明顯的專區入口。

搜尋頁¶

1. 在頁面下拉選單選擇「搜尋頁」。
2. 指定搜尋頁面左側要套用的 選單（需先 建立選單）。
3. 搜尋結果中的商品會同步套用「全站共用設定」中的顯示規範（價格區間、商品標語、已銷售數量等）。
4. 搜尋結果頁支援顯示定期定額、特價、缺貨以及自定義標籤。

後續操作¶

參考資料¶

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

橫幅廣告¶

單張橫幅圖片，常用於活動入口。

1. 新增「橫幅廣告」區塊。

2. 上傳 電腦版（建議寬 1920px）／平板版（960px）／手機版（480px） 圖片，單張不超過 1MB，支援 JPG／PNG／JPEG／GIF。僅上傳電腦版時，平板與手機會自動沿用同一張。

   

3. 設定 圖片連結（可勾選「在新分頁開啟連結」）與 圖片替代文字（alt）。

   

   

4. 可勾選 顯示按鈕，開啟後設定 按鈕位置、按鈕文字，以及按鈕的 底色／文字色。

   

5. 在 其他版面設定 調整版面邊距（電腦左右／底部、手機左右／底部；手機版底部外邊距預設 24px）。

商品分類¶

從指定商品分類帶入商品的列表區塊。

1. 新增「商品分類」區塊。
2. 填寫 標題，點擊 選擇商品分類 挑選要顯示的分類。

3. 設定 商品數量上限（每次顯示的商品數，預設 12）與 商品展開 方式。

   

4. 在 版面設定 中調整：

   • 商品欄數：電腦版 2～6 欄（預設 4）、手機版 1～3 欄（預設 2）。
   • 商品排列：置左／置中／置右。
   • 文字排列：置左／置中／置右（預設置中）。

   

5. 在 樣式設定 中選擇：

   • 電腦版商品分類樣式。
   • 商品圖游標懸停效果：共 5 種 —— 快速加入購物車按鈕／圖片切換／陰影／邊框強調／放大效果。
   • 商品圖圓角（預設 15px）。

   

   

影片設定¶

嵌入單支影片。

1. 新增「影片設定」區塊。
2. 填寫 標題 與 影片連結。

3. 設定播放行為（皆為是／否）：

   • 自動播放（預設關閉）。
   • 隱藏外框（預設關閉）。
   • 重複播放（預設開啟）。

4. 在 其他版面設定 調整電腦／手機版面邊距（此區塊四組邊距預設皆為 0）。

分頁頁籤¶

以頁籤呈現多個部落格的文章。

1. 新增「分頁頁籤」區塊。

2. 在 其他版面設定 中填寫 標題，並設定 文章欄數（2～5 欄，預設 4）。

   

3. 在 部落格 小區塊中新增／管理頁籤，每個小區塊各自選擇一個要顯示的部落格（可加入多個小區塊形成多頁籤）。

   

自訂排版設計¶

自由組合多種小區塊的彈性版面。

1. 新增「自訂排版設計」區塊。

2. 在 其他版面設定 設定版面：

   • 電腦版／手機版的 版面邊距。
   • 區塊間距：小區塊之間的距離，電腦版與手機版可各自設定（預設 10px）。
   • 手機版排版：控制小區塊在手機上的排列方式。

3. 點擊 新增小區塊，選擇要加入的元件類型。每一種小區塊都可設定「版面螢幕占比」 來控制寬度：

圖文介紹¶

圖片搭配文字與按鈕的介紹區塊。

1. 新增「圖文介紹」區塊。
2. 設定 文字排版（靠左／置中／靠右）、文字色 與 背景色。
3. 上傳電腦／平板／手機版圖片，選擇 圖片位置（左側／右側）與 電腦版版面占比（預設 50%）。

4. 在 小區塊 中編輯：

   • 標題：文字內容（預設「產品介紹」），可設 字級（預設 24px）。
   • 內文：進階文字編輯器，可設 字級（預設 14px）。
   • 按鈕：按鈕文字（預設「了解更多」）、按鈕底色／文字色、按鈕連結（可新分頁開啟）。

自訂 HTML¶

直接貼入 HTML 程式碼，適合放第三方語法或自訂內容。

1. 新增「自訂 HTML」區塊。
2. 點擊「編輯」，在 HTML 程式碼編輯器中貼入程式碼。
3. 在 其他版面設定 調整電腦／手機版面邊距（此區塊四組邊距預設皆為 0）。

應用程式¶

放入已安裝的應用程式元件。

1. 新增「應用程式」區塊。
2. 點擊 選擇套件，選取已安裝的應用程式（此區塊僅此一項設定，無版面邊距）。

文字編輯¶

純文字編輯區塊，提供進階文字編輯器。

1. 新增「文字編輯」區塊。
2. 在進階文字編輯器中輸入內容，可使用標題、樣式、連結等功能。
3. 在 其他版面設定 調整電腦／手機版面邊距（四組邊距預設皆為 0）。

CMS 加值¶

進階自訂區塊，提供程式碼編輯器並可帶入指定商品分類。

1. 新增「CMS」區塊（需開通 CMS 加值功能）。
2. 在程式碼編輯器中編寫，實際提供 4 格：Root（HTML）／CSS／JS／Import。
3. 設定要帶入的 商品分類 與 商品數量上限。

主打商品¶

聚焦呈現單一商品並提供購買操作。

1. 新增「主打商品」區塊。
2. 點擊 選擇商品 挑選要顯示的商品，並選擇 商品圖片位置（左側／右側）。

3. 在 小區塊 中設定：

   • 商品標題：可設 字級（預設 24px），並可勾選「帶入商品連結」「在新分頁開啟商品連結」（皆預設開啟）。
   • 文字：進階文字編輯器，可設字級（預設 14px）。
   • 購買按鈕：可勾選「顯示立即購買按鈕」（預設開啟）。
   • 價格／款式選單／數量選擇器：為固定顯示的小區塊，無其他可調整設定。

4. 此區塊 版面邊距預設較大（電腦左右 80px／底部 50px、手機左右 16px／底部 24px）。

折疊內容¶

可展開／收合的內容區塊，適合 FAQ 或購物須知。

1. 新增「折疊內容」區塊。
2. 填寫 標題（預設「折疊內容」）。
3. 設定 顏色：背景、項目底色、項目外框、文字與圖示（共 4 色）。

4. 設定 邊距（此區塊用 內邊距 padding，非外邊距）：

   • 電腦版：左右內邊距（預設 160px）、上下內邊距（預設 48px）、底部外邊距（預設 30px）。
   • 手機版：左右內邊距（預設 16px）、上下內邊距（預設 24px）、底部外邊距（預設 10px）。

5. 在 折疊項目 小區塊中，編輯 項目標題、標題圖示（無／問號／圖釘／打勾／電燈泡，共 5 種）、內容（進階文字編輯器）。