編輯佈景主題
您可以透過編輯佈景主題，自訂線上商店的內容、版面配置、字體和顏色。每種佈景主題都提供不同的區段和設定，讓您在無需編輯任何程式碼的情況下變更商店外觀和風格。
開始自訂佈景主題之前
在開始自訂佈景主題之前，我們建議您先進行以下動作：
佈景主題編輯器
佈景主題編輯器會在側邊欄以樹狀樣式顯示您目前正檢視的範本中的所有內容。使用展開圖示 ▸ 展開區段節點以查看區塊，或使用收合圖示 ▾ 以隱藏區塊。您可以點擊任何區段或區塊來檢視其設定。
Preview Inspector
Preview Inspector 是佈景主題編輯器的新功能，可讓您直接從預覽視窗導覽至各個區段和區塊，並更快速、更直接地找到對應設定。您可以使用 Preview Inspector，直接從預覽視窗重新排序、隱藏或刪除區段和區塊。
所有免費 Shopify 佈景主題皆提供 Preview Inspector 且預設為啟用。您可以在編輯工作階段開啟或關閉 Preview Inspector。
Preview Inspector 啟用時，您可以點擊任何外框元素來開啟對應設定。若您使用行動裝置，Preview Inspector 啟用時，您可以點擊任何元素來選取相應的設定。您可以開啟下方工作表，透過所選設定進行編輯。
Preview Inspector 會在預覽視窗中，針對已點擊之區段和區塊周圍顯示兩種不同邊框：
- 藍色實線：作用中的區段。側邊欄中的對應設定會以灰色標示。
- 藍色虛線：該區段的相關區塊。點擊預覽視窗中的項目即可開啟該區塊或區段的設定。
在預覽視窗中點擊網站的任何部分後，側邊欄即會載入其對應設定。若您使用行動裝置，點兩下系統便會和導覽買家一樣帶您瀏覽網站。
在 Preview Inspector 中新增區段和區塊
使用 Preview Inspector 時，您可以直接在預覽視窗中為佈景主題新增區段和區塊。在行動裝置中，您可以使用下方工作表的編輯模式來新增、複製、隱藏、移動和刪除區段。
| 工具 | 說明 |
|---|---|
| 新增區段 | 「新增區段」按鈕會顯示在所選區段的頂端和底部。點擊「新增區段」即可在所選區段的上方或下方插入新區段。 |
| 新增區塊 | 將游標停留在現有區塊上時，「新增區塊」按鈕便會出現。若要新增區塊，請點擊「+」圖示。點擊後，畫面會顯示一個彈出式選單，其包含可新增至所選區段的佈景主題與應用程式區塊。點擊您要新增的區塊，然後新區塊的設定視窗即會在右側的側邊欄中載入。 |
Preview Inspector 工具
您可以使用 Preview Inspector，在佈景主題編輯器中移動、隱藏或刪除區段和區塊。
| 工具 | 說明 |
|---|---|
| 移到下一個/前一個位置 | 您可以使用 Preview Inspector 中的箭頭圖示，將區段或區塊移至下一個位置或前一個位置。如果選取的區段位於頁面最上方，則「移至前一個位置」按鈕會呈現灰色。同樣道理，如果選取的區段位於頁面底部，您就無法使用「移至下一個位置」按鈕。 |
| 隱藏區段或區塊 | 點擊眼睛圖示可以隱藏區段或區塊。您無法在 Preview Inspector 中將已隱藏的區段或區塊取消隱藏。您可以點擊首頁列中的「復原」按鈕，或關閉設定面板以返回佈景主題編輯器首頁，此處的側邊欄會顯示任何隱藏的區段或區塊，其眼睛圖示則會標上刪除線。點擊此圖示即可將區段或區塊取消隱藏。 |
| 刪除區段或區塊 | 點擊垃圾桶圖示，即可刪除您在 Preview Inspector 中選取的區段或區塊。 |
側邊欄模式
佈景主題編輯器提供兩種模式，可充分利用您螢幕上的所有空間。
雙側邊欄模式適用於較寬的瀏覽器視窗和較大的螢幕，而單側邊欄模式則適用於較窄的瀏覽器視窗和較小的螢幕。側邊欄模式決定了設定面板在編輯器中的顯示位置。
雙側邊欄模式
如果螢幕寬度大於 1600 像素，且瀏覽器視窗已完全展開，或您的瀏覽器視窗展開寬度已超過 1600 像素，則您會有兩個側邊欄。左側側邊欄包含導覽面板，而右側側邊欄則包含設定面板。
單一側邊欄模式
寬度較窄的瀏覽器僅能容納一個側邊欄，以保留空間給佈景主題預覽畫面。若您點擊區段或區塊編輯，則設定面板會在側邊欄的導覽面板上方開啟。
區段群組
區段在每個頁面範本中會分為以下幾個區域：
- 頁首：這包括頁首、公告列及任何應用程式或自訂 Liquid。
- 範本：這包括組成頁面本文的區段。例如，範本區段可能包含網誌文章、拼貼、商品系列清單或自訂 Liquid。
- 頁尾：這包括頁尾、電子郵件訂閱及任何應用程式或自訂 Liquid。
您網路商店上的所有頁面都會共用頁首和頁尾。例如，如果您將自訂 Liquid 區塊新增至頁首，則該自訂 Liquid 會顯示在所有商品頁面、首頁和任何其他頁面上。您可視需要重新排序區段。
區段和區塊
在區段和區塊清單中，頁面上所有區段的區塊會按預設顯示。
根據預設設定，組成頁首或頁尾的區段為收合狀態，但若您點擊區段名稱旁的展開圖示 ▸ 即可檢視。
移動區段和區塊
您可以使用 ⋮⋮ 圖示，點擊並拖曳區段或區塊，然後放到其他可用位置，藉此將區段或區塊從頁面的一區移動到另一區。
如果您嘗試將區段或區塊移動到無法放置的位置，該區段或區塊會回到原始位置。
移除區段
您可以在每個品項的設定畫面中，從範本刪除區段或區塊。「移除區段」按鈕會顯示在區段設定最下方。
步驟：
- 在佈景主題編輯器側邊欄中，點擊欲移除的區段或區塊。
- 點擊「移除區段」或「移除區塊」。
- 點擊「儲存」。如果您編輯的是已發佈的佈景主題，請點擊「發佈」以儲存所做的變更並讓變更內容在您的商店上線。
隱藏區塊
您可以使用眼睛圖示隱藏任何區段或區塊。
範本
您可以在佈景主題編輯器頂端列的頁面選擇器中，存取所有佈景主題範本。
若您目前使用的是 Online Store 2.0 佈景主題，您也可以點擊「新範本」選項直接在頁面選擇器中建立新範本。
使用特定資源預覽範本
在檢視範本時，您可以預覽其和商店相容資源搭配起來的效果。舉例來說，如果您正在檢視產品範本，則可使用商店中的任一產品對其進行測試。
步驟：
- 在佈景主題編輯器頁面選擇器中，選取您想要預覽的範本。
- 在導覽面板的「預覽」區段中，點擊「變更」。
- 在「選取」選單中，選取您想要預覽的資源。
復原和取消復原動作
復原和取消復原按鈕位於佈景主題編輯器的右上方。
檢視說明文件、取得支援，以及查看佈景主題版本
您可以在選單列中的「更多」⋯ 選單中，找到佈景主題說明文件和支援資訊的連結。您也可以在此選單中查看佈景主題版本和建立者資訊。
秘訣：如果您使用 Shopify 的免費佈景主題，若要查看其區段和設定的詳細說明，您可以前往 Shopify 的免費佈景主題並按一下您的佈景主題名稱。
若要瞭解付費佈景主題中的區段和設定，請參閱佈景主題的說明文件。
取得自訂項目的協助
如果您在變更佈景主題上需要協助，不妨洽詢佈景主題的開發人員尋求協助。
若想瞭解還有哪些資源可以幫助您自訂佈景主題，請參閱「其他佈景主題支援資源」。