# Wix Stores：自訂 Studio Two 產品頁面

Source: https://support.wix.com/zh-hant/article/wix-stores-customizing-the-studio-two-product-page-zh-hant (updated 2026-11-13)
Related: Wix developer documentation, https://dev.wix.com/docs/llms.txt; Help Center index, https://support.wix.com/en/llms.txt

> **重要：** 為提供最佳體驗，我們會逐步在 Studio Two 編輯器中推出各項功能。因此，部分 Wix Stores 小工具目前尚未支援 Studio Two 的完整功能。

Wix 完全可自訂的產品頁面可協助實現設計構想。請先調整整體頁面，再逐一自訂各個部分，直到頁面符合構想。

> **提示：** 所有產品皆共用同一個頁面，因此編輯內容會套用至整個目錄。想知道其他商品套用此設計後的外觀嗎？使用頁面上方的預覽工具列選擇其他產品即可。

---

## 步驟 1｜自訂全域設定

請先調整套用至整個頁面的設定，例如邊距、設計和連結的資料。

### 自訂全域設定：

1. [前往編輯器](https://manage.wix.com/account/site-selector/?actionUrl=https%3A%2F%2Fwww.wix.com%2Feditor%2F%7BmetaSiteId%7D%3FeditorSessionId%3D%7Besi%7D%26)。
2. 點擊「**網站結構**」圖示 ![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2026/07/03/8fee07e0-2941-45dd-a732-3a3cc3343a50/afb13012-daf6-4a51-97bf-6ff135bbd545.png)。
3. 點擊「**頁面**」索引標籤。
4. 點擊「**產品頁面**」（位於「**商店頁面**」下方）。
5. 從操作列選擇要自訂的內容：

**管理資料**

1. 點擊「**管理資料**」。
2. 前往管理介面的「**產品**」頁面，新增及管理產品。

**提示：** [了解更多管理產品和類別的資訊。](https://support.wix.com/zh-hant/managing-products-and-categories)

**邊距與行為**

1. 點擊「**邊距與行為**」圖示 ![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/d6583964-8756-4344-ae8a-f24ce7803d0f/2026/11/02/85618892-5bd9-4167-8c60-7e72d8ef2c6f/image.png)。
2. 輸入頁面所需的邊距數值。

**所有設計選項**

1. 點擊「**所有設計選項**」圖示 ![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/59ab096e-e0a0-4b06-ad46-bd78e940c7f1/2026/07/22/375e5844-2445-425d-9084-d72e10b1ca22/image.png)。
2. [在檢驗器面板中設定設計選項。](https://support.wix.com/zh-hant/article/studio-two-editor-working-with-the-inspector-panel#design)

**連結至資料**

1. 以滑鼠右鍵點擊頁面上的元件。
2. 點擊「**連結至資料**」。
3. [將元件連結至資料來源。](https://support.wix.com/zh-hant/article/studio-two-editor-about-data-sources)

---

## 步驟 2｜自訂個別元件

選擇頁面上的元件進行設定。每個元件在[檢驗器面板](https://support.wix.com/zh-hant/article/studio-two-editor-working-with-the-inspector-panel)中都有專屬的「**設計**」和「**設定**」索引標籤。

### 自訂元件：

1. [前往編輯器](https://manage.wix.com/account/site-selector/?actionUrl=https%3A%2F%2Fwww.wix.com%2Feditor%2F%7BmetaSiteId%7D%3FeditorSessionId%3D%7Besi%7D%26)。
2. 點擊「**網站結構**」圖示 ![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2026/07/03/8fee07e0-2941-45dd-a732-3a3cc3343a50/afb13012-daf6-4a51-97bf-6ff135bbd545.png)。
3. 點擊「**頁面**」索引標籤。
4. 點擊「**商店頁面**」下方的「**產品頁面**」。
5. 點擊要自訂的元件。
6. 點擊檢驗器面板中的「**設定**」索引標籤。
7. 設定元件：

**產品媒體圖庫**

1. 選擇頁面上的媒體圖庫。
2. 在「**影片**」和「**滑桿**」區段設定圖庫：  
   * **顯示影片控制項：**啟用切換按鈕，在影片上顯示播放控制項。  
   * **自動播放影片：**啟用切換按鈕，自動播放影片。  
   * **循環播放影片：**啟用切換按鈕，一直重複播放影片。  
   * **循環顯示項目：**啟用切換按鈕，在滑桿顯示最後一個項目後返回第一個項目。
3. （選填）點擊「**設計**」索引標籤，然後在「**選擇設計項目**」下方選擇「**圖庫項目**」、「**下一個按鈕**」或「**上一個按鈕**」，即可設定該部分的樣式。

**階層連結**

1. 選擇頁面上的階層連結。
2. 在「**無障礙名稱**」欄位中輸入供螢幕助讀程式使用的描述。

**產品名稱**

產品名稱是與產品資料連結的文字元件，因此會自動顯示各項產品的名稱。

1. 選擇頁面上的產品名稱。
2. 使用操作列設定文字樣式，例如字型和大小。

**價格**

1. 選擇頁面上的價格。
2. 在**「屬性」**區段選擇價格的顯示方式：  
   * **原價優先顯示：**啟用切換按鈕，優先顯示促銷前的價格。  
   * **起價標籤：**輸入產品價格不一時顯示在價格前方的文字。

**彩帶**

1. 選擇頁面上的彩帶。
2. 點擊檢驗器面板中的**「設計」**索引標籤。
3. 在**「選擇要設計的內容」**下方選擇要設定樣式的部分：  
   * **彩帶：**同時設定所有彩帶的樣式。  
   * **主要彩帶：**設定主要彩帶的樣式。  
   * **其他彩帶：**設定其他彩帶的樣式。

**產品選項**

1. 選擇頁面上的產品選項。
2. 選擇選項的顯示方式：  
   * **文字選項顯示為：**選擇**「按鈕」**或**「下拉式選單」**，設定文字選項的顯示方式。  
   * **色彩選項、文字選項和修飾元：**在**「選項類型可見度」**下方啟用或停用各切換按鈕，即可顯示或隱藏該類型的選項。  
   * **顯示的選項：**拖曳滑桿，選擇要顯示的選項數量，範圍從 1 個到**「全部」**。

**注意：**隱藏必填選項可能會導致顧客無法將產品加入購物車。請在另一個「產品選項」元件中顯示隱藏的選項。

**訂閱方案**

1. 選擇頁面上的訂閱方案。
2. 選擇方案的顯示方式：  
   * **內容模式：**選擇**一次性購買和訂閱**或**所有卡片**。  
   * **一次性購買卡片位置：**選擇一次性購買卡片的顯示位置，例如**第一個**。
3. （選填）選擇面板頂端的**頻率下拉式選單**，設定無障礙選項，例如**HTML 標籤**和**無障礙名稱**。

**數量選擇器**

1. 選擇頁面上的數量選擇器。
2. 點擊操作列上的**自訂 Plus 圖示**或**自訂減號圖示**，即可變更圖示。
3. （選填）點擊**設計**標籤，然後在**選擇要設計的項目**下選擇**減號按鈕**或**Plus 按鈕**，設定該按鈕的樣式。

**操作按鈕**

操作按鈕整合了「加入購物車」和「立即購買」按鈕。

1. 選擇頁面上的按鈕。
2. 在**屬性**區段選擇按鈕的運作方式：  
   * **在按鈕上顯示價格：**啟用開關，即可在按鈕上顯示價格。  
   * **點擊時要求選擇選項：**啟用開關，讓系統在使用者點擊後提示選擇產品選項。  
   * **未完成選擇時的按鈕文字：**輸入顧客尚未選擇所有選項時，按鈕上顯示的文字。  
   * **點擊預購按鈕後的操作：**選擇顧客點擊預購按鈕後執行的操作，例如**加入購物車**。  
   * **加入購物車後的操作：**選擇顧客將產品加入購物車後執行的操作，例如**開啟側邊購物車**。

**產品資訊區段**

1. 選擇頁面上的資訊區段。
2. 在**產品資訊區段**標籤中啟用**顯示產品描述**開關，即可顯示產品描述。
3. 點擊**摺疊式選單**標籤，並選擇區段的開啟方式：  
   * **選擇預設狀態：**選擇**所有項目皆關閉**、**開啟第一個項目**或**開啟所有項目**。  
   * **允許開啟多個項目：**啟用開關，讓顧客可同時開啟多個區段。