編輯佈景主題程式碼

您可以編輯佈景主題程式碼以對網路商店內容進行詳細變更。構成佈景主題的大多數檔案含有 Liquid,這是 Shopify 的範本語言。佈景主題檔案也包含 HTML、CSS、JSON 和 JavaScript。只有在您熟悉 HTML 和 CSS 且對 Liquid 有基本瞭解時,才應編輯佈景主題程式碼。

如果您編輯佈景主題程式碼,則可能會使其不符合自動升級的條件。您應該僅在無法使用 HTML、Liquid 設定或 Shopify 應用程式進行所需修改時,才編輯佈景主題程式碼。

開始自訂佈景主題之前

在開始自訂佈景主題之前,我們建議您先進行以下動作:

  • 複製您的主題,以便用來建立備份。這樣做可以讓您在需要的時候輕鬆捨棄變更內容,重新開始。
  • 請務必瞭解您可獲得的支援級別
  • 請看更多有關上傳圖片規範及最佳做法的資訊。

編輯佈景主題程式碼

您可以編輯佈景主題的程式碼。

步驟:

  1. 依序按一下「動作 > 編輯程式碼」。

程式碼編輯器在左側顯示佈景主題文件的目錄,在右側顯示用於檢視和編輯檔案的空間。

您可以按一下展開圖示來展開程式碼編輯器以填滿畫面。

展開圖示

您可以按一下收合圖示將頁面恢復正常:

收合圖示

您在左側目錄中點擊檔案時,系統會在程式碼編輯器中開啟該檔案。您可以一次開啟多個檔案並加以編輯。系統會在您修改的任何檔案的檔案名稱旁顯示一個點。

佈景主題檔案目錄在修改後的檔案旁顯示一個紫點

這可協助您追蹤已進行變更的位置。

撤回至舊版佈景主題

如果您變更了佈景主題檔案且需要還原,可以個別將 .liquid 檔案撤回至進行變更前的日期和時間。

  1. 在「範本」頁尾下方,點擊您最近編輯的其中一個 .liquid 檔案。

    開啟 Liquid 檔案

  2. 點擊 .liquid 檔案名稱旁的較舊版本

    舊版

  3. 點擊下拉式選單以選取較舊版本。點擊日期戳記後,程式碼會撤回至該儲存的版本。

    撤回範例

  4. 選用:點擊「預覽」,查看錯誤是否已修正。

深色模式

將程式碼編輯器展開為全螢幕時,您可以點擊頁面底部的按鈕來切換「淺色」和「深色」編輯器配色。

若要瞭解使用深色編輯器的優點,請參閱 Shopify 合作夥伴部落格上的《The Power of the Dark Side: Dark User Interfaces》一文。

佈景主題程式碼自訂教學

您可以遵循佈景主題程式碼自訂教學課程,可以在您對網路商店進行變更時提供指導。教學課程按照頁面類型或修改的功能編排。

自訂佈景主題教學課程會以佈景主題架構版本來區分。瞭解如何識別佈景主題主題架構版本

取得自訂項目的協助

如果您在變更佈景主題上需要協助,不妨洽詢佈景主題的開發人員尋求協助

若想瞭解還有哪些資源可以幫助您自訂佈景主題,請參考其他佈景主題支援資源

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

免費試用