2.1 網店設計及基本設定

(i) 網店界面設計

不懂編寫電腦程式？STOREBERRY 為商家提供一系列時尚個性的主題模版，您只需從中挑選最合適的店面風格，簡單上傳您的品牌標誌及相關圖片即可完成網店的界面設計！商家可進入 STOREBERRY 後台 → 「網店」 → 「我的網店」 在此隨意更換網店的設計模板。

若您想作進一步修改，可在設計模版按下 「編輯」 一鍵，重新設定排版、色調等相關設計，打造您獨具一格的網店。

*STOREBERRY 採用 RWD（Responsive Web Design）響應式網頁設計，無論於手機、平板電腦、桌面電腦均能智能化展現網店

STOREBERRY 界面設計小貼士：

1）如何更改商店名稱和商標？

您可到 「STOREBERRY 後台」 → 「網店」 → 「我的網店」 在設計模板上點擊 「編輯」 進入界面設定，然後單擊左上角 「Shop logo」 旁的編輯小圖示進行更改，完成後按下 「保存」 即可。

2）如何設定自定義主目錄？

在建立您的產品分類後，您可在網店的設計模版中隨意安排或調配您的網店主目錄。

您可到 「STOREBERRY 後台」 → 「網店」 → 「我的網店」 在設計模板上點擊 「編輯」 進入界面設定，然後單擊頂端的主目錄列旁的編輯小圖示開始設置網店的主目錄列。你只需按下 「＋Add」 便可隨意加入各種產品分類、頁面及連結，然後以拖拉方式調動次序，完成後按下 「保存」 即可。

3）如何建立新頁面？

您可到 STOREBERRY 後台 → 「網店」 → 「我的網店」 在設計模板上點擊 「編輯」 入界面設定，再從左側選擇 「頁面」 便可看到一系列預設的網店頁面，包括常見問題、隱私政策、聯繫我們等。 要建立新頁面，你只需點擊位於 「頁面」 右方的 「+」 即可新增頁面，而頁面連結會顯示在頁面標題下方。完成輸入後按下 「保存」 。

4)如何添加網站圖標

您可到 「STOREBERRY 後台」 → 「網店」 → 「我的網店」 在設計模板上點擊 「編輯」 進入界面設定，然後單擊右上角 「網址」 旁的編輯小圖示進行更改，完成後按下 「保存」 即可。

5）如何添加幻燈片

STOREBERRY 現已全面升級「幻燈片」功能，助您打造更具品牌特色的首頁視覺，輕鬆展示最新產品與促銷活動。前往 STOREBERRY 後台的「網店」 →「我的網店」，點擊設計模板上的「編輯」進入設定介面。接著，點擊「幻燈片」旁的編輯圖示即可選擇想要的格式以及添加圖片，確認無誤後按下「保存」即完成設定。提供「盒裝」、「全寬」及「全屏」三種版面格式，滿足不同的視覺張力需求。您可以自訂圖片切換效果（如「淡入淡出」）與方向，並自由開啟「循環播放」與「自動捲動」，同時設定停留的時長（秒數）。

延續全新的字體功能，您現在可以為每一張幻燈片上的行銷文案設定專屬字體。文字內容輸入，為每張圖輸入自訂的「標題」與「正文」，例如輸入 "Great car to experience" 作為宣傳標語。在「排版」設定區塊中，可分別為「標題」與「正文」挑選不同的字體、文字顔色、及字體大小。

透過設定專屬的引導按鈕，有效提升顧客點擊率與轉換率，您可以開啟按鈕功能，並在同一張幻燈片上新增最多2個按鈕，貼上目標網址連結。可於「按鈕類型」下拉選單中挑選外觀樣式，例如選擇「描邊」設計，讓按鈕完美融入您的品牌視覺。

為了適配不同裝置，請留意並調整圖片尺寸，確保無論在手機或電腦版網頁上，圖片資訊皆能完整呈現。

6) 增加内容

為了豐富網店版面，您可以輕鬆新增多樣化的設計內容。您可到 STOREBERRY 後台 → 「網店」 → 「我的網店」 在設計模板上點擊 「編輯」 入界面設定，再從右側選擇任意一個 「+」 便可看到一系列預設的設計板塊任您選擇。

讓我們以實用的「圖片與文字」板塊為例！進入設定後，您可以上傳「圖片與文字」，並輸入想傳達給顧客的文字訊息。透過調整「模組尺寸」、「圖片位置」同「圖文比例」嚟決定整體版面嘅配置，例如揀選 1:1 或 2:1 等比例嚟呈現你嘅內容，再喺右側編輯器輸入你嘅「標題」同「內文」，例如設定好標題為 "Car go" 同相關嘅產品描述。

設定好「按鍵文字」同埋目標網址，亦可以自訂按鈕文字顏色嚟突出重點。同時，你可以喺背景選項揀選「純色」功能，並運用色盤設定好背景顏色或匯入圖片，最後確認無誤後點擊右下角嘅「保存」掣即可完成設定。

另一個例子，STOREBERRY 的「分隔線」組件讓您能輕鬆區隔網頁區塊，提升版面的層次感與可讀性，同時更支援加入自訂文字與動態效果，您可以精準控制線條的外觀與區塊間的留白比例：可選擇線條的外觀款式（如「實線」），並自訂線寬與專屬的線條顏色。可獨立設定分隔線的「頂部空間」與「底部空間」，幫助您完美掌控網頁各區塊間的視覺距離。

我們亦支援在分隔線中央或兩側加入自訂文字，並可設定文字對齊位置（左、中、右）。 可自由挑選專屬字體、調整字體大小、設定文字樣式（加粗、斜體、底線），並自訂醒目的文字顏色。

可為分隔線增添滑動或顯示的互動感，自由選擇「動畫類型」（例如：放大）以及動畫出現的「方向」。

7) 樣式設計

商家可以根據品牌特色，自由打造專屬的網店風格與配色！您可於 STOREBERRY 後台 → 「網店」 → 「我的網店」 → 「編輯（設計模板）」 在設計模板上點擊 「編輯」 進入界面設定，再從左側選擇 「樣式」 ，根據自己的偏好選擇顔色。

字體設定

現在您可以為網店的不同區塊（如：主標題、內文）及不同語言，設定專屬的字體，讓排版更具層次感。點選左側選單的「網頁」，點擊任一字體下拉選單，系統會彈出完整的字體庫。除了預設的系統字體外，您可以使用上方的「其他 Google 字體」搜尋框，輸入字體名稱關鍵字，即可快速找到並套用如 "Chelsea Market" 等精美字體。

(ii) 網誌管理

STOREBERRY 為商家增設了網誌 (Blog) 功能，您可於 STOREBERRY 後台 → 「網店」 → 「我的網店」 → 「編輯（設計模板）」 在設計模板上點擊 「編輯」 進入界面設定，再從左側選擇 「文章」 → 「所有文章」 ，然後單擊右上角的 「新增文章」 開始撰寫文章。商家可透過網誌發布最新產品、品牌故事、產品使用方法等有用資訊，向顧客定期分享品牌消息。

想提升網店的搜尋排名？STOREBERRY 網誌功能同時支援 SEO 設定及 CSS 代碼編輯，只要配合搜尋器演算法，時常發布最新及高關聯性的網誌文章內容絕對有助網站的 SEO 大加分！

(iii) 產品設定

商家可在 STOREBERRY 後台 → 「網店」 → 「產品設定」 修改商品及購物車的基本設定：

1）僅限會員：點擊 「啟用」 後，您的商品價格只會顯示給已登錄的會員。

2）顯示產品重量：點擊 「啟用」 後，顧客可查閱商品的重量。

3）購物車中物品過期時間(小時)：您可在此設定商品在顧客的購物車內停留的時間。如您輸入 10 小時，顧客存放在購物車的商品便會於加入購物車 10 小時後被清空。

(iv) 發票設定

商家可在 STOREBERRY 後台 → 「網店」 → 「發票設定」 填寫網店相關信息以設定發票內容。

(v) 推廣訊息

透過「推廣訊息」功能，商家可輕鬆發布網店的最新活動資訊。請前往後台「網店」 →「推廣訊息」，於介面中輸入活動文字、設定遮罩顏色，並點選「+」上傳對應的宣傳圖片。設定完成後點選「保存」即生效。

(vi) 通知欄

讓您的最新優惠一眼就被看見！現在就進入「網店」→「通知欄」，一鍵開啟「通知頂欄」功能！開啟開關後，您可自由設定通知欄的文字與背景顏色，並透過圖文編輯器輸入重要公告或促銷訊息。進階使用者亦可透過「CSS 樣式表代碼」自訂外觀。設定完成並點擊「保存」後，訊息即會顯示於網店頁面最上方。