區段和區塊

為 Online Store 2.0 打造的佈景主題使用區段來建立理想的版面配置。大部分區段是由提供特定功能的區塊所組成,例如頁首、文字、單張圖片、圖片拼貼或連結。在範本中使用區段和區塊,在排列商店內容方面提供更大的彈性,因此您無須編輯程式碼即可控制網路商店的外觀和風格。

每個區段都有多種特定的區塊供您新增。可用的區段和區塊依您的佈景主題而定。如需更多有關可用選項的資訊,請參閱佈景主題說明文件。

部分區段會限制可新增的區塊數量,或限制特定類型的區塊數量。例如,「附文字圖像」區段僅能顯示佈景主題設計師為佈景主題指定的區塊。在 Dawn (免費的 Shopify 佈景主題) 中,您僅能新增各一個下列區塊:

  • 標題
  • 段落
  • 按鈕

若要進一步自訂區段,您可以編輯其設定以包含圖片,並選擇對齊方式、尺寸、背景顏色,以及顧客造訪您的網路商店時會先載入的內容。

如果您新增至商店版面配置的區段不包含所需的設定或選項,則可以編輯佈景主題程式碼,或聯絡佈景主題開發人員以尋求支援

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

開啟佈景主題編輯器時,系統預設會載入商店的首頁。您可以使用下拉式選單選取其他範本,或使用範本下拉式選單中的搜尋欄來搜尋特定頁面類型。選取一個範本便會載入至佈景主題編輯器中,您可以在編輯器中同步預覽您所做的任何變更。

新增區段

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

步驟:

  1. 從下拉式選單中選取一個範本。4. 點擊「+ 新增區段」,然後從清單中選取新區段。5. 點擊新區段以編輯區段內的區塊。6. 選用:點擊並拖曳區段旁邊的「⋮⋮」圖示,以重新排列頁面上的區段。7. 點擊「儲存」

編輯區段

  1. 從下拉式選單中選取包含欲編輯區段的範本。4.點擊區段以將內容載入預覽視窗,並存取可用的選項。5. 選用:點擊個別區塊以編輯區段內的區塊。6. 點擊「儲存」。

移除區段或區塊

  1. 從下拉式選單中選取包含欲編輯區段的範本。4. 點擊區段以將內容載入預覽視窗,並存取可用的選項。5. 選用:點擊眼睛圖示以隱藏或取消隱藏一個區段或區塊。6. 點擊「移除」以刪除一個區段或區塊。

部分區段有固定的區塊類型和數量限制。如果特定區段或區塊有數量限制,則介面會告訴您已使用可用的 X 個區塊中的 X 個。如果您已達到區塊數量上限,則在刪除現有區塊之前,將無法新增其他區塊。

使用區塊

區塊是可自訂的模組,構成頁面範本中的區段。您可以使用區塊來新增文字、圖片、連結、按鈕等等。

Online Store 2.0 佈景主題包含可自訂的區段和區塊。部分區段有固定的區塊類型,這表示您僅能從佈景主題設計師提供給該區段的區塊中選擇。其他區段則允許您選取任何區塊,但限制可新增至此區段的區塊總數。如果您的區段已達到可用區塊數量上限,則會顯示一則已達上限的訊息,且「+ 新增區塊」選項會以灰色顯示,直到您移除現有區塊。

新增區塊

  1. 從下拉式選單中選取包含欲編輯區段的範本。4. 點擊區段以將內容載入預覽視窗,並存取可用的選項。5. 點擊「+ 新增區塊」,然後設定可用的選項。6. 點擊「儲存」。

使用中繼欄位和動態來源

中繼欄位可讓您在網路商店中顯示動態資訊。如果您的佈景主題支援中繼欄位,則可以在佈景主題編輯器將中繼欄位連結至區段或區塊。

例如,蠟燭賣家可能想要顯示每種可供貨蠟燭類型的燃燒時間。在設定燃燒時間的中繼欄位後,賣家可以在其產品範本中為燃燒時間新增一個區塊,然後再將其連結至該中繼欄位。

透過新增可使用動態來源的區段或區塊,便能在網路商店中顯示動態資訊。動態來源可用於產品範本中的任何區段或區塊。在非產品範本中,動態來源可用於顯示產品的區段或區塊。您必須先新增中繼欄位,才能在範本中將其連結。請參閱動態來源,以取得更多有關在佈景主題中使用中繼欄位和動態來源的資訊。

完成設定流程後,請按照下列步驟將動態來源插入至範本:

  1. 從下拉式選單中選取包含欲編輯區段的範本。4. 點擊現有區段以將內容載入預覽視窗,並存取可用的選項,或點擊「+ 新增區段」。5. 點擊「+ 新增區塊」,然後連結動態來源:* 若出現連結動態來源圖示,請點擊選取單一中繼欄位:
    連結動態來源
    * 若連結動態來源圖示顯示「+」,則點擊以選取最多 20 個中繼欄位 (一一將其新增):
    插入動態來源圖示
    6. 點擊「儲存」。

準備好開始透過 Shopify 銷售商品了嗎?

免費試用