# 2.1 網店設計及基本設定

### **(i) 網店界面設計**

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

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

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

<figure><img src="/files/BRFreq1Et2gOpp2U4oQ5" alt=""><figcaption></figcaption></figure>

STOREBERRY 界面設計小貼士：

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

您可到   <mark style="color:purple;background-color:purple;">**「STOREBERRY 後台」**</mark>**&#x20;&#x20;**<mark style="color:purple;">**→**</mark>**&#x20;&#x20;**<mark style="color:purple;background-color:purple;">**「網店」**</mark>**&#x20;&#x20;**<mark style="color:purple;">**→**</mark>**&#x20;&#x20;**<mark style="color:purple;background-color:purple;">**「我的網店」**</mark>  在設計模板上點擊   <mark style="color:purple;background-color:purple;">**「編輯」**</mark>   進入界面設定，然後單擊左上角   <mark style="color:purple;background-color:purple;">**「Shop logo」**</mark>   旁的編輯小圖示進行更改，完成後按下  <mark style="color:purple;background-color:purple;">**「保存」**</mark>  即可。

<figure><img src="/files/DhfoM0f5sG5ivaEnqllA" alt=""><figcaption></figcaption></figure>

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

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

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

<figure><img src="/files/yTrStc1TuyGrCWwSmdGB" alt=""><figcaption></figcaption></figure>

3）如何建立新頁面？

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

<figure><img src="/files/ZkqfbgsE427QHBgdL96r" alt=""><figcaption></figcaption></figure>

4\)如何添加網站圖標

您可到   <mark style="color:purple;background-color:purple;">**「STOREBERRY 後台」**</mark>**&#x20;&#x20;**<mark style="color:purple;">**→**</mark>**&#x20;&#x20;**<mark style="color:purple;background-color:purple;">**「網店」**</mark>**&#x20;&#x20;**<mark style="color:purple;">**→**</mark>**&#x20;&#x20;**<mark style="color:purple;background-color:purple;">**「我的網店」**</mark>  在設計模板上點擊   <mark style="color:purple;background-color:purple;">**「編輯」**</mark>   進入界面設定，然後單擊右上角   <mark style="color:purple;background-color:purple;">**「網址」**</mark>   旁的編輯小圖示進行更改，完成後按下  <mark style="color:purple;background-color:purple;">**「保存」**</mark>  即可。

<figure><img src="/files/O5QVO1YBj27LfczQ2lxA" alt=""><figcaption></figcaption></figure>

5）如何添加幻燈片

STOREBERRY 現已支援「幻燈片」功能，助您輕鬆展示實體店面、最新產品與促銷活動，隨時與顧客分享品牌消息。前往 STOREBERRY 後台的<mark style="color:purple;background-color:purple;">**「網店」 →「我的網店」**</mark>，點擊設計模板上的「編輯」進入設定介面。接著，點擊<mark style="color:purple;background-color:purple;">**「幻燈片」**</mark>旁的編輯圖示即可選擇想要的格式以及添加圖片，確認無誤後按下「保存」即完成設定。

<figure><img src="/files/MtyN0s5COgple4gk17mB" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/ofbJgHQQhTdoUjjUvfXV" alt=""><figcaption></figcaption></figure>

6\) 增加内容

為了豐富網店版面，您可以輕鬆新增多樣化的設計內容。您可到   <mark style="color:purple;background-color:purple;">**STOREBERRY 後台**</mark>**&#x20;**<mark style="color:purple;">**→**</mark>**&#x20;**<mark style="color:purple;background-color:purple;">**「網店」**</mark>**&#x20;**<mark style="color:purple;">**→**</mark>**&#x20;**<mark style="color:purple;background-color:purple;">**「我的網店」**</mark>   在設計模板上點擊  <mark style="color:purple;background-color:purple;">**「編輯」**</mark>  入界面設定，再從右側選擇任意一個  <mark style="color:purple;background-color:purple;">**「+」**</mark>   便可看到一系列預設的設計板塊任您選擇。

<figure><img src="/files/l6I5I1VyujcG22ghMICx" alt=""><figcaption></figcaption></figure>

讓我們以實用的<mark style="color:purple;background-color:purple;">**「圖片與文字」**</mark>板塊為例！進入設定後，您可以上傳<mark style="color:purple;background-color:purple;">**「圖片與文字」**</mark>，並輸入想傳達給顧客的文字訊息。根據視覺需求，自由調整文字的顯示位置以及圖片與文字的比例。在<mark style="color:purple;background-color:purple;">**「按鈕文字 (Button text)」**</mark>欄位中輸入引導用語（例如：立即購買、了解更多），並加入連結，讓顧客點擊後能直接前往對應的頁面。

<figure><img src="/files/dKKC81AyuB8ePjx7jvsg" alt=""><figcaption></figcaption></figure>

點擊右上角的<mark style="color:purple;background-color:purple;">**「進階設置」**</mark>，進入界面后選擇適合的圖片作爲背景圖。上傳背景圖片後，您可勾選啟用「視差效果」。此功能可讓背景圖片隨著使用者上下滑動網頁時產生動態位移，為網站增添豐富的視覺層次與專業感。

<figure><img src="/files/fHcjZzkzvOT3zhHGUHvC" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/TfxWiuiU6jfN3dqzqwLb" alt=""><figcaption><p>最終效果圖</p></figcaption></figure>

7\) 樣式設計

商家可以根據品牌特色，自由打造專屬的網店風格與配色！您可於 <mark style="color:purple;background-color:purple;">**STOREBERRY 後台**</mark>**&#x20;**<mark style="color:purple;">**→**</mark>**&#x20;**<mark style="color:purple;background-color:purple;">**「網店」**</mark>**&#x20;&#x20;**<mark style="color:purple;">**→**</mark>**&#x20;&#x20;**<mark style="color:purple;background-color:purple;">**「我的網店」**</mark>**&#x20;&#x20;**<mark style="color:purple;">**→**</mark>**&#x20;&#x20;**<mark style="color:purple;background-color:purple;">**「編輯（設計模板）」**</mark>   在設計模板上點擊   <mark style="color:purple;background-color:purple;">**「編輯」**</mark>   進入界面設定，再從左側選擇  <mark style="color:purple;background-color:purple;">**「樣式」**</mark> ，根據自己的偏好選擇顔色。

<figure><img src="/files/GfVuH8laCkMlMm9sLZhW" alt=""><figcaption></figcaption></figure>

### **(ii) 網誌管理**

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

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

<figure><img src="/files/zOuuW8OTWneg3xFAKCXo" alt=""><figcaption></figcaption></figure>

### **(iii) 產品設定**

商家可在  <mark style="color:purple;background-color:purple;">**STOREBERRY 後台**</mark> <mark style="color:purple;">→</mark>  <mark style="color:purple;background-color:purple;">「網店」</mark>  <mark style="color:purple;">→</mark>  <mark style="color:purple;background-color:purple;">「產品設定」</mark>   修改商品及購物車的基本設定：

1）僅限會員：點擊  <mark style="color:purple;background-color:purple;">**「啟用」**</mark> 後，您的商品價格只會顯示給已登錄的會員。

2）顯示產品重量：點擊 <mark style="color:purple;background-color:purple;">**「啟用」**</mark> 後，顧客可查閱商品的重量。

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

<figure><img src="/files/nXlsv4ZVgAQin1qvJUA8" alt=""><figcaption></figcaption></figure>

**(iv) 發票設定**

商家可在 <mark style="color:purple;background-color:purple;">**STOREBERRY 後台 → 「網店」 → 「發票設定」**</mark> 填寫網店相關信息以設定發票內容。

<figure><img src="/files/abIr9fZB2ShFFBbPrbLt" alt=""><figcaption></figcaption></figure>

## (v) 推廣訊息

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

<figure><img src="/files/A6ChiGktFC4gcABoKjoC" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/Uv3npQMT3Vz0Yvq5QXqm" alt=""><figcaption></figcaption></figure>

## （vi）通知欄

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

<figure><img src="/files/a7IxhwvHzO0t4FSuje51" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/LaeOQlmruKS3DaavPwuP" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://storeberry-docs.gitbook.io/user-guide/online-store/2.1-store-design-settings.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.