如何創建您的第一個 Shopify 主題部分

為您的客戶提供創意控制是關鍵，尤其是當他們希望能夠自定義其店面時。 Shopify 的部分功能是個性化 Shopify 主題的強大工具，因此有效地使用它們並遵循最佳實踐將為您的客戶解鎖一系列選項。

如果您要從頭開始構建 Shopify 主題或為客戶調整主題，您將需要創建一些不同類型的部分，這將根據上下文而有所不同。 此外，客戶期望用戶友好和直觀的體驗，這意味著正確的部分，在正確的位置可以對轉換產生巨大影響。

在本文中，我們將介紹如何開始創建不同類型的主題部分，以及使用它們的規則，以便您可以幫助您的客戶自定義他們的商店。 我們還將探索源代碼可用的 Dawn 主題中特定部分的一些示例，以準確演示如何在現實世界場景中使用它們。

什麼是主題部分？

在高層次上，部分是商家可以自定義的 Shopify 主題的模塊化組件。 部分包含 Shopify 商店特定區域的內容和設置，例如產品頁面的基本元素或幻燈片組件。

在這些部分中，開發人員可以訪問一系列不同的設置類型，從文本輸入和圖像選擇器到自定義 HTML 和菜單，商家可以從主題編輯器中自定義這些設置類型並填充他們的內容。

部分包含在主題的/sections目錄中，並且可以靜態地包含在主題的佈局文件中（如頁眉和頁腳），或者它們可以動態地添加到主題編輯器中的任何模板。 要了解可以表示為部分的各種組件，您可以瀏覽 Dawn 主題的/sections目錄。

隨著 Online Store 2.0 的推出，部分現在可以用作組織主題所有不同方面（從整個頁面到單個元素）的主要方式。 正如我們將在本文中介紹的那樣，向任何 JSON 模板添加部分的能力將使您能夠輕鬆安排不同的頁面，當商家自定義他們的主題時，這可以進一步增強。

模板和部分

了解部分如何在 Shopify 主題上工作的先決條件之一是了解 Shopify 的主題模板系統。 使用 Online Store 2.0，每個頁麵類型都可以表示為主題/templates目錄中的一個.json文件。 開發人員可以通過定義默認情況下在這些 JSON 模板文件中顯示哪些部分來構建每個頁麵類型。

這些 JSON 模板不包含任何用於顯示商店內容的標記或 Liquid 對象，它們只是指示哪些部分將默認顯示在頁面上以及以何種順序顯示的簡單數據文件。

product.json模板文件的基本示例如下：

在這種情況下，產品頁面將呈現一個名為main-product.liquid的部分，並且它將是唯一默認顯示的部分。 當商家自定義此頁面並向頁面添加更多部分時， product.json模板文件將使用此信息進行更新。 當我們查看部分如何包含在模板中時，我們將在本文中更多地探索這個過程。

章節基礎

使用部分和 JSON 模板開發主題時，您可以考慮在兩個不同的類別中構建部分文件：“主要”頁面部分和單獨的模塊化組件。

主頁部分

在主頁部分中，您應該包括該頁面的所有默認內容。 例如，在產品頁面的主要部分中，您可以包含顯示產品及其相關屬性（如產品標題、描述、媒體、價格和添加到購物車錶單）的重要元素。

您可以訪問一個部分中的 Liquid 變量或對象，具體取決於該部分包含在哪個頁面模板中。這意味著將在product.json模板中呈現的部分將能夠訪問product Liquid 的任何屬性對象，表示正在呈現其頁面的產品。

同樣，包含在collection.json文件中的部分將能夠訪問collection Liquid 對象的所有屬性。 所有部分，無論它們出現在哪裡，都可以訪問任何 Liquid 全局對象。

除了要添加到主頁部分的標記和特定於頁面的 Liquid 對象之外，您還可以在{% schema %}標記內創建設置。 這些設置可以引用部分中的元素，並且可以由商家在主題編輯器中配置。

由於主頁部分包含特定於一種頁麵類型的標記，因此您只希望將其包含在其相關聯的模板中。 為防止主頁面部分從主題編輯器添加到其他頁麵類型，它不應在其部分架構中包含預設。

要查看主頁部分的示例，您可以瀏覽 Dawn 的/sections目錄中的main-product.liquid文件，或在標題中以main為前綴的任何部分。 作為一般規則，您還應該在標題中使用main來命名您的主頁部分，以幫助您區分不同的部分類型。

模塊化部分

模塊化部分是可以在在線商店的不同區域重複使用的部分，並補充頁面的主要元素。 這些類型的部分示例包括特色收藏、幻燈片和時事通訊註冊表單。

這些部分通常由商家使用主題編輯器添加到頁面，而不是默認添加到頁面模板的部分。 為了通過編輯器將一個部分添加到頁面，該部分必須在其模式中包含預設。 添加這些預設後，當商家在主題編輯器中單擊添加部分時，該部分將成為一個可用選項。

與“主”頁面部分不同，模塊化部分通常包含可在不同頁麵類型和不同上下文中在 Shopify 商店中重複使用的內容和標記。 因此，開發人員應避免依賴這些部分中特定於頁面的 Liquid 對象。

但是，可以通過使用節架構中的templates屬性將節限制為僅在特定頁麵類型上可用。 例如，如果您想將某個部分限制為僅產品和產品系列頁面，您可以將此行包含在該部分的schema標籤中：

 "templates": ["product", "collection"]

templates屬性接受表示頁麵類型的字符串列表。

根據您希望在主題中包含哪些功能，或者您的客戶有哪些具體要求，您可能會創建一系列不同的部分來啟用獨特的功能。 要查看模塊化部分的示例，您可以瀏覽 Dawn 中使用的時事通訊部分或富文本部分。

部分設置

我們已經簡要了解瞭如何使用部分文件的設置來創建商家可以訪問的自定義選項，但讓我們更深入地研究一下，看看它們是如何構建的。

正如我們所見，設置包含在部分文件中，在{% schema %}標記內，這表示這些設置應該呈現在主題編輯器的 UI 上。 一個非常簡單的示例可以通過自定義文本部分看到，它看起來像：

在此示例中，我們有兩個 HTML 元素：一個標題元素和一個段落元素。 這些元素中的每一個都包含我們使用section.settings Liquid 對象創建的動態內容。 此部分對象允許我們通過引用設置的唯一 ID 來檢索設置值。

在 HTML 和 Liquid 標記下方，我們有我們的部分設置，包含在我們的{% schema %}標籤中。 每個設置都由一個對象表示，我們可以在其中定義設置id 、它的type以及它在編輯器中的顯示方式。 要在 Liquid 中訪問某個部分的設置，請將其id附加到section.settings液體對象。 我們還定義了它的設置類型以及它在主題編輯器上的顯示方式。

在我們的模式標籤的設置中：

• id是指正在定義的 Liquid 變量
• type定義了我們正在創建的輸出類型
• label提供顯示在主題編輯器上的上下文
• default分配一個默認值

在此示例中，我為我們的標題創建了一個text框，為我們的正文創建了一個richtext文本框，但您可以根據您的客戶要求添加各種輸出類型。 其他有效的輸入類型包括image_picker 、 radio 、 video_url和font_picker 。

這個示例現在是一個有效的部分，但是我們缺少一個關鍵方面：確定該部分將出現在主題中的確切位置。 稍後我們將探索幾種不同的方法來包含部分，但現在我們將通過在部分中創建預設來允許通過主題編輯器將部分添加到任何頁面。

預設是部分的默認配置，並添加到部分的{% schema %}標籤中。 在我們的簡單示例中，預設可能如下所示：

 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]

一旦添加到我們的示例中，自定義文本框部分將如下所示：

現在，如果我們導航到主題編輯器，並在任何頁面上選擇添加部分，該部分將顯示為可用選項。 我們創建的部分設置將顯示在右側欄中，其中包含我們添加的標籤和默認文本，我們可以填充輸入文本設置，這些設置將顯示在我們的部分中。

這是一個簡單的示例，顯示了您可以在部分中創建的部分設置和變量之間的關係，以及它們如何在主題編輯器上呈現。 對於更高級的模型，您可以探索 Dawn 主題的富文本部分。

包括頁面上的部分

正如我們已經提到的，有許多方法可以在主題的頁面上包含部分。 讓我們分別探討這些方法中的每一種，並解開適用於它們的一些規則。

1. 在 JSON 模板中包含部分

當我們查看主頁部分時，我們看到 JSON 模板文件接受一個"main"屬性，它成為該頁麵類型的默認部分，並且應該包括該頁面的所有重要內容元素。

除了"main"部分之外，還可以在 JSON 模板中包含其他部分，這些部分將默認顯示在該頁麵類型上。 如果我們使用產品 JSON 模板作為示例，我們可以通過在"main"部分下方添加一個新對象來在頁面上包含產品推薦部分：

在這種情況下，我們為該部分分配一個名稱recommendations ，並且type屬性用於標識/sections目錄中我們要包含的文件。

由於此 JSON 模板引用了多個部分，因此我們需要在order對像中定義這些部分如何按順序出現。 JSON 模板中包含的每個部分都需要分配一個默認順序，但是商家仍然可以在主題編輯器上重新排列這些部分。

添加到 JSON 模板的沒有預設的部分不能在主題編輯器中刪除，但如果商家不需要它們，它們可以隱藏。 有關如何在 JSON 模板中排列部分的真實示例，您可以瀏覽 Dawn 產品模板。

2.在所有頁面上包括部分作為選項

正如我們在自定義文本中看到的那樣，當schema設置中存在presets時，可以使一個部分在主題的所有頁面上可用。

 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]

當使用這種方法包含時，可以從主題編輯器中添加、重新定位和刪除這些部分。 這些部分也可以限制為具有templates屬性的特定頁面。

這種拖放功能意味著當您構建自定義動態部分時，將解鎖用於個性化商店的多種選項。 您可以為視頻、產品或圖片庫創建可移動部分。 使用此方法的版塊的一個很好的例子是 Dawn 的時事通訊版塊。

3.使用{% section %}標籤添加靜態section

Liquid section標籤允許您在 Liquid 佈局或模板文件中呈現/sections目錄中的部分。 此標記可能顯示為：

 {% section 'header' %}

使用此section標籤添加的部分無法在主題編輯器中刪除、重新定位或隱藏。 此部分在頁面上的位置已鎖定，具體取決於它在佈局文件或模板中的添加位置。

這種方法最常用於應該始終可見的內容和組件，例如頁眉、頁腳和公告欄。 要在 Dawn 上查看此示例，您可以查看 theme.liquid 文件，其中靜態公告欄、頁眉部分和頁腳部分添加了section標籤。

賦予創造力

現在您已經了解瞭如何創建和添加部分到您的主題中，您可以為客戶的商店構建無窮無盡的選項。

使用 JSON 模板可以釋放主題所有頁面的部分的力量，這將允許商家完全按照他們想要的方式構建他們的商店 - 在您的指導下。