拖拉版型 : 功能介紹

• 網站 Logo : 可上傳檔案，更換導覽列 Logo 圖案。
  • 可於「電腦版 LOGO 高度」欄位，設定電腦版網頁的 LOGO 顯示高度。
    「電腦版 LOGO 高度」僅影響電腦版顯示，平板及手機版保持原有的響應式顯示。
  
• 導覽列樣式 : 可選擇「預設」/「併排置左」/「併排置右」，並可選擇背景是否透明呈現。
• 導覽列選單設定 : 可查看 選單/導覽列設定。
  
  • 可選擇選單是否預設展開。
  
• 搜尋欄位設定 : 設定商城是否可以使用搜尋功能。
• 置頂公告 : (若僅想要倒數時間不要有置頂公告圖片，請將圖片設定留空)
  • 僅顯示頁面 : 設定置頂公告圖片、時間倒數是否要在其他頁面呈現。
  • 圖片 : 可設定上方置頂公告圖片，並設定圖片連結。(請預覽不同裝置的呈現是否符合貴司設定)
  • 上架/下架時間 : 設定時間倒數時間。
  • 顯示時間倒數 : 點擊顯示後，請務必設定上下架時間。
  • 倒數文字/倒數背景 : 可自訂顏色。
  

• 彈窗廣告 – 圖片
  


• 彈窗廣告 – 影片
  


• 彈窗廣告 – 互動遊戲
  

• 點選左下角「顏色設定」
  


• 可自行變更顏色
  

• 圖示設定
  • 網站圖示 Favicon : 可自行設定網站顯示標題。
  • 轉貼分享圖片OG image : 當您貼上網站連結至某平台時，例：Facebook、Line。在這些平台上顯示的縮圖將會是您設定的 OG image。
  • 其他相關設定請至 轉貼連結預設圖片(OG IMAGE)
  


• 網站SEO/網頁鎖右鍵
  


• 導覽列 icon 設定
  
  • 系統預設 3 種樣式供您選擇，您也可自定義 icon。
  • 若選擇自定義 icon，請上傳以下圖示檔案：
    • 帳號
    • 購物車
    • 搜尋
    • 首頁(手機版)
    • 收藏(手機版)
    • 導覽列(手機版)
  • 選擇自定義 icon 時，建議讓圖示與相應功能有清晰的關聯性，確保顧客瀏覽網站時能直觀點擊。
  • 若有未上傳的圖示，系統會自動帶入「預設」樣式。
  • 2025 年 7 月前建立的一頁式商店，恕不支援此設定，將保留原有的 icon 樣式。
  


• 字型設定
  


• 商品相關設定/折扣貼紙/圖片寬高比例
  • 「商品相關設定」：可查看下方圖片查看功能對應位置。
  • 「顯示定期定額活動標籤」：勾起後，有綁定定期訂購活動的商品，則會顯示標示貼紙。
  • 「折扣貼紙(特價標籤)」：勾起後，售價低於定價的商品，會顯示折扣貼紙。若勾起「顯示定期定額活動標籤」，則不套用此處設定。
  • 「圖片寬長比例」：請依照您上傳的商品圖片來選擇呈現比例。(若有商品上下留有空白，建議可先更換呈現比例)
  
  高手PLUS版可使用新版標籤功能，下表說明系統提供的標籤種類。
  
  

  標籤種類	可設定數量	顯示方式
  定期定額標籤	1	當商品綁定定期定額活動，則自動顯示
  特價標籤	1	當商品售價小於定價，則自動顯示
  缺貨標籤	1	單款式商品：商品庫存為0，且設定庫存為0時停止銷售，則自動顯示 多款式商品：所有款式皆庫存為0，且設定庫存為0時停止銷售，才會顯示

  設定步驟：
  1. 依需求勾選指定標籤。
  2. 依需求選擇標籤類型。共有以下類型可供選擇：
     • 文字
     • 圖片
  3. 請輸入文字內容或上傳圖片，前台指定商品即會顯示對應標籤。
     
• 款式選單/商品購買數量上限
  

• 輪播素材介面 – 其他版面設計/素材
  


• 【其他版面設計】 : 可透過右方即時預覽，查看設定的是否符合。
  


• 【素材】 : 請依照上方格式上傳圖片，並可選擇點選圖片的連結。
  

• 橫幅廣告 : 可透過右方畫面即時查看設定。
  

1. 輸入此區塊的標題。


2. 選擇展示的商品群，您可選擇：
   • 展示全部商品
   • 展示指定自訂分類商品
   • 展示指定條件分類商品


3. 設定商品群的展示方式：

   欄位	說明
   商品顯示數量上限	設定此區塊至多顯示的商品數量 若選擇顯示數量過多，可能導致網站載入速度變慢，建議設定36個以內
   商品展開方式	可選擇「往下展開」或「左右滑動」
   商品欄數	電腦版：可選擇每排顯示 2~6 個商品 手機版(手機版包含平板版)：可選擇每排顯示 1~3 個商品
   商品排列	可選擇「置左」、「置中」、「置右」排列
   文字排列	可選擇「置左」、「置中」、「置右」排列
   版面外邊距	可設定左右外邊距、底部外邊距 電腦版與手機版(手機版包含平板版)可分開設定
   電腦版商品分類樣式	可選擇「預設」、「顯示部分內容」、「全顯示」

   


4. 影片設定：可透過右方畫面即時查看設定。
   • 目前僅支援 YouTube 影片連結格式。
   
   
   
5. 分頁頁籤 : 新增部落格群組，可透過右方畫面即時查看設定。
   


6. 自訂排版設計：您可自定義多個區塊，並彈性設定區塊的版面及順序。
   
   區塊介紹
   您可選擇以下樣式區塊：
   圖片

   若想建立區塊，請設定以下欄位：

   • 「電腦版圖片」、「平板版圖片」、「手機板圖片」：上傳對應裝置顯示的圖片。
   • 「圖片連結」：選擇點擊圖片後會導向的頁面。
   • 「圖片替代文字」：簡要說明圖片的主要資訊或用途。
   • 「版面螢幕占比」：設定圖片在版面中的比例。

   

   影片

   若想建立區塊，請設定以下欄位：

   • 「影片連結」：請貼上影片的YouTube網址。
     • 目前僅支援YouTube網址格式的影片連結，若您有影片檔案，請先上傳至YouTube再行設定。
   • 「版面螢幕占比」：設定影片在版面中的比例。

   

   排程跑馬燈

   若想建立區塊，請設定以下欄位：

   • 「排程跑馬燈」：請選擇您於 排程跑馬燈設定 製作的跑馬燈。
   • 「版面螢幕占比」：設定影片在版面中的比例。

   

   自訂HTML

   若想建立區塊，請設定以下欄位：

   • 可選擇輸入自訂語法。

   

   商品

   若想建立區塊，請設定以下欄位：

   • 「選擇商品」：請選擇欲顯示的商品。
     • 僅能選擇單個商品，若想顯示多個商品，請建立多個商品區塊。
   • 「電腦版商品分類樣式」：可選擇商品資訊的顯示方式。
   • 「版面螢幕占比」：設定影片在版面中的比例。

   

   
   
   其他排版設計
   您可以點擊「其他排版設計」，設定網站的邊距與區塊間的間距。
   
   
   設計模組的版面比例
   您可以透過設定「版面螢幕占比」來控制每個區塊在畫面中的寬度，讓多個區塊能在同一橫列中並排顯示。
   
   排列邏輯說明：
   • 區塊會由左至右依序排列。
   每一橫列的總占比上限為 100%。當區塊並排的占比超過 100%，系統會自動換行，將超出區塊及後續區塊顯示於下一列，以此類推。
   
   常見排版範例：
   • 三欄式結構：建立 3 個區塊，每個區塊的占比設為 33%，三者加總不超過 100% 即可並排。
     
   • 雙欄式結構：建立 2 個區塊，可設定為 60% + 40%、50% + 50% 等加總為 100% 的組合。
     
   • 單欄式結構：如僅有一個區塊需滿版呈現，可設為 100%。
     


7. 自訂HTML : 自行編輯 HTML 內容，並更改版面細節。
   
   
   


8. 圖文介紹 : 可透過右方畫面即時查看設定。
   
   
   • 區塊設定 : 可選擇 標題/內文/按鈕 ，並可編輯順序。
     
   
   
   • 其他版面設計 : 可透過右方畫面即時查看設定。
     
   
   
   • 圖片設計 : 可透過右方畫面即時查看設定。
     
   
   


9. 文字編輯 : 可透過右方畫面即時查看設定。
   
   
   


10. 主打商品：可展示 1 件重點商品，提升特定商品曝光度與網站轉換率。
    
    
    1. 點擊「其他版面設計」，設定此區域與網站邊界的距離。
    
    
    2. 點擊「商品設計」，綁定此區域欲展示的商品。
       • 僅限綁定1件商品。
       • 商品須為「已上架」，不支援「未上架」、「已下架」、「未公開」、「已刪除」商品。
       • 不支援組合商品、電子票券。
    
    
    3. 您可依需求調整主打商品區塊的內容，您可選擇顯示並排序以下資訊：
       • 「商品標題」
       • 「價格」
       • 「款式選單」
       • 「數量選擇器」
       • 「購買按鈕」
       • 「文字」
    
    
    4. 以下資訊會與商品頁設定保持同步：
       • 圖片比例
       • 款式選單樣式
       • 預設款式
       • 商品售完後按鈕文字
    
11. 折疊內容：展示單列區塊，點擊展開內文；可用於設計官網 FAQ 或購物須知。
    
    
    1. 點擊「其他版面設計」，設定以下內容：
       • 此區塊標題
       • 顏色
       • 此區塊與網站邊界的距離
    
    
    2. 依需求新增「折疊項目」
       • 輸入項目標題與內文
       • 設定圖示
       • 最多可設定 10 個「折疊項目」
    

📌 商品頁面

商品頁面可編輯四種設定，基本設定/商品介紹/商品評論/相關商品

1. 基本設定 : 依照圖中對照位置進行設定。
   
   
   

   當商品無庫存且設定不可購買時，商品款式狀態設定
   

   • 款式不可點選：前台商品款式按鈕將無法點選。
   • 款式可點選：前台商品款式按鈕可以點選，點選後下方顯示聯絡店家。
   
   
   

   商品價格標籤設定說明
   

   • 勾選「顯示優惠售價」：
     商品有定價，且定價大於售價，會顯示「優惠售價文字」。
     商品有定價，且定價小於(等於)售價，會顯示「建議售價文字」。
   • 勾選「顯示建議售價」：若商品無定價，會顯示「建議售價文字」。
   • 若兩者皆不勾選：「優惠售價文字」和「建議售價文字」皆不會顯示。
   • 若兩者皆勾選：系統將依「顯示優惠售價」和「顯示建議售價」邏輯進行判斷。
   

   多款式商品價格顯示說明
   

   • 不同款式間的售價相同，定價不同，且最高定價大於售價，則顯示售價與最高定價。
   • 不同款式間的售價相同，定價不同，且最高定價小於(等於)售價，則顯示售價。
   • 不同款式間的售價相同，定價相同，則顯示售價。
   • 不同款式間的售價不同，則顯示最低售價與最高售價(ex. NT$40 ~ NT$41)。


2. 商品介紹 : 設定標題名稱以及是否顯示該欄位。
   


3. 商品評論 : 請依照 商品評論 文件進行設定。
   


4. 相關商品 :
   
   • 【商品群組其他商品】 :
     依照「商品頁」「設定」「進階設定-商品自訂分類」群組中商品隨機顯示。
   • 【自訂關聯群組商品】 :
     依照「商品頁」「設定」「商品關聯群組」群組中商品隨機顯示。
   

📌 商品群組頁面

商品群組頁面，可設定 商品分類設定

• 商品分類設定 :
  
  • 【左側選單連結】 :
    可選擇設定好的選單。(選單設定方式請至 選單/導覽列設定 查看)
  

📌 商品多層級分類設定(僅限於plus版選配適用)

設定商品多層級分類

📌 部落格頁

• 【每頁文章數量】: 可設定文章顯示的數量。
  


• 【精選文章】: 選擇是否顯示精選文章，並選擇要作為精選文章的部落格。
  

📌 部落格文章頁

• 【文章標籤區標題】: 可至部落格管理設定文章的「標籤」，部落格群組內文章的所有「標籤」皆會在這裡呈現。
  

📌 客服

📌 404頁

• 404頁 : 自行更換404頁的圖片。
  

📌 搜尋頁

• 搜尋頁 : 可設定左側的選單。(選單/導覽列設定)