區段和區塊

您可以在佈景主題中使用區段，建立您想要的網路商店版面配置。區段是由具有特定功能的不同類型的區塊所組成，例如文字、按鈕、單張圖片、圖片拼貼或連結。

排列內容時，區段和區塊提供了彈性，因此您無須編輯程式碼即可控制網路商店的風格，包括以下自訂選項：

您可以重新排列範本中的區段，並重新排列區段中的區塊。
區段和區塊可以具有特定的自訂設定。
您可以透過自訂資料連接您網路商店上相容的區段和區塊，例如新增商品護理說明。深入瞭解如何連接動態來源。

佈景主題編輯器可用的區段和區塊會依您的佈景主題和佈景主題版本而定。例如，您的佈景主題可能有一個您僅可以新增至「素材輪播」區段的「投影片」區塊，以及一個可以新增到所有佈景主題區段的「標題」文字區塊。如需更多可用選項的相關資訊，請參閱佈景主題說明文件。

區段和區塊的最大限制

區段和區塊具有以下最大限制：

每個範本最多包含 25 個區段。
每個區段最多包含 50 個區塊。區塊的確切數量以及您可以新增到每個區段的每種類型區塊數量取決於區段和區塊來源，並且由您佈景主題的佈景主題設計人員指定。例如，如果您的佈景主題具有「電子郵件註冊」區段，那麼您可能只能新增一個「電子郵件表單」區塊。
支援巢狀的區塊最多可以有 8 級巢狀區塊。

此頁面上

區塊來源

根據您的佈景主題結構以及已安裝的應用程式，您的佈景主題可能包含各種區段可接受來自不同來源的區塊。當您新增區塊至區段時，該區段的所有可用區塊都顯示在區塊選擇器中。根據您的佈景主題和佈景主題版本，您可以將以下類型的區塊新增到您佈景主題的區段中：

「應用程式區塊」是新增功能至您佈景主題的區塊。您可以使用應用程式區塊，將由已安裝應用程式新增的佈景主題區域，重新調整至佈景主題頁面的特定位置。
「區段區塊」是特定區段中定義的區塊。
「佈景主題區塊」是在您佈景主題中定義的區塊，並且可能具有動態功能，例如巢狀功能。

您的佈景主題可以包含一些使用區段區塊的區段，以及使用佈景主題區塊的其他區段。單個區段可以接受佈景主題區塊或區段區塊，但不能同時接受兩者。

區段中的應用程式區塊可用性取決於應用程式的功能，以及該區段是否可以接受應用程式區塊。

區段的區塊

「區段區塊」是為特定區段而設的區塊。區段可以限制區段區塊的類型，並限制您可以新增的特定類型區塊數量。

包含區段區塊的區段示例

例如，您的佈景主題具有「電子郵件註冊」區段。您可以使用此區段新增訂閱電子報表單，以便顧客可以訂閱您的電子報。新增「電子郵件註冊」區段後，您可以新增以下每個區塊之一：

「電子郵件表單」區塊
標題區塊
子標題區塊

如果您新增「電子郵件表單」區塊並按一下「+ 新增區塊」以新增其他區塊，則區塊選擇器將不再顯示「電子郵件表單」區塊作為項選項。此限制有助於防止擷取顧客電子郵件時出現任何問題，並確保顧客能夠輕鬆輸入其電子郵件地址。

如果您為「電子郵件註冊」區段新增了所有這三個可用區塊，則區塊選擇器會顯示一條訊息，說明您已使用所有可用區塊。

佈景主題區塊

「佈景主題區塊」是在您佈景主題中定義的區塊，並且可能具有動態功能，例如巢狀功能。接受佈景主題區塊的區段可以接受多種不同區塊，具體取決於該區段的結構。接受佈景主題區塊的區段可能會接受所有可用的佈景主題區塊、特定區塊的子集或該區段獨有的區塊。佈景主題區塊也可能有下列行為：

某些區塊支援巢狀，因此您可以在其他區塊嵌入最多 8 個級別的區塊。
某些區段具有所需的區塊。您可以自訂或隱藏這些區塊，但無法重新排序或刪除它們。
滿足某些條件時，一些區塊會自動顯示在區段中。

包含佈景主題區塊的區段示例

例如，您的佈景主題具有帶佈景主題區塊的「素材輪播」區段。

在您佈景主題的素材輪播區段中，按一下「+ 新增區塊」時，您可以在區塊選擇器中選取「投影片」區塊。沒有可用的其他區塊類型。如果您嘗試將「投影片」區塊新增到您佈景主題中的其他區段（例如「圖片橫幅」區段）中，則「投影片」不可用。這是受限區塊的示例。

將「投影片」區塊新增到「素材輪播」區段後，您可以按一下「+ 新增區塊」，即可在「素材輪播」區段，新增其他區塊至任何「投影片」區塊，例如「標題」、「圖片」、「按鈕」。這些區塊會以巢狀方式嵌入「投影片」。這是巢狀區塊的示例。

如果您新增第二個「投影片」區塊至「素材輪播」區段，則佈景主題會自動新增「素材輪播控制」區塊。此區塊會顯示按鈕，讓造訪您網站的訪客僅需按一下即可從一張投影片導覽到另一張投影片。您可以自訂按鈕的樣式或隱藏控制，但無法移除或刪除區塊。這是有條件顯示的必要區塊的示例。

佈景主題區塊相容性

若要存取佈景主題區塊，您的佈景主題必須具有支援佈景主題區塊的區段。您可以在佈景主題程式碼檢查您的佈景主題是否支援佈景主題區塊。如果 Liquid 編輯器的側邊欄中有一個區塊目錄，則您正在使用支援佈景主題區塊的佈景主題。您也可以查看您的佈景主題說明文件。

步驟：

在 Shopify 管理介面中，前往「線上商店」>「佈景主題」。
在您要檢查的佈景主題旁邊，按一下「…」按鈕，然後按一下「編輯程式碼」。
在側邊欄中，搜尋區塊資料夾。

使用區段和區塊自訂佈景主題範本

開啟佈景主題編輯器時，系統預設會載入商店的首頁。您可以使用下拉式選單來選取其他範本，例如商品、商品系列、頁面或網誌，或使用範本下拉式選單中的搜尋列來搜尋特定範本。選取範本後，系統將載入佈景主題編輯器，您可以在編輯器中預覽您做的任何變更。

新增區段

新增區段至網路商店的任何頁面。

步驟：

電腦版

在 Shopify 管理介面中，前往「線上商店」>「佈景主題」。
尋找要編輯的佈景主題，然後點擊「自訂」。
自訂首頁，或點按「首頁」下拉式選單，然後選取您要新增區段的範本。
在側邊欄中按一下「+ 新增區段」，然後執行下列其中一個步驟：
- 從清單中選取一個區段。
- 使用「搜尋區段」欄位來尋找特定區段，然後選取該區段。
執行下列步驟來自訂新區段：
- 編輯新區段的設定和內容。
- 編輯隨區段載入的預設區塊設定和內容。
- 按一下「+ 新增區塊」以新增區塊。
選用：若要重新排列頁面上各區段的順序，請將滑鼠游標移至區段名稱上方，然後點按並拖曳「⋮⋮」圖示。
點擊「儲存」。

iPhone

在 Shopify 應用程式中，點選「…」按鈕。
在銷售管道畫面上，點一下「線上商店」。
點選「管理所有佈景主題」。
尋找要編輯的佈景主題，然後點選「自訂」。
自訂首頁，或點選「首頁」下拉式選單，然後選取您要新增區段的範本。
依序點選「區段」和「新增區塊」，然後執行下列其中一個步驟：
- 從清單中選取一個區段，然後點選「新增」。
- 點選放大鏡圖示以搜尋特定區段，選取區段後點選「新增」。
執行下列步驟來自訂新區段：
- 編輯新區段的設定和內容。
- 編輯隨區段載入的預設區塊設定和內容。
- 點選「新增區塊」以加入新區塊。
選用：若要重新排列頁面上的區段順序，請點選並拖曳區段。
點選「儲存」。

Android

在 Shopify 應用程式中，點選「☰」按鈕。
在銷售管道畫面上，點一下「線上商店」。
點選「管理所有佈景主題」。
尋找要編輯的佈景主題，然後點選「自訂」。
自訂首頁，或點選「首頁」下拉式選單，然後選取您要新增區段的範本。
依序點選「區段」和「新增區塊」，然後執行下列其中一個步驟：
- 從清單中選取一個區段，然後點選「新增」。
- 點選放大鏡圖示以搜尋特定區段，選取區段後點選「新增」。
執行下列步驟來自訂新區段：
- 編輯新區段的設定和內容。
- 編輯隨區段載入的預設區塊設定和內容。
- 點選「新增區塊」以加入新區塊。
選用：若要重新排列頁面上的區段順序，請點選並拖曳區段。
點選「✓」。

編輯區段

電腦版

在 Shopify 管理介面中，前往「線上商店」>「佈景主題」。
尋找要編輯的佈景主題，然後點擊「自訂」。
編輯首頁上的區段，或點按「首頁」下拉式選單，然後選取包含欲編輯區段的範本。
點按側邊欄中的區段名稱，即可將內容載入預覽視窗，並取得可供您編輯的設定和選項。
選用：點按個別區塊以編輯區段內的區塊。
點擊「儲存」。

iPhone

在 Shopify 應用程式中，點選「…」按鈕。
在銷售管道畫面上，點一下「線上商店」。
點選「管理所有佈景主題」。
尋找要編輯的佈景主題，然後點選「自訂」。
編輯首頁上的區段，或點選「首頁」下拉式選單，然後選取包含欲編輯區段的範本。
點選「區段」，然後點選區段名稱將內容載入預覽視窗，取得可供您編輯的設定和選項。
選用：點選個別區塊以編輯區段內的區塊。
點選「儲存」。

Android

在 Shopify 應用程式中，點選「☰」按鈕。
在銷售管道畫面上，點一下「線上商店」。
點選「管理所有佈景主題」。
尋找要編輯的佈景主題，然後點選「自訂」。
編輯首頁上的區段，或點選「首頁」下拉式選單，然後選取包含欲編輯區段的範本。
點選「區段」，然後點選區段名稱將內容載入預覽視窗，取得可供您編輯的設定和選項。
選用：點選個別區塊以編輯區段內的區塊。
點選「✓」。

複製區段或區塊

電腦版

在 Shopify 管理介面中，前往「線上商店」>「佈景主題」。
尋找要編輯的佈景主題，然後點擊「自訂」。
複製首頁上的區段或區塊，或點按「首頁」下拉式選單，然後選取包含欲複製區段或區塊的範本。
點按要複製的區段或區塊。
在側邊欄中，點按「…」>「複製」。
點擊「儲存」。

iPhone

在 Shopify 應用程式中，點選「…」按鈕。
在銷售管道畫面上，點一下「線上商店」。
點選「管理所有佈景主題」。
尋找要編輯的佈景主題，然後點選「自訂」。
複製首頁上的區段或區塊，或點選「首頁」下拉式選單，然後選取包含欲複製區段或區塊的範本。
點選「區段」，然後點選要複製的區段或區塊。
點選「...」>「複製」。
點選「儲存」。

Android

在 Shopify 應用程式中，點選「☰」按鈕。
在銷售管道畫面上，點一下「線上商店」。
點選「管理所有佈景主題」。
尋找要編輯的佈景主題，然後點選「自訂」。
複製首頁上的區段或區塊，或點選「首頁」下拉式選單，然後選取包含欲複製區段或區塊的範本。
點選「區段」，然後點選要複製的區段或區塊。
點選「...」>「複製」。
點選「✓」。

隱藏或刪除區段或區塊

電腦版

在 Shopify 管理介面中，前往「線上商店」>「佈景主題」。
尋找要編輯的佈景主題，然後點擊「自訂」。
隱藏或刪除首頁上的區段或區塊，或點按「首頁」下拉式選單，然後選取包含欲隱藏或刪除區段或區塊的範本。
選用：若要從網路商店隱藏區段或區塊，請將滑鼠游標移至區段或區塊名稱上方，然後點按眼睛圖示。
選用：若要從網路商店刪除區段或區塊，請將滑鼠游標移至區段或區塊名稱上方，然後點按垃圾桶圖示。
點擊「儲存」。

iPhone

在 Shopify 應用程式中，點選「…」按鈕。
在銷售管道畫面上，點一下「線上商店」。
點選「管理所有佈景主題」。
尋找要編輯的佈景主題，然後點選「自訂」。
隱藏或刪除首頁上的區段或區塊，或點選「首頁」下拉式選單，然後選取包含欲隱藏或刪除區段或區塊的範本。
點選「區段」，然後點選要隱藏或刪除的區段或區塊。
選用：若要隱藏網路商店的區段或區塊，請點選「…」>「隱藏」。
選用：若要刪除網路商店的區段或區塊，請點選「…」>「移除」。
點選「儲存」。

Android

在 Shopify 應用程式中，點選「☰」按鈕。
在銷售管道畫面上，點一下「線上商店」。
點選「管理所有佈景主題」。
尋找要編輯的佈景主題，然後點選「自訂」。
隱藏或刪除首頁上的區段或區塊，或點選「首頁」下拉式選單，然後選取包含欲隱藏或刪除區段或區塊的範本。
點選「區段」，然後點選要隱藏或刪除的區段或區塊。
選用：若要隱藏網路商店的區段或區塊，請點選「…」>「隱藏」。
選用：若要刪除網路商店的區段或區塊，請點選「…」>「移除」。
點選「✓」。

使用區塊

區塊是可自訂的模組，用於在範本的區段中新增內容。您可以使用區塊來新增文字、圖片、連結、按鈕等內容。

Shopify 佈景主題包含可自訂的區段和區塊。部分區段具有固定區塊類型，這表示您僅能選擇佈景主題設計師為該區段製作的區塊。

其他區段允許您選取任何區塊，但可新增至區段的區塊總數有一定限制。如果您的區段達到可用區塊數量上限，則「新增區塊」選項會顯示為灰色，讓您無法點按或點選。

新增區塊

電腦版

在 Shopify 管理介面中，前往「線上商店」>「佈景主題」。
尋找要編輯的佈景主題，然後點擊「自訂」。
您可以在首頁的區段新增區塊，或點按「首頁」下拉式選單，然後選取您要新增區塊的範本。
找出要新增區塊的區段並點按「新增區塊」，然後執行下列其中一個步驟：
- 從清單中選取一個區塊。
- 使用「搜尋區塊」欄位來尋找特定區塊，然後選取該區塊。
點擊「儲存」。

iPhone

在 Shopify 應用程式中，點選「…」按鈕。
在銷售管道畫面上，點一下「線上商店」。
點選「管理所有佈景主題」。
尋找要編輯的佈景主題，然後點選「自訂」。
您可以在首頁的區段新增區塊，或點選「首頁」下拉式選單，然後選取您要新增區塊的範本。
點選「區段」，然後在要新增區塊的區段中點選「新增區塊」，接著執行下列其中一個步驟：
- 從清單中選取一個區塊。
- 點選放大鏡圖示以搜尋特定區塊，然後選取該區塊。
點選「儲存」。

Android

在 Shopify 應用程式中，點選「☰」按鈕。
在銷售管道畫面上，點一下「線上商店」。
點選「管理所有佈景主題」。
尋找要編輯的佈景主題，然後點選「自訂」。
您可以在首頁的區段新增區塊，或點選「首頁」下拉式選單，然後選取您要新增區塊的範本。
點選「區段」，然後在要新增區塊的區段中點選「新增區塊」，接著執行下列其中一個步驟：
- 從清單中選取一個區塊。
- 點選放大鏡圖示以搜尋特定區塊，然後選取該區塊。
點選「✓」。

將中繼欄位及 metaobject 與動態來源搭配使用

您可以使用中繼欄位和 metaobject 顯示網路商店的動態資訊。如果您的佈景主題支援中繼欄位，則可以使用佈景主題編輯器將中繼欄位連結至相容的區段或區塊設定。

例如，如果您銷售蠟燭，那麼您可能希望顯示商店所售每種蠟燭的燃燒時間。在 Shopify 管理介面設定的「自訂資料」區段中設定商品中繼欄位「燃燒時間」後，您可以將文字區塊新增到商品範本的主區段。在文字區塊中，您可以按一下文字設定上的「連接動態來源」圖示並選取「燃燒時間」中繼欄位。現在，商品將顯示燃燒時間資訊。

若您有 Shopify 佈景主題，則可以使用佈景主題編輯器，將大多數中繼欄位和 metaobject 連結至佈景主題。若您使用其他佈景主題，或想新增佈景主題不支援的自訂資料類型，則可編輯佈景主題程式碼，或聘僱 Shopify 合作夥伴來協助您。深入瞭解如何聘僱 Shopify 合作夥伴。

但是，並非所有區段或區塊都支援動態來源。請參閱佈景主題說明文件以取得更多資訊。

只要新增可使用動態來源的區段或區塊，便能在網路商店中顯示動態資訊。動態來源可用於顯示相容資源 (商品、商品系列、頁面、網誌和網誌文章) 的任何範本、區段或區塊。您必須先新增中繼欄位，才能在範本中連結中繼欄位。請參閱動態來源，以深入瞭解如何在佈景主題中透過動態來源使用中繼欄位和 metaobject。

完成設定流程後，請依照下列步驟使用「連結動態來源」按鈕，將動態來源連結至佈景主題中的區段或區塊：

步驟：

電腦版

在 Shopify 管理介面中，前往「線上商店」>「佈景主題」。
尋找要編輯的佈景主題，然後點擊「自訂」。
編輯首頁上的區段或區塊，或點按「首頁」下拉式選單，然後選取包含欲編輯區段或區塊的範本。
點按側邊欄中的區段或區塊名稱，即可將內容載入預覽視窗，並取得可供您編輯的設定和選項。
在您要編輯的相關內容類型中點按「連結動態來源」按鈕，然後連結您的動態來源。
點擊「儲存」。

iPhone

在 Shopify 應用程式中，點選「…」按鈕。
在銷售管道畫面上，點一下「線上商店」。
點選「管理所有佈景主題」。
尋找要編輯的佈景主題，然後點選「自訂」。
編輯首頁上的區段或區塊，或點選「首頁」下拉式選單，然後選取包含欲編輯區段或區塊的範本。
點選「區段」，然後點選區段或區塊名稱將內容載入預覽視窗，取得可供您編輯的設定和選項。
在您要編輯的相關內容類型中點選「連結動態來源」按鈕，然後連結您的動態來源。
點選「儲存」。

Android

在 Shopify 應用程式中，點選「☰」按鈕。
在銷售管道畫面上，點一下「線上商店」。
點選「管理所有佈景主題」。
尋找要編輯的佈景主題，然後點選「自訂」。
編輯首頁上的區段或區塊，或點選「首頁」下拉式選單，然後選取包含欲編輯區段或區塊的範本。
點選「區段」，然後點選區段或區塊名稱將內容載入預覽視窗，取得可供您編輯的設定和選項。
在您要編輯的相關內容類型中點選「連結動態來源」按鈕，然後連結您的動態來源。
點選「✓」。

深入瞭解如何在網路商店顯示中繼欄位以及在網路商店顯示 metaobject。

動態來源選擇器

您可以使用動態來源選擇器，直接在佈景主題編輯器中連結正確的動態來源。檢視下列動態來源選擇器的主要功能：

在適用情況下，您可以從各種資源參考動態來源。例如，若您要連結設定的區塊同時也連結了商品資源和頁面資源，則可以使用動態來源選擇器的下拉式選單，指定是否要搜尋與商品或頁面資源關聯的中繼欄位。
動態來源選擇器具有搜尋和篩選功能，可協助您找到所需的中繼欄位。
動態來源選擇器可讓您選擇類別中繼欄位。這些中繼欄位是您將商品類別指派給商品後可用的額外屬性。您可以存取這些中繼欄位，將動態來源連結至基礎屬性 metaobject 上的任何相關欄位。