> For the complete documentation index, see [llms.txt](https://storeberry-docs.gitbook.io/user-guide/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://storeberry-docs.gitbook.io/user-guide/online-store/2.1-store-design-settings.md).
# 2.1 網店設計及基本設定
### **(i) 網店界面設計**
不懂編寫電腦程式？STOREBERRY 為商家提供一系列時尚個性的主題模版，您只需從中挑選最合適的店面風格，簡單上傳您的品牌標誌及相關圖片即可完成網店的界面設計！商家可進入 **STOREBERRY 後台**** ****→**** ****「網店」**** ****→**** ****「我的網店」** 在此隨意更換網店的設計模板。
若您想作進一步修改，可在設計模版按下 「編輯」 一鍵，重新設定排版、色調等相關設計，打造您獨具一格的網店。
\*STOREBERRY 採用 RWD（Responsive Web Design）響應式網頁設計，無論於手機、平板電腦、桌面電腦均能智能化展現網店
.jpg?alt=media&token=999956fc-64bf-4dad-91f5-2d1963e1a352)
STOREBERRY 界面設計小貼士：
1）如何更改商店名稱和商標？
您可到 **「STOREBERRY 後台」**** ****→**** ****「網店」**** ****→**** ****「我的網店」** 在設計模板上點擊 **「編輯」** 進入界面設定，然後單擊左上角 **「Shop logo」** 旁的編輯小圖示進行更改，完成後按下 **「保存」** 即可。
.jpg?alt=media&token=9d0716a3-fd26-45fc-95fd-c179d5e16590)
2）如何設定自定義主目錄？
在建立您的產品分類後，您可在網店的設計模版中隨意安排或調配您的網店主目錄。
您可到 **「STOREBERRY 後台」**** ****→**** ****「網店」**** ****→**** ****「我的網店」** 在設計模板上點擊 **「編輯」** 進入界面設定，然後單擊頂端的主目錄列旁的編輯小圖示開始設置網店的主目錄列。你只需按下 **「＋Add」** 便可隨意加入各種產品分類、頁面及連結，然後以拖拉方式調動次序，完成後按下 **「保存」** 即可。
.jpg?alt=media&token=0a6e0a63-1c01-4379-a7cd-c8025d48d006)
3）如何建立新頁面？
您可到 **STOREBERRY 後台**** ****→**** ****「網店」**** ****→**** ****「我的網店」** 在設計模板上點擊 **「編輯」** 入界面設定，再從左側選擇 **「頁面」** 便可看到一系列預設的網店頁面，包括常見問題、隱私政策、聯繫我們等。\
要建立新頁面，你只需點擊位於 **「頁面」** 右方的 **「+」** 即可新增頁面，而頁面連結會顯示在頁面標題下方。完成輸入後按下 **「保存」** 。
.jpg?alt=media&token=52dd7618-d70b-4064-8518-e449eda4f8b6)
4\)如何添加網站圖標
您可到 **「STOREBERRY 後台」**** ****→**** ****「網店」**** ****→**** ****「我的網店」** 在設計模板上點擊 **「編輯」** 進入界面設定，然後單擊右上角 **「網址」** 旁的編輯小圖示進行更改，完成後按下 **「保存」** 即可。
.jpg?alt=media&token=ecd931ae-3689-4685-900c-96f46cf34392)
5）如何添加幻燈片
STOREBERRY 現已全面升級「幻燈片」功能，助您打造更具品牌特色的首頁視覺，輕鬆展示最新產品與促銷活動。前往 STOREBERRY 後台的**「網店」 →「我的網店」**，點擊設計模板上的「編輯」進入設定介面。接著，點擊**「幻燈片」**旁的編輯圖示即可選擇想要的格式以及添加圖片，確認無誤後按下「保存」即完成設定。提供「盒裝」、「全寬」及「全屏」三種版面格式，滿足不同的視覺張力需求。您可以自訂圖片切換效果（如「淡入淡出」）與方向，並自由開啟「循環播放」與「自動捲動」，同時設定停留的時長（秒數）。
.jpg?alt=media&token=b3a85ff7-702f-4f10-978a-e631dfe100b0)
延續全新的字體功能，您現在可以為每一張幻燈片上的行銷文案設定專屬字體。文字內容輸入，為每張圖輸入自訂的**「標題」與「正文」**，例如輸入 "Great car to experience" 作為宣傳標語。在**「排版」**設定區塊中，可分別為「標題」與「正文」挑選不同的字體、文字顔色、及字體大小。
透過設定專屬的引導按鈕，有效提升顧客點擊率與轉換率，您可以開啟按鈕功能，並在同一張幻燈片上新增最多2個按鈕，貼上目標網址連結。可於**「按鈕類型」**下拉選單中挑選外觀樣式，例如選擇「描邊」設計，讓按鈕完美融入您的品牌視覺。
.jpg?alt=media&token=460b6650-3d3f-46c0-9f16-4157b62d47c5)
為了適配不同裝置，請留意並調整圖片尺寸，確保無論在手機或電腦版網頁上，圖片資訊皆能完整呈現。
.jpg?alt=media&token=70bb34fd-faef-4678-a87a-ec4e5d10faf2)
6\) 增加内容
為了豐富網店版面，您可以輕鬆新增多樣化的設計內容。您可到 **STOREBERRY 後台**** ****→**** ****「網店」**** ****→**** ****「我的網店」** 在設計模板上點擊 **「編輯」** 入界面設定，再從右側選擇任意一個 **「+」** 便可看到一系列預設的設計板塊任您選擇。
.jpg?alt=media&token=95ef1b28-783c-4081-a19b-59e14f4a0ee0)
讓我們以實用的**「圖片與文字」**板塊為例！進入設定後，您可以上傳**「圖片與文字」**，並輸入想傳達給顧客的文字訊息。透過調整「模組尺寸」、「圖片位置」同「圖文比例」嚟決定整體版面嘅配置，例如揀選 1:1 或 2:1 等比例嚟呈現你嘅內容，再喺右側編輯器輸入你嘅「標題」同「內文」，例如設定好標題為 "Car go" 同相關嘅產品描述。
設定好**「按鍵文字」**同埋目標網址，亦可以自訂按鈕文字顏色嚟突出重點。同時，你可以喺背景選項揀選「純色」功能，並運用色盤設定好背景顏色或匯入圖片，最後確認無誤後點擊右下角嘅**「保存」**掣即可完成設定。
另一個例子，STOREBERRY 的**「分隔線」**組件讓您能輕鬆區隔網頁區塊，提升版面的層次感與可讀性，同時更支援加入自訂文字與動態效果，您可以精準控制線條的外觀與區塊間的留白比例：可選擇線條的外觀款式（如「實線」），並自訂線寬與專屬的線條顏色。可獨立設定分隔線的「頂部空間」與「底部空間」，幫助您完美掌控網頁各區塊間的視覺距離。
我們亦支援在分隔線中央或兩側加入自訂文字，並可設定文字對齊位置（左、中、右）。 可自由挑選專屬字體、調整字體大小、設定文字樣式（加粗、斜體、底線），並自訂醒目的文字顏色。
可為分隔線增添滑動或顯示的互動感，自由選擇**「動畫類型」**（例如：放大）以及動畫出現的「方向」。
7\) 樣式設計
商家可以根據品牌特色，自由打造專屬的網店風格與配色！您可於 **STOREBERRY 後台**** ****→**** ****「網店」**** ****→**** ****「我的網店」**** ****→**** ****「編輯（設計模板）」** 在設計模板上點擊 **「編輯」** 進入界面設定，再從左側選擇 **「樣式」** ，根據自己的偏好選擇顔色。
.jpg?alt=media&token=e94b5ec3-e878-4c29-b7c0-414fa5aa06f8)
**字體設定**
現在您可以為網店的不同區塊（如：主標題、內文）及不同語言，設定專屬的字體，讓排版更具層次感。點選左側選單的**「網頁」**，點擊任一字體下拉選單，系統會彈出完整的字體庫。除了預設的系統字體外，您可以使用上方的**「其他 Google 字體」**搜尋框，輸入字體名稱關鍵字，即可快速找到並套用如 "Chelsea Market" 等精美字體。
.jpg?alt=media&token=9af6f957-a1e9-46f4-a63b-e53ffcbd9206)
### **(ii) 網誌管理**
STOREBERRY 為商家增設了網誌 (Blog) 功能，您可於 **STOREBERRY 後台**** ****→**** ****「網店」**** ****→**** ****「我的網店」**** ****→**** ****「編輯（設計模板）」** 在設計模板上點擊 **「編輯」** 進入界面設定，再從左側選擇 **「文章」 → 「所有文章」** ，然後單擊右上角的 **「新增文章」** 開始撰寫文章。商家可透過網誌發布最新產品、品牌故事、產品使用方法等有用資訊，向顧客定期分享品牌消息。
想提升網店的搜尋排名？STOREBERRY 網誌功能同時支援 SEO 設定及 CSS 代碼編輯，只要配合搜尋器演算法，時常發布最新及高關聯性的網誌文章內容絕對有助網站的 SEO 大加分！
.jpg?alt=media&token=257d30c5-2a5f-48ae-b08f-79760181332e)
### **(iii) 產品設定**
商家可在 **STOREBERRY 後台** → 「網店」 → 「產品設定」 修改商品及購物車的基本設定：
1）僅限會員：點擊 **「啟用」** 後，您的商品價格只會顯示給已登錄的會員。
2）顯示產品重量：點擊 **「啟用」** 後，顧客可查閱商品的重量。
3）購物車中物品過期時間(小時)：您可在此設定商品在顧客的購物車內停留的時間。如您輸入 10 小時，顧客存放在購物車的商品便會於加入購物車 10 小時後被清空。
**(iv) 發票設定**
商家可在 **STOREBERRY 後台 → 「網店」 → 「發票設定」** 填寫網店相關信息以設定發票內容。
## (v) 推廣訊息
透過**「推廣訊息」**功能，商家可輕鬆發布網店的最新活動資訊。請前往後台**「網店」 →「推廣訊息」**，於介面中輸入活動文字、設定遮罩顏色，並點選**「+」**上傳對應的宣傳圖片。設定完成後點選「保存」即生效。
## (vi) 通知欄
讓您的最新優惠一眼就被看見！現在就進入**「網店」→「通知欄」，一鍵開啟「通知頂欄」**功能！開啟開關後，您可自由設定通知欄的文字與背景顏色，並透過圖文編輯器輸入重要公告或促銷訊息。進階使用者亦可透過**「CSS 樣式表代碼」**自訂外觀。設定完成並點擊**「保存」**後，訊息即會顯示於網店頁面最上方。
