編輯佈景主題程式碼

您可以使用程式碼編輯器編輯佈景主題的程式碼，對網路商店進行細部變更。構成佈景主題的大多數檔案都包含 Liquid (Shopify 的範本語言)。佈景主題檔案也包含 HTML、CSS、JSON 與 JavaScript。僅在您熟悉 HTML 與 CSS，且對 Liquid 有基本認識時，才編輯佈景主題的程式碼。

只有在購買後，您才能編輯佈景主題的程式碼。這也包含在佈景主題編輯器中使用 AI 程式碼產生器。若您使用付費佈景主題的試用版，必須先購買後才能變更程式碼。

程式碼編輯器會顯示佈景主題檔案的目錄，以及用來顯示與編輯檔案的區域。當您在目錄中按一下檔案時，該檔案會在程式碼編輯器中開啟。您可以同時開啟並編輯多個檔案。您也可以同時開啟並檢閱多個檔案。

本頁內容

編輯佈景主題程式碼

您可以使用程式碼編輯器修改佈景主題的檔案。

步驟：

電腦版

在您的 Shopify 管理介面中，前往 網路商店 > 佈景主題。
按一下 > 編輯程式碼。

行動裝置

在 Shopify app 中，點選圖示。
在 銷售管道 區段中，點選 網路商店。
點選 管理佈景主題。
點選 > 編輯程式碼。

儲存變更

當您編輯檔案時，分頁名稱旁會顯示一個圓點，表示有尚未儲存的變更。按一下儲存按鈕以儲存變更。您也可以在 Mac 按下 ⌘ + S，或在 Windows 按下 Ctrl + S 來儲存變更。

格式化佈景主題程式碼

若要修正程式碼縮排，請在 Mac 按下 ⌘ + Shift + P，或在 Windows 按下 Ctrl + Shift + P 開啟命令面板，輸入 format，然後選取 格式化文件。

步驟：

在您的 Shopify 管理介面中，前往 網路商店 > 佈景主題。
按一下 > 編輯程式碼。
開啟您要格式化的檔案。
在 Mac 按下 ⌘ + P，或在 Windows 按下 Ctrl + P。
在命令面板中輸入 format，然後按下鍵盤上的 Enter。
儲存檔案。

追蹤檔案變更

若要將經過修改的佈景主題檔案還原為先前的版本，請使用該檔案的 時間軸 檢視畫面。

時間軸 檢視畫面一次僅能還原一個現有檔案。系統不會還原整個佈景主題，且無法復原已刪除的佈景主題檔案。時間軸記錄有限，因此可能無法提供較舊的版本。

還原作業會取代整個檔案內容，包含您可能想保留的變更。在還原檔案之前，若您可能需要保留任何變更，請將目前的檔案內容複製並妥善儲存到安全的位置。

步驟：

在您的 Shopify 管理介面中，前往 網路商店 > 佈景主題。
按一下 > 編輯程式碼。
開啟您想檢閱或還原的現有檔案。
選用：如果您可能想保留目前的任何變更，請在還原之前將目前的檔案內容複製到安全的位置。
在 時間軸 檢視畫面中，點擊時間軸中的項目以比較差異。
若要以選取的先前版本取代整個檔案內容，請在該時間軸項目上按一下滑鼠右鍵，然後選取「還原內容」。
按一下還原。

Theme Check

程式碼編輯器內建 Theme Check，此功能會在您撰寫程式碼時即時提供意見回饋，協助預防錯誤，而不是等到在當前佈景主題中才發現問題。

在程式碼編輯器中，Theme Check 可以偵測已編輯程式碼中的下列錯誤：

會阻擋解析器的指令碼，可能會拖慢線上店面
翻譯檔案之間的不一致，例如缺少翻譯鍵，或地區設定檔中的翻譯不相符
缺少範本

錯誤會以紅色底線標示。若要查看錯誤，請將滑鼠游標移到標示的那一行上方。

在程式碼編輯器中搜尋與取代

您可以透過下列任一方式在程式碼編輯器中搜尋：

搜尋特定檔案中的程式碼。
搜尋佈景主題中所有檔案的程式碼。

您也可以在特定檔案中取代程式碼，或一次取代佈景主題所有檔案中的多個相符項。此外，您也能依檔名搜尋以 open a file。

在單一檔案內搜尋

您可以在特定檔案中搜尋並取代程式碼。使用方向鍵逐一檢視每個相符項。

搜尋完成後，您可以在檔案中取代程式碼。

步驟：

在您的 Shopify 管理介面中，前往 網路商店 > 佈景主題。
按一下 > 編輯程式碼。
開啟您要搜尋的檔案。
在 Mac 上按 ⌘ + F，或在 Windows 上按 Ctrl + F。
在「搜尋」欄位輸入搜尋字詞。
選用：若要取代程式碼，請完成以下步驟：

在搜尋互動視窗中，按一下圖示。
在「取代」欄位輸入要取代的程式碼。您可以按一下「保留大小寫」，讓取代內容的大小寫與現有相符項一致。
按一下「取代」圖示可逐一取代相符項，或按一下「全部取代」圖示可一次取代所有相符項。

跨所有檔案搜尋

按一下左側側邊欄的搜尋按鈕，以在佈景主題的所有檔案中搜尋。結果會列出每個相符項，以及其所在的檔案。

步驟：

在您的 Shopify 管理介面中，前往 網路商店 > 佈景主題。
按一下 > 編輯程式碼。
按一下圖示以開啟搜尋面板。
在「搜尋」欄位輸入搜尋字詞。
選用：若要取代程式碼，請完成以下步驟：

在搜尋互動視窗中，按一下圖示。
在「取代」欄位輸入要取代的程式碼。
可逐一取代，或一次取代所有相符項。

進階搜尋選項

若要縮小搜尋結果範圍，請使用下列一或多項搜尋選項：

選取「區分大小寫」會比對大小寫。例如輸入 product，系統會標示所有出現的「product」或「Product」。若選取「區分大小寫」，則只會標示 product。
選取「全字比對」只會回傳完全比對的字詞，不含部分比對。例如輸入 cart，會標示「cart」，但不會標示「carton」。
選取「使用正規表示式」會回傳符合正規表示式 (regex) 的結果。regex 是一種用來指定文字比對樣式的字元序列。

在「搜尋」面板中，您也可以選取要納入或排除於搜尋結果之外的檔案與資料夾。

按一下以開啟進階選單。您可以在「要包含的檔案」或「要排除的檔案」欄位輸入任何檔案或資料夾路徑。若要加入多個檔案或資料夾，請用空格和逗號分隔。例如要搜尋 sections 資料夾內的檔案，請在「要包含的檔案」欄位輸入 ./sections。

您也可以在檔案目錄檢視中搜尋特定資料夾。在資料夾上按一下滑鼠右鍵，然後從下拉式選單選取「在資料夾中尋找...」。

管理佈景主題檔案

您可以管理佈景主題程式碼中的檔案。您可以刪除檔案、新增檔案、重新命名檔案，並在有先前版本可用時，從其 時間軸 檢視畫面還原已修改的現有程式碼檔案。assets 資料夾中的資源檔案 (例如圖片、CSS、JavaScript 和字型) 沒有時間軸記錄。

開啟佈景主題檔案

若要開啟佈景主題檔案，先按一下資料夾，然後在檔案瀏覽器中按一下檔名。您也可以依檔名或副檔名搜尋，然後開啟檔案。

步驟：

在您的 Shopify 管理介面中，前往 網路商店 > 佈景主題。
按一下 > 編輯程式碼。
在 Mac 按下 ⌘ + P，或在 Windows 按下 Ctrl + P。
在搜尋列輸入檔名並選取該檔案，或從「最近開啟」清單中選取。

新增佈景主題檔案

若要新增檔案，選取一個資料夾，按一下「新增檔案」圖示，然後輸入檔名與副檔名。

檔名可包含字元 A-Z、0-9，且不可包含空格。請以連字號或底線分隔字詞。副檔名由句點 . 加上類型組成，例如 .liquid 或 .css。

步驟：

在您的 Shopify 管理介面中，前往 網路商店 > 佈景主題。
按一下 > 編輯程式碼。
按一下您要新增檔案的資料夾。
以滑鼠右鍵按一下該資料夾名稱，然後從下拉式選單選取「新增檔案...」。
輸入檔案的新名稱。
在鍵盤上按 Enter。

上傳新資產

您可以將新資產 (例如圖示或圖片檔) 上傳至程式碼編輯器的「assets」資料夾。

步驟：

在您的 Shopify 管理介面中，前往 網路商店 > 佈景主題。
按一下 > 編輯程式碼。
在「assets」資料夾上按一下滑鼠右鍵。
按一下「上傳...」。
選取要上傳的檔案。
按一下「開啟」。

重新命名佈景主題檔案

您可以在檔案上按一下滑鼠右鍵以重新命名。請勿編輯或移除副檔名。副檔名由句點 . 與副檔名類型構成，例如 .liquid 或 .css。檔名可包含字元 A-Z、0-9，但不能包含空白字元。請以連字號 (-) 或底線 (_) 分隔單字。若檔名無效，系統不會儲存新的檔名。

步驟：

在您的 Shopify 管理介面中，前往 網路商店 > 佈景主題。
按一下 > 編輯程式碼。
在檔案上按一下滑鼠右鍵，然後從下拉式選單中選取 重新命名…。
輸入檔案的新名稱。
在鍵盤上按 Enter。

刪除佈景主題檔案

您可以刪除佈景主題中的任何檔案。已刪除的佈景主題檔案無法復原。

步驟：

在您的 Shopify 管理介面中，前往 網路商店 > 佈景主題。
按一下 > 編輯程式碼。
在檔案上按一下滑鼠右鍵，然後從下拉式選單中選取 永久刪除。
按一下刪除。