功能列位置：左側導覽列「商城管理」>「商城列表」

歡迎使用全新的商城系統！這套系統結合了「品牌首頁」與「多個一頁式銷售頁」的優點，讓您可以靈活配置導覽選單，並透過簡單的拖拉元件，快速架設出美觀的購物環境。

第一步：開張您的商城

1. 在哪裡設定：進入後台後，找左邊選單的 「商城管理」 > 「商城列表」。
2. 幫商城取名字：點右上角**「新增商城」**。

• 商城名稱：這會變成網址的一部分，請輸入「小寫英文或數字」（例如：my-shop-123）。
• 商城標題：這是在網頁最上面顯示的名字（例如：木瓜生活館）。

1. 設定開張時間：選填，您可以決定這個商城什麼時候開始顯示，什麼時候自動結束。

第二步：頁面與「首頁」的概念

您的商城像一本書，裡面有很多頁：

• 首頁：只要把頁面的「網址路徑」設為 「/」，這頁就是大家進來看到的第一頁。
• 其他活動頁：您可以多做幾頁，路徑設成 /sale（特惠頁）或 /new（新品頁）。
  
• • 點擊「新增頁面＋」即可新增一頁式頁面，數量沒有限制。

第三步：動手設計網頁（元件說明）

在編輯頁面時，左邊選單有很多「小方塊」（元件），直接把喜歡的拉到中間，再從右邊修改內容：

1. 文字類

• 標題 H1、H2、H3
  
• • 什麼時候用：
  • • H1：頁面最重要的標題（如：2026 夏季新品大賞）。
    • H2 / H3：區塊的小標題（如：產品特色、顧客好評）。
  • 怎麼用：拖入後點擊文字直接修改，右側可以調整顏色字級與設計。
  • • 標題內容：直接在這裡打字，還可以用 B (粗體)、I (斜體)、U (底線) 來強調文字。
    • 文字顏色：點擊色塊選顏色，或輸入顏色代碼（如 #111827）。
    • 字級：數字越大，字就越大（例如：大標題可以設 36，小標題設 24）。
    • 對齊方式：讓文字靠左、置中或靠右。
    • 上間距 / 下間距：這是設定元件「上下要留多少空格」。如果覺得標題離上面的圖太近，就把「上間距」數字加多一點（例如設為 20）。
    • 最大寬度：通常設為 100%。如果您希望這串字不要鋪滿全螢幕，可以把百分比調小。
• 文字
  
• • 什麼時候用：寫長段落的介紹、使用說明或品牌故事。
  • 怎麼用：適合放在標題下方，右側可以調整文字顏色、字級大小與對齊方式，讓排版更整齊。
• 按鈕
  
• • 什麼時候用：引導客人「立即前往」、「點我購買」、「領取優惠」或「看更多介紹」。
  • 怎麼用：在右側設定按鈕顯示的文字與設計，並在「點擊連結」貼上點擊後要跳轉的「連結網址」。

2. 媒體類

• 圖片
  
• • 什麼時候用：放品牌形象海報、情境美照。
  • 怎麼用：點擊「選擇照片」來上傳圖片，可在右側設定「圓角」（讓圖片變圓滑）或調整「圖片寬度」等客製化排版。
• 影片
  
• • 什麼時候用：展示產品的操作影片、開箱介紹。
  • 怎麼用：直接貼上影片的網址連結（YouTube 連結），客人就能在網頁上直接看。
• 分隔線
  
• • 什麼時候用：當兩個區塊長得太像時，用來做視覺上的區隔。
  • 怎麼用：放在兩個元件中間，讓網頁有呼吸感，右側調整線條顏色與排版。
• 留白
  
• • 什麼時候用：覺得上下兩個東西擠得太難受時，放一個留白來「撐開」距離。
  • 怎麼用：可以在右側手動調整留白的高度，讓網頁看起來不擁擠。

3. 商品類

• 商品列表
  
• • 什麼時候用：在網頁上直接展示可以購買的商品。
  • 怎麼用：
  • 1. 點擊右側的「選擇商品」。
    2. 重要： 設定手機、平板、電腦分別要顯示幾個。建議電腦設 4-6 個，手機設 2 個，這樣排版最專業。

4. 版面類

• 格線容器 / 彈性容器 / 容器
  
• • 什麼時候用：
  • • 如果您想在同一行「並排」放兩個東西（例如：左邊放圖片，右邊放文字）。
    • 當您想給某一整區加上「底色」時。
  • 怎麼用：
  • 1. 先把容器拖曳進來。
    2. 再把「圖片」或「文字」元件拖曳進這個容器裡面。
    3. 容器就像一個大盒子，裡面的東西會跟著盒子的設定走（例如置中或平均分配空間）。

預覽頁面：點擊右上角「預覽頁面」，可即時查看在不同螢幕尺寸下的呈現效果。

儲存：編輯完成後，務必點擊右上角 「儲存」，變更才會正式生效。

頁面大管家：圖層與頁面設定

除了把元件拉進去，您還可以使用這兩個工具來幫您整理網頁內容：

1. 圖層 (左側第二個圖示)

• 做什麼用：這就像是網頁的「目錄」，讓您一眼看到現在網頁上放了哪些東西，不用捲動滑鼠找半天。
• 什麼時候使用：
• • 當網頁內容很多、很長時，想快速跳到某個元件修改。
  • 當您用了「容器」把很多東西裝在一起，想確認誰在誰裡面。
• 怎麼設定：
• • 點開圖層面板，直接點擊清單中的元件名稱（例如：標題 H1），中間畫板就會自動選中該元件，右側設定欄也會跟著跳出來。

2. 頁面設定 (左側第三個圖示)

• 做什麼用：這是設定這一頁網頁的「基本身分證」。
• 什麼時候使用：每當您新增加一個網頁時，一定要先來這裡設定。
• 怎麼設定：
• • 頁面標題：這頁的名字（例如：活動優惠、關於我們），會顯示在客人的瀏覽器分頁上。
  • 頁面描述：簡單寫一下這頁在賣什麼。
  • 頁面路徑：
  • • 非常重要！ 這裡是網址的結尾。
    • 如果是首頁，請填一個斜線 /。
    • 如果是活動頁，可以填 /about-us 或 /sale（只能使用英文、數字和減號）。
    • ⚠️ 重要：導覽列的連結必須跟這裡設的路徑一模一樣！

第四步：進階設定

在商城頁面點擊 「進階設定」 按鈕後，您會看到以下選單，我們一個一個來設定：

1. 商城顏色：設定店面色系

• 做什麼用：讓全站的按鈕、重點顏色符合您的品牌視覺。
• 怎麼設定：
• • 主色：選您品牌 Logo 的顏色。
  • 輔色：選一個搭配的次要顏色。
  • 範例：
    
    效果：
    
  • 小提醒：點擊色塊可以直接選顏色，設定好後，全站的色調就會統一，不會亂糟糟的。

2. Logo：上傳招牌圖

• 做什麼用：把您品牌的商標（招牌）放在網站的最上方。
• 怎麼設定：點擊中間的 「+」 號，從電腦選取您的 Logo 圖檔上傳。
  
  
• • 效果：

3. 導覽列內容：設定網頁右上角的選單項目

⚠️ 重要：連結與「頁面路徑」必須一致

在設定連結前，請先確認您在「一頁式頁面」編輯時所設定的 「頁面路徑」。

• 導覽列的「連結」 必須與「頁面路徑」 填寫得一模一樣，選單才點得開！
  
• 範例：如果您在頁面設定裡路徑寫 /sale，導覽列的連結就要填 /sale。

新增主項目 (最上層的選單)

• 做什麼用：這是客人一眼就會看到的一級選單（例如：首頁、特價專區）。
• 怎麼設定：
• • 點擊右上角的 「新增主項目 +」。
    
  • 標題：輸入您要顯示的文字（如：首頁）。
  • 連結：輸入該頁面的網址路徑。
  • • 小提醒：如果是要回首頁，連結請填一個斜線 /。

新增子項目 (下拉式選單)

• 做什麼用：如果您想把選單分類（例如：在「服飾」下面分出「上衣」、「褲子」），就可以用子項目。
• 怎麼設定：
• • 在主項目下方點擊 「新增子項目 +」。
    
  • 一樣填入「標題」與「連結」即可。
  • 這樣客人的滑鼠移到主項目時，就會自動掉下子選單。

💡 賣家導覽列設定小範例：

顯示名稱 (標題)連結內容說明

首頁

/

讓客人隨時能回到店面最開始的樣子，讓客人回到路徑設為 / 的首頁。

活動優惠

/sale

吸引客人點進去您的促銷活動頁面，需先建立一個路徑為 /sale 的頁面。

關於我們

/about-us

需先建立一個路徑為 /about-us 的頁面。

• 效果：
  

調整順序與刪除

• 拖拉排序：看到每個項目左邊的 「三條線圖示」 嗎？按住它上下拖動，就可以直接調整選單的前後順序。
• 刪除項目：如果某個選單不想用了，點擊右邊的 「紅色 X」 就可以移除。

💫

再次提醒： 設定完導覽列後，請務必點擊右上角的 「儲存設定」，並親自點點看選單，確認有沒有正確跳轉到您設計的頁面喔！

4. Google Analytics：流量小幫手

• 做什麼用：想知道每天有多少人來看您的店、大家最愛逛哪一頁嗎？填入這個碼就能串接 Google 的分析報表。
• 怎麼設定：在空格處填入您的 GA 評估 ID（例如：G-XXXXXXXXXX）。如果您沒有這個碼，可以先跳過。
  

5. 促銷列：最上方的廣告條

• 做什麼用：在網頁最頂端或最底部橫放一條色彩鮮豔的公告，顧客一進來就看得到。
• 怎麼設定：
  
• • **顯示狀態：**啟用-開啟功能，客人進站會看到。停用-暫時關閉，看板就不會跳出來。
  • 標題：寫下優惠，例如「全館免運中」或「領券現折 100」。
  • **設定顏色：**客製化背景／文字顏色。
  • 顯示時機（什麼時候跳出來？）：
  • • 立即顯示：一進網頁馬上跳出來（最直接）。
    • 載入頁面時間 (秒)：進來幾秒後才跳出，給客人一點緩衝。
    • 滾動後 (%)：當客人網頁往下滑到一定程度（例如滑了一半）才跳出，這表示客人對您的店有興趣了，這時候推優惠效果很好！
  • **位置：**設定此公告放置在頁面頂部或底部。
  • 顯示次數（要跳出幾次？）
  • • 如果您希望客人「每次」進站都看到，選「每次」。
    • 如果您怕打擾客人，可以選「每小時一次」、「每天一次」或「每週一次」。
  • **開始／結束顯示時間：**客製化公告顯示的時間區間。
  • **顯示按鈕：**如果您希望客人點了之後直接跳到某個頁面（例如特價區），可以開啟按鈕並貼上連結。
  • **顯示倒數計時：**設定此公告在頁面上是否顯示時間倒數，支援客製化的重複週期，可自訂時間。
  • 時區
  • • 告訴系統您現在人在哪裡，這樣您設定的「開始顯示時間」和「結束顯示時間」才會準確。
• 效果：

6. 簡易彈出窗口：彈跳視窗

• 做什麼用：顧客進站時跳出的小視窗，適合用來公告重大消息或發送折扣碼。
• 怎麼設定：
  
• • 顯示狀態：啟用-開啟功能，客人進站會看到。停用-暫時關閉，看板就不會跳出來。
  • 顯示次數（要跳出幾次？）
  • • 如果您希望客人「每次」進站都看到，選「每次」。
    • 如果您怕打擾客人，可以選「每小時一次」、「每天一次」或「每週一次」。
  • 顯示時機（什麼時候跳出來？）
  • • 立即顯示：一進網頁馬上跳出來（最直接）。
    • 載入頁面時間 (秒)：進來幾秒後才跳出，給客人一點緩衝。
    • 滾動後 (%)：當客人網頁往下滑到一定程度（例如滑了一半）才跳出，這表示客人對您的店有興趣了，這時候推優惠效果很好！
  • 連結（點了要去哪裡？）
  • • 在欄位填入網址。例如您可以填入特價專區的路徑 /sale。
    • 進階小秘訣：如果您希望點了之後直接跳到頁面上的某個「商品清單」，可以輸入 #product1、#product2，網頁會自動捲動到那裡！
  • 顯示時間（限時設定）
  • • 可以預設「開始」與「結束」日期。例如周年慶活動只到週日，設定好後時間一到它就會自動收起來，不用擔心忘記關。
  • 圖片
  • • 點擊中間的 「+」 號，上傳一張美美的活動海報。這張圖就是看板的主角，建議字體要大、重點要鮮明（例如：大大的「結帳 8 折」）。
  • 時區
  • • 告訴系統您現在人在哪裡，這樣您設定的「開始顯示時間」和「結束顯示時間」才會準確。
• 效果「活動優惠全館免運」：

7. 頁尾資訊設定：Footer / 店底資訊

• 做什麼用：網頁最下面那塊黑黑或灰灰的區塊，用來放聯絡電話、地址或退換貨規範等。
• 怎麼設定：
  
  效果：
  
• • 您可以選擇 「一欄」 或 「兩欄」 的排版。
  • 文字資訊：點擊「+」新增文字，例如寫下「聯絡我們：02-XXXXXXX」。
  • 圖片資訊：也可以放一些小圖示。

💡 檢查小撇步：發布前看一眼

• 預覽一下：點右上角的「眼睛圖示」，看看手機版、平版版跟電腦版長得好不好看。
• 記得存檔：全部弄好後，一定要按右上角的 「儲存設定」，客人才看得到您的新網頁喔！

五、 發佈與預覽

• 頁面設定：在編輯器左側「頁面設定」中，務必檢查「頁面路徑」是否正確。
• 預覽頁面：點擊右上角「眼睛圖示」，可即時查看在不同螢幕尺寸下的呈現效果。
• 儲存：編輯完成後，務必點擊右上角 「儲存」，變更才會正式生效。