您可以編輯模板以自定義在線商店的內容、布局、版式和顏色。每個模板都提供了一些分區和設置,可供您用于更改商店的外觀,而無需編輯任何代碼。
若要準備自定義您的主題,請完成以下建議任務:
復制您的模板以創建一個備份副本。這使您在需要時能夠輕松地放棄更改并重新開始進行自定義。 確保您了解可用的支持級別。 了解上傳圖片的要求和最佳做法。
模板編輯器
模板編輯器會在樹形圖中顯示您當前在側邊欄中查看的模板的所有內容。您可以使用展開圖標 ? 來展開分區結點以查看其中的塊,還可以使用折疊圖標 ? 將其折疊來隱藏塊。您可以點擊任何分區或塊來查看其設置。
預覽檢查器
預覽檢查器是模板編輯器中的新功能。此功能可用于直接從預覽窗口導航到分區和塊,以及更快捷、更直觀地查找相應的設置。通過使用預覽檢查器,您可以直接從預覽窗口對分區和塊執行重新排序、隱藏或刪除操作。
預覽檢查器在所有免費的 Shopify 模板中可用,并且是默認啟用。您可以在編輯訪問期間通過切換按鈕來打開或關閉預覽檢查器。
啟用預覽檢查器后,您可以點擊任何輪廓元素以打開相應的設置。在移動設備上,啟用預覽檢查器后,可以點擊任何元素來選擇相應的設置。您可以打開底部表格,通過此所選設置進行編輯。
預覽檢查器會在預覽窗口中已點擊的分區和塊周圍顯示兩種不同的邊框:
藍色實線:活躍分區。側邊欄中的相應設置會以灰色突出顯示。 藍色點線:分區的關聯塊。點擊預覽窗口中的項將打開該塊或分區對應的設置。點擊預覽窗口中網站的任何部分都會加載側邊欄中的相應設置。在移動設備上,點擊兩次即可像客戶一樣在網站中導航。
使用預覽檢查器時,您可以直接從預覽窗口向您的模板中添加分區和塊。在移動設備上,您可以使用底部表格中的編輯模式來添加、復制、隱藏、移動和刪除分區。
您可以使用預覽檢查器從模板編輯器中移動、隱藏、復制或刪除分區和塊。
模板編輯器提供兩種模式來利用屏幕上的所有空間。
雙側邊欄模式適合較寬的瀏覽器窗口和較大的屏幕,而單側邊欄模式適合較窄的瀏覽器窗口和較小的屏幕。側邊欄模式決定了設置面板在編輯器中的顯示位置。
如果您的屏幕寬度大于 1600 像素并且瀏覽器窗口已完全展開,或者您的瀏覽器窗口已擴展到至少 1600 像素寬度,此時將顯示兩個側邊欄。左側的側邊欄包含導航面板,右側的側邊欄包含設置面板。
提示:
若要在大屏幕上以單側邊欄模式查看模板編輯器,請調窄瀏覽器窗口,直到設置面板移動到導航側邊欄頂部或消失。
較窄的瀏覽器窗口僅顯示一個側邊欄來為模板預覽留出空間。點擊分區或塊以對其進行編輯時,設置面板會在側邊欄中的導航面板頂部打開。
分區組
分區會被分組到每個頁面模板中的以下區域:
標頭:這包括標頭、公告欄以及任何應用或自定義 Liquid。 模板:這包括構成頁面正文的分區。例如,模板分區可以包含博客文章、拼貼、產品系列列表或自定義 Liquid。 頁腳:這包括頁腳、電子郵件注冊以及任何應用或自定義 Liquid。您的所有在線商店頁面均使用相同的標頭和頁腳。例如,如果您向標頭添加自定義 Liquid 塊,則所有產品頁面、主頁和任何其他頁面上均會顯示該自定義 Liquid。您可以根據需要對分區進行重新排序。
在分區和塊列表中,默認情況下顯示頁面上分區的所有塊。
默認情況下,組成標頭或頁腳的分區會折疊,但如果您點擊分區名稱旁邊的展開圖標 ?,便可以看到這些分區。
您可以將分區或塊從頁面的一個區域移動到其他區域:使用 ?? 圖標來點擊并拖動分區或塊,然后將其拖放到其他可用位置。
如果您嘗試將分區或塊移動到不被允許的位置,則該分區或塊將被放回原始位置。
您可以在每個商品的設置屏幕中刪除模板中的分區或塊。刪除分區按鈕顯示在分區設置的底部。
步驟:
在模板編輯器側邊欄中,點擊要刪除的分區或塊。
點擊刪除分區或刪除塊。
點擊保存。如果您要編輯已發布的模板,請點擊發布以保存更改并將其保存在您的商店中。
隱藏塊
您可以使用眼睛圖標隱藏任何分區或塊。
模板
您可以在模板編輯器頂欄的頁面選擇器中訪問所有模板。
如果您使用的是“Online Store 2.0” 模板,則還可以通過點擊新建模板選項來直接從頁面選擇器中創建新模板。
查看模板時,您可以將其應用于商店中的任何兼容資源來預覽其顯示效果。例如,如果您查看產品模板,則可以使用商店的任何產品來測試它。
您仍然需要在 Shopify 后臺中向資源分配模板。
您還可以使用頁面選擇器、添加分區、添加塊工具或應用嵌入中的搜索欄來搜索模板和資源。
步驟:
在模板編輯器頁面選擇器中,選擇您要預覽的模板。
在導航面板的預覽分區中,點擊更改。
在選擇菜單中,選擇您要預覽的資源。
撤消和恢復操作
撤銷和恢復按鈕位于模板編輯器的右上方。
查看文檔、獲取支持并檢查您的模板版本
指向模板文檔和支持信息的鏈接已移動到菜單欄中的更多 ? 菜單。在此菜單中,您還可以查看模板版本和創建者信息。
提示
如果使用來自 Shopify 的免費模板,那么您可以通過參閱來自 Shopify 的免費模板以及點擊模板的名稱來查看此模板的分區和設置的詳細信息。
若要了解付費模板的分區和設置,請參閱模板文檔。
如需更改模板方面的幫助,則可以聯系您的模板開發人員尋求支持。