區段和區塊
佈景主題使用區段來建立理想的版面配置。大部分區段是由提供特定功能的區塊所組成,例如頁首、文字、單張圖片、圖片拼貼或連結。在範本中使用區段和區塊,讓您可以更靈活地排列商店內容,且無須編輯程式碼即可控制網路商店的外觀和風格。每個範本最多可有 25 個區段。
每個區段都有多種特定的區塊供您新增。可用的區段和區塊依您的佈景主題而定。每個區段最多可新增 50 個區塊。如需更多有關可用選項的資訊,請參閱佈景主題說明文件。
部分區段會限制可新增的區塊數量,或限制特定類型的區塊數量。例如,「附文字圖像」區段僅能顯示佈景主題設計師為佈景主題指定的區塊。在 Dawn (免費的 Shopify 佈景主題) 中,您僅能新增各一個下列區塊:
- 標題
- 段落
- 按鈕
若要進一步自訂區段,您可以編輯其設定以包含圖片,並選擇對齊方式、尺寸、背景顏色,以及顧客造訪您的網路商店時會先載入的內容。
如果您新增至商店版面配置的區段不包含所需的設定或選項,則可以編輯佈景主題程式碼,或聯絡佈景主題開發人員以尋求支援。
使用區段和區塊自訂佈景主題範本
開啟佈景主題編輯器時,系統預設會載入商店的首頁。您可以使用下拉式選單選取其他範本,或使用範本下拉式選單中的搜尋欄來搜尋特定頁面類型。選取一個範本便會載入至佈景主題編輯器中,您可以在編輯器中同步預覽您所做的任何變更。
新增區段
新增區段至網路商店的任何頁面。
步驟:
- 在 Shopify 管理介面 中,前往「線上商店」>「佈景主題」。
- 尋找要編輯的佈景主題,然後點擊「自訂」。
- 從下拉式選單中選取一個範本。
- 點擊「+ 新增區段」,然後從清單中選取新的區段,或使用「搜尋」列來搜尋特定字詞。
- 點擊新區段以編輯區段內的區塊。
- 選用:點擊並拖曳區段旁邊的「
⋮⋮
」圖示,以重新排列頁面上的區段。 - 點擊「儲存」。
- 在 Shopify 應用程式中,點選「…」按鈕。
- 在銷售管道畫面上,點一下「線上商店」。
- 點選「管理所有佈景主題」。
- 尋找要編輯的佈景主題,然後點選「自訂」。
- 點一下「編輯」。
- 從下拉式選單中選取一個範本。
- 點擊「+ 新增區段」,然後從清單中選取新的區段,或使用「搜尋」列來搜尋特定字詞。
- 點擊新區段以編輯區段內的區塊。
- 選用:點擊並拖曳區段旁邊的「
⋮⋮
」圖示,以重新排列頁面上的區段。 - 點擊「儲存」。
- 在 Shopify 應用程式中,點選「…」按鈕。
- 在銷售管道畫面上,點一下「線上商店」。
- 點選「管理所有佈景主題」。
- 尋找要編輯的佈景主題,然後點選「自訂」。
- 點一下「編輯」。
- 從下拉式選單中選取一個範本。
- 點擊「+ 新增區段」,然後從清單中選取新的區段,或使用「搜尋」列來搜尋特定字詞。
- 點擊新區段以編輯區段內的區塊。
- 選用:點擊並拖曳區段旁邊的「
⋮⋮
」圖示,以重新排列頁面上的區段。 - 點擊「儲存」。
編輯區段
- 在 Shopify 管理介面 中,前往「線上商店」>「佈景主題」。
- 尋找要編輯的佈景主題,然後點擊「自訂」。
- 從下拉式選單中選取含有希望編輯區段的範本。
- 點擊區段,將內容載入預覽視窗,並取得可用的選項。
- 選用:點擊個別區塊以編輯區段內的區塊。
- 點擊「儲存」。
- 在 Shopify 應用程式中,點選「…」按鈕。
- 在銷售管道畫面上,點一下「線上商店」。
- 點選「管理所有佈景主題」。
- 尋找要編輯的佈景主題,然後點選「自訂」。
- 點一下「編輯」。
- 從下拉式選單中選取含有希望編輯區段的範本。
- 點擊區段,將內容載入預覽視窗,並取得可用的選項。
- 選用:點擊個別區塊以編輯區段內的區塊。
- 點擊「儲存」。
- 在 Shopify 應用程式中,點選「…」按鈕。
- 在銷售管道畫面上,點一下「線上商店」。
- 點選「管理所有佈景主題」。
- 尋找要編輯的佈景主題,然後點選「自訂」。
- 點一下「編輯」。
- 從下拉式選單中選取含有希望編輯區段的範本。
- 點擊區段,將內容載入預覽視窗,並取得可用的選項。
- 選用:點擊個別區塊以編輯區段內的區塊。
- 點擊「儲存」。
複製區段或區塊
- 在 Shopify 管理介面 中,前往「線上商店」>「佈景主題」。
- 尋找要編輯的佈景主題,然後點擊「自訂」。
- 從下拉式選單中選取您要複製區段或區塊的範本。
- 點擊您要複製的區段或區塊。
- 在側邊欄的區段名稱旁點擊「
...
」按鈕,然後按一下「複製」。 - 點擊「儲存」。
- 在 Shopify 應用程式中,點選「…」按鈕。
- 在銷售管道畫面上,點一下「線上商店」。
- 點選「管理所有佈景主題」。
- 尋找要編輯的佈景主題,然後點選「自訂」。
- 點一下「編輯」。
- 從下拉式選單中選取您要複製區段或區塊的範本。
- 點擊您要複製的區段或區塊。
- 在側邊欄的區段名稱旁點擊「
...
」按鈕,然後按一下「複製」。 - 點擊「儲存」。
- 在 Shopify 應用程式中,點選「…」按鈕。
- 在銷售管道畫面上,點一下「線上商店」。
- 點選「管理所有佈景主題」。
- 尋找要編輯的佈景主題,然後點選「自訂」。
- 點一下「編輯」。
- 從下拉式選單中選取您要複製區段或區塊的範本。
- 點擊您要複製的區段或區塊。
- 在側邊欄的區段名稱旁點擊「
...
」按鈕,然後按一下「複製」。 - 點擊「儲存」。
移除區段或區塊
- 在 Shopify 管理介面 中,前往「線上商店」>「佈景主題」。
- 尋找要編輯的佈景主題,然後點擊「自訂」。
- 從下拉式選單中選取含有希望編輯區段的範本。
- 點擊區段,將內容載入預覽視窗,並取得可用的選項。
- 點擊眼睛圖示以隱藏或取消隱藏區段或區塊。
- 點擊「移除」以刪除區塊或區段。
- 在 Shopify 應用程式中,點選「…」按鈕。
- 在銷售管道畫面上,點一下「線上商店」。
- 點選「管理所有佈景主題」。
- 尋找要編輯的佈景主題,然後點選「自訂」。
- 點一下「編輯」。
- 從下拉式選單中選取含有希望編輯區段的範本。
- 點擊區段,將內容載入預覽視窗,並取得可用的選項。
- 點擊眼睛圖示以隱藏或取消隱藏區段或區塊。
- 點擊「移除」以刪除區塊或區段。
- 在 Shopify 應用程式中,點選「…」按鈕。
- 在銷售管道畫面上,點一下「線上商店」。
- 點選「管理所有佈景主題」。
- 尋找要編輯的佈景主題,然後點選「自訂」。
- 點一下「編輯」。
- 從下拉式選單中選取含有希望編輯區段的範本。
- 點擊區段,將內容載入預覽視窗,並取得可用的選項。
- 點擊眼睛圖示以隱藏或取消隱藏區段或區塊。
- 點擊「移除」以刪除區塊或區段。
部分區段有固定的區塊類型和數量限制。如果特定區段或區塊有數量限制,則介面會告訴您已使用可用的 X 個區塊中的 X 個。如果您已達到區塊數量上限,則在刪除現有區塊之前,將無法新增其他區塊。
使用區塊
區塊是可自訂的模組,構成頁面範本中的區段。您可以使用區塊來新增文字、圖片、連結、按鈕等等。
Shopify 佈景主題包含可自訂的區段和區塊。部分區段有固定的區塊類型,這表示您僅能從佈景主題設計師提供給該區段的區塊中選擇。其他區段則允許您選取任何區塊,但限制可新增至此區段的區塊總數。如果您的區段已達到可用區塊數量上限,則會顯示一則已達上限的訊息,且「+ 新增區塊」選項會以灰色顯示,直到您移除現有區塊。
新增區塊
- 在 Shopify 管理介面 中,前往「線上商店」>「佈景主題」。
- 尋找要編輯的佈景主題,然後點擊「自訂」。
- 從下拉式選單中選取含有希望編輯區段的範本。
- 點擊區段,將內容載入預覽視窗,並取得可用的選項。
- 點擊「+ 新增區塊」並選取新區塊,或點擊「搜尋」欄以輸入搜尋字詞。
- 點擊「儲存」。
- 在 Shopify 應用程式中,點選「…」按鈕。
- 在銷售管道畫面上,點一下「線上商店」。
- 點選「管理所有佈景主題」。
- 尋找要編輯的佈景主題,然後點選「自訂」。
- 點一下「編輯」。
- 從下拉式選單中選取含有希望編輯區段的範本。
- 點擊區段,將內容載入預覽視窗,並取得可用的選項。
- 點擊「+ 新增區塊」並選取新區塊,或點擊「搜尋」欄以輸入搜尋字詞。
- 點擊「儲存」。
- 在 Shopify 應用程式中,點選「…」按鈕。
- 在銷售管道畫面上,點一下「線上商店」。
- 點選「管理所有佈景主題」。
- 尋找要編輯的佈景主題,然後點選「自訂」。
- 點一下「編輯」。
- 從下拉式選單中選取含有希望編輯區段的範本。
- 點擊區段,將內容載入預覽視窗,並取得可用的選項。
- 點擊「+ 新增區塊」並選取新區塊,或點擊「搜尋」欄以輸入搜尋字詞。
- 點擊「儲存」。
搭配使用中繼欄位及 metaobject 與動態來源
中繼欄位和 Metaobject 可讓您顯示網路商店的動態資訊。如果您的佈景主題支援中繼欄位,則可以在佈景主題編輯器中,將中繼欄位連結至區段或區塊。
例如,蠟燭賣家可能想要顯示每種可供貨蠟燭類型的燃燒時間。設定燃燒時間的產品中繼欄位後,賣家可以在其產品範本中為燃燒時間新增一個區塊,然後再將其連結至該中繼欄位。在列出燃燒時間的頁面設定商品系列中繼欄位後,賣家可以在其商品系列範本中新增一個區塊,然後將其連結至商品系列中繼欄位。
透過新增可使用動態來源的區段或區塊,便能在網路商店中顯示動態資訊。動態來源可用於顯示相容資源 (商品、商品系列、頁面、網誌和網誌文章) 的任何範本、區段或區塊。您必須先新增中繼欄位,才能在範本中連結中繼欄位。請參閱動態來源,以取得更多有關在佈景主題中透過動態來源使用中繼欄位和 metaobject 的資訊。
完成設定流程後,請按照下列步驟將動態來源連結至佈景主題中的區塊或設定:
- 在 Shopify 管理介面 中,前往「線上商店」>「佈景主題」。
- 尋找要編輯的佈景主題,然後點擊「自訂」。
- 從下拉式選單中選取含有希望編輯區段的範本。
- 點擊現有區段以將內容載入預覽視窗,並取得可用的選項,或點擊「+ 新增區段」。
- 按一下動態來源按鈕,然後連結動態來源:
- 點擊「儲存」。
- 在 Shopify 應用程式中,點選「…」按鈕。
- 在銷售管道畫面上,點一下「線上商店」。
- 點選「管理所有佈景主題」。
- 尋找要編輯的佈景主題,然後點選「自訂」。
- 點一下「編輯」。
- 從下拉式選單中選取含有希望編輯區段的範本。
- 點擊現有區段以將內容載入預覽視窗,並取得可用的選項,或點擊「+ 新增區段」。
- 按一下動態來源按鈕,然後連結動態來源:
- 點擊「儲存」。
- 在 Shopify 應用程式中,點選「…」按鈕。
- 在銷售管道畫面上,點一下「線上商店」。
- 點選「管理所有佈景主題」。
- 尋找要編輯的佈景主題,然後點選「自訂」。
- 點一下「編輯」。
- 從下拉式選單中選取含有希望編輯區段的範本。
- 點擊現有區段以將內容載入預覽視窗,並取得可用的選項,或點擊「+ 新增區段」。
- 按一下動態來源按鈕,然後連結動態來源:
- 點擊「儲存」。
動態來源選擇器
動態來源選擇器可用來直接在網路商店編輯器中輕鬆連結正確的動態來源。以下是選擇器的一些主要功能:
- 在適用情況下,您可以從各種資源參考動態來源。舉例來說,如果您要將設定連結至某一個同時連結商品資源和頁面資源的區塊,則您可以指定是否要搜尋與商品或頁面資源相關聯的中繼欄位。此下拉式選單位於動態來源選擇器的頂端。
- 搜尋和篩選:動態來源選擇器提供搜尋和篩選功能,可協助您快速找到所需的中繼欄位。
- 選擇類別中繼欄位:選擇器讓您能夠選擇類別中繼欄位。這些是指在您將商品類別指派給商品後可用的額外屬性。存取這些中繼欄位,您便可將動態來源連結至基礎屬性 metaobject 上的任何相關欄位。