編輯佈景主題程式碼
此頁面列印時間為 Oct 03, 2024。如須最新版本，請至 https://help.shopify.com/zh-TW/manual/online-store/themes/theme-structure/extend/edit-theme-code。
您可以編輯佈景主題程式碼以對網路商店內容進行詳細變更。構成佈景主題的大多數檔案含有 Liquid，這是 Shopify 的範本語言。佈景主題檔案也包含 HTML、CSS、JSON 和 JavaScript。只有在您熟悉 HTML 和 CSS 且對 Liquid 有基本瞭解時，才應編輯佈景主題程式碼。
開始自訂佈景主題之前
若要準備自訂您的佈景主題，請完成以下建議工作：
編輯佈景主題程式碼
您可以編輯佈景主題的程式碼。
步驟：
- 在 Shopify 管理介面 中，前往「線上商店」>「佈景主題」。
- 依序點擊 ... > 編輯程式碼。
- 在 Shopify 應用程式中，點選「…」按鈕。
- 在銷售管道畫面上，點一下「線上商店」。
- 點一下「管理佈景主題」。
- 依序點擊 ... > 編輯程式碼。
- 在 Shopify 應用程式中，點選「…」按鈕。
- 在銷售管道畫面上，點一下「線上商店」。
- 點一下「管理佈景主題」。
- 依序點擊 ... > 編輯程式碼。
程式碼編輯器在左側顯示佈景主題文件的目錄，在右側顯示用於檢視和編輯檔案的空間。
您在左側目錄中點擊檔案時，系統會在程式碼編輯器中開啟該檔案。您可以同時開啟多個檔案並加以編輯。系統會在您修改的任何檔案的名稱旁顯示一個點：
這可協助您追蹤已進行變更的位置。
撤回至舊版佈景主題
如果您變更了佈景主題檔案且需要還原，可以個別將 .liquid 檔案撤回至進行變更前的日期和時間。
步驟：
- 在 Shopify 管理介面 中，前往「線上商店」>「佈景主題」。
- 找到要編輯的佈景主題，按一下「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。
- 在「範本」頁首下方，點擊您最近編輯過的其中一個 .liquid 檔案。
- 點擊
.liquid檔案名稱底下的「目前版本」。 - 點擊下拉式選單以選取較舊版本。點擊日期戳記後，程式碼會撤回至該儲存的版本。
- 選用：點擊「預覽商店」，驗證該錯誤是否已修正。
- 在 Shopify 應用程式中，點選「…」按鈕。
- 在銷售管道畫面上，點一下「線上商店」。
- 點一下「管理佈景主題」。
- 找到要編輯的佈景主題，按一下「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。
- 在「範本」頁首下方，點擊您最近編輯過的其中一個 .liquid 檔案。
- 點擊
.liquid檔案名稱底下的「目前版本」。 - 點擊下拉式選單以選取較舊版本。點擊日期戳記後，程式碼會撤回至該儲存的版本。
- 選用：點擊「預覽商店」，驗證該錯誤是否已修正。
- 在 Shopify 應用程式中，點選「…」按鈕。
- 在銷售管道畫面上，點一下「線上商店」。
- 點一下「管理佈景主題」。
- 找到要編輯的佈景主題，按一下「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。
- 在「範本」頁首下方，點擊您最近編輯過的其中一個 .liquid 檔案。
- 點擊
.liquid檔案名稱底下的「目前版本」。 - 點擊下拉式選單以選取較舊版本。點擊日期戳記後，程式碼會撤回至該儲存的版本。
- 選用：點擊「預覽商店」，驗證該錯誤是否已修正。
Theme Check
程式碼編輯器包括 Theme Check，該功能可在編寫程式碼時提供即時意見回饋，有助於防止出現錯誤，而不是在當前佈景主題中發現錯誤。
在程式碼編輯器中，Theme Check 可在已編輯的程式碼中找到下列錯誤：
- 剖析器封鎖指令碼，可能因此導致店面速度緩慢
- 翻譯檔案之間的不一致，例如缺少翻譯鍵值或地區設定檔中的翻譯不相符
- 缺少範本
程式碼下方的紅色線條會用於標示錯誤。若要查看錯誤，請將滑鼠游標停留在突出的線上。
佈景主題程式碼自訂教學
您可以遵循佈景主題程式碼自訂教學課程，可以在您對網路商店進行變更時提供指導。教學課程按照頁面類型或修改的功能編排。
自訂佈景主題教學課程會以佈景主題架構版本來區分。瞭解如何識別佈景主題主題架構版本。
取得自訂項目的協助
如果您在變更佈景主題上需要協助，不妨洽詢佈景主題的開發人員尋求協助。
若想瞭解還有哪些資源可以幫助您自訂佈景主題，請參閱「其他佈景主題支援資源」。