區段與區塊

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

區段與區塊讓您能彈性安排內容，不用編輯程式碼即可掌控網路商店的風格與氛圍，並提供以下自訂選項：

• 您可以在範本中重新排列區段，也可以在區段內重新排列區塊。
• 區段與區塊可具有特定的自訂設定。
• 您可以連結相容的區段與區塊，將自訂資料中的動態資訊顯示在網路商店中，例如新增產品的保養說明。瞭解詳情：連結動態來源。

在佈景主題編輯器中可用的區段與區塊取決於您的佈景主題及其版本。例如，您的佈景主題可能有只能新增到素材輪播區段的投影片區塊，以及可新增到所有區段的標題文字區塊。想瞭解可用的選項，請參閱佈景主題的文件。

區段與區塊的上限

區段與區塊的最大限制如下：

• 每個範本最多可包含 25 個區段。
• 每個範本在所有區段中最多可包含 1,250 個區塊。可新增的區塊總數，以及在每個區段中可新增的各類型區塊數量，取決於區段與區塊的來源，並由您的佈景主題設計師指定。舉例來說，若您的佈景主題有訂閱電子報區段，您可能只能新增一個電子郵件表單區塊。
• 支援巢狀的區塊最多可巢狀到 8 層。

區塊來源

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

• App blocks 是為佈景主題新增功能的區塊。您可以使用 app 區塊，將已安裝的 app 在佈景主題中加入的區域重新定位到佈景主題頁面的指定位置。
• Section blocks 是在特定區段內定義的區塊。
• Theme blocks 是在您的佈景主題中定義的區塊，且可具備動態功能，例如巢狀結構。

您的佈景主題可能包含部分使用section blocks的區段，以及使用theme blocks的其他區段。單一區段可以接受 theme blocks 或 section blocks，但不能混用。

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

區段區塊

區段區塊是為特定區段設計的區塊。每個區段可以限制可用的區段區塊類型，並限制某類型區塊可新增的數量。

具有區段區塊的區段範例

例如，您的佈景主題有一個訂閱電子報區段。您可以使用此區段新增電子報訂閱表單，讓顧客訂閱您的電子報。新增訂閱電子報區段後，您可以新增下列各一個區塊：

• 一個電子郵件表單區塊
• 一個標題區塊
• 一個副標題區塊

如果您已新增電子郵件表單區塊，並點擊 新增區塊來新增另一個區塊，則電子郵件表單區塊不會再顯示於區塊選擇器中。此限制可避免收集顧客電子郵件時出現問題，並確保顧客能輕鬆輸入電子郵件地址。

如果您已新增訂閱電子報區段的三種可用區塊全部都用上，區塊選擇器會顯示一則訊息，表示所有可用區塊均已使用。

佈景主題區塊

佈景主題區塊是在佈景主題內定義的區塊，並可具備動態功能，例如巢狀結構。可接受佈景主題區塊的區段，能依其結構接受多種不同的區塊。接受佈景主題區塊的區段，可能允許所有可用的佈景主題區塊、僅允許特定子集、或只允許專屬於該區段的區塊。佈景主題區塊也可能有以下行為：

• 有些區塊支援巢狀，因此您可以將區塊巢狀在其他區塊中，最多到 8 層。
• 有些區段含有必要區塊。您可以自訂或隱藏這些區塊，但不能重新排列或刪除。
• 有些區塊在符合特定條件時，會自動顯示於區段中。

具有佈景主題區塊的區段範例

例如，您的佈景主題有一個含佈景主題區塊的素材輪播區段。

在佈景主題的素材輪播區段中，當您點擊 新增區塊時，可以在區塊選擇器中選取投影片區塊，不會有其他區塊類型可用。如果您嘗試在佈景主題的其他區段 (例如圖片橫幅區段) 新增投影片區塊，則投影片不會出現。這就是受限區塊的範例。

在 素材輪播 區段新增 投影片 區塊後，您可以點選 新增區塊，為 素材輪播 區段中的任何 投影片 區塊新增其他區塊，例如 標題、圖片、按鈕。這些區塊會巢狀於 投影片 區塊中。這是巢狀區塊的範例。

如果您在 素材輪播 區段新增第二個 投影片 區塊，佈景主題會自動加入 素材輪播控制項 區塊。此區塊會顯示按鈕，讓造訪您網站的訪客可點選按鈕，在各投影片之間導覽。您可以自訂按鈕樣式或隱藏控制項，但無法移除或刪除該區塊。這是有條件顯示的必要區塊範例。

佈景主題區塊相容性

若要使用佈景主題區塊，您的佈景主題必須包含支援佈景主題區塊的區段。您可以在佈景主題程式碼中檢查是否支援佈景主題區塊。如果 Liquid 編輯器的側邊欄中有 blocks 目錄，表示您使用的佈景主題支援佈景主題區塊。您也可以查閱佈景主題的說明文件。

步驟：

1. 在您的 Shopify 管理介面中，前往 網路商店 > Themes。

2. 在您要檢查的佈景主題旁，點選 按鈕，然後點選 編輯程式碼。

3. 在側邊欄中搜尋 blocks 資料夾。

   

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

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

新增區段

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

步驟：

編輯區段

重新排列區段或區塊

您可以變更頁面範本上的區段順序，並重新排列這些區段中的區塊。此外，您可以在不同區段之間移動相容的區塊。舉例來說，若您的首頁有兩個 素材輪播 區段，您可以將一個 投影片 區塊從其中一個輪播拖曳到另一個。

如果區塊類型不相容，或該區段已達區塊的最大數量限制，您就無法將區塊移到其他區段。如果您嘗試將區段或區塊移到無效位置，系統會將其還原到原始位置。

您也可以使用預覽檢視器重新排列區段。瞭解詳情preview inspector in the theme editor 的使用方式。

步驟：

建立區段或區塊的副本

您可以為區段或區塊建立副本，製作與其完全相同的副本。

建立區塊副本後，新區塊會新增到同一個區段。若要將該區塊移至新區段或變更區塊順序，您可以 rearrange the block。您也可以改為 copy a block, and then paste it directly into a different section instead。

複製與貼上區塊

若要在多個區段中使用相同的區塊，您可以輕鬆複製，並貼到其他區段。您也可以在同一區段內複製並貼上區塊，或改為 duplicate the block。建立的副本會保留原始區塊的所有設定與內容。

步驟：

1. 在您的 Shopify 管理介面中，前往 網路商店 > Themes。

2. 在要編輯的佈景主題旁，按一下 編輯佈景主題。

3. 若要在首頁複製並貼上區塊，您可以直接選取，或使用 首頁 下拉式選單，選取包含要編輯之區段或區塊的特定範本。

4. 以滑鼠右鍵按一下要建立副本的區塊，然後按一下 複製。

5. 在同一區段或其他區段內，以滑鼠右鍵按一下該區段，然後按一下 貼上。

6. 點選 儲存。

隱藏或刪除區段或區塊

重新命名區段或區塊

預設情況下，佈景主題編輯器的側邊欄選單與設定詳情中，區段或區塊的標題會設為其類型，例如「商品系列」或「文字」。

針對區塊，若區塊設定包含文字欄位 (例如標題或說明)，則該文字也會附加在側邊欄選單的標題後方。若有多個文字欄位，會附加第一個有內容的文字欄位。當您變更該文字欄位中的文字時，區塊標題會隨之更新為包含新文字。區段或區塊名稱不得為空白。

例如，您在頁面範本中加入一個 Multicolumn 區段，內含 Column 區塊。此 Column 區塊包含 Heading 設定，預設文字為 Column，以及 Description 設定，預設文字為 Pair text with an image to focus on your chosen product, collection, or blog post.。預設的區段標題為 Multicolumn。預設的 Column 區塊標題為 Column - Column。如果您將 Heading 欄位中的文字移除，則區塊標題會更新為 Column - Pair text with an imag...

您可以在佈景主題編輯器的側邊欄選單中，透過區段或區塊的設定，將任何區段或區塊重新命名為自訂名稱。

步驟：

使用區塊

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

Shopify 佈景主題包含可自訂的區段與區塊。部分區段的區塊類型是固定的，代表您只能從佈景主題設計師為該區段提供的區塊中選用。

其他區段允許您選取任何區塊，但可新增的區塊總數有限。若該區段已達可用區塊的上限，則 新增區塊 選項會呈現灰色，您將無法按一下或點選。

您可以使用搜尋功能依名稱尋找特定區塊，或從區塊選擇器的下拉式選單選取區塊。您的佈景主題中的區塊可能會在區塊選擇器中依類別分類，例如具有商品系列選擇器的區塊歸為商品系列，圖片與影片區塊歸為媒體。

區塊預覽會顯示在區塊選擇器中，讓您在新增前先檢視呈現。

新增區塊

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

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

例如，若您販售蠟燭，可能會希望在商店中顯示每款蠟燭的燃燒時間。在 Shopify 管理介面設定的自訂資料區段中建立商品中繼欄位 燃燒時間 之後，您可以在商品範本的主要區段新增文字區塊。在文字區塊中，您可以在文字設定上按一下 按鈕，然後選取燃燒時間中繼欄位。此後，商品上就會顯示燃燒時間資訊。

如果您使用 Shopify 佈景主題，則可透過佈景主題編輯器將大多數中繼欄位與 metaobject 連結到您的佈景主題。若您使用其他佈景主題，或想新增佈景主題不支援的自訂資料類型，您可以edit your theme code，或聘僱 Shopify 合作夥伴協助您。 瞭解hiring a Shopify Partner的詳情。

並非所有區段或區塊都支援動態來源。請檢查您的佈景主題架構版本，以及在佈景主題編輯器中可用的自訂選項，以判斷佈景主題是否支援動態來源。

您可以透過新增可使用動態來源的區段或區塊，在網路商店顯示動態資訊。動態來源可用於任何會顯示相容資源的範本、區段或區塊 (商品、商品系列、頁面、網誌和網誌文章)。在範本中連結前，您需要先add your metafield。關於在佈景主題中使用中繼欄位與 metaobject 搭配動態來源的更多資訊，請參閱Dynamic sources。

完成設定程序後，請依下列步驟，使用 按鈕，將動態來源連結到佈景主題中的區段或區塊。

步驟：

瞭解displaying metafields on your online store與displaying metaobjects on your online store的詳情。

動態來源選擇器

您可以在佈景主題編輯器中使用動態來源選擇器，直接連結對應的動態來源。請參閱下列動態來源選擇器的重點功能：

• 在適用的情況下，您可以引用各種資源的動態來源。例如，若您將某個設定連結到同時連接商品資源與頁面資源的區塊，您即可使用動態來源選擇器中的下拉式選單，指定要搜尋與商品或頁面資源相關的中繼欄位。
• 動態來源選擇器具備搜尋與篩選功能，協助您找到需要的中繼欄位。
• 動態來源選擇器可讓您選擇 category metafields。當您將 product category 指派給商品時，會提供這些額外的屬性。存取這些中繼欄位可讓您將動態來源連結到底層屬性 metaobject 的任何相關欄位。