編輯佈景主題

您可以透過編輯佈景主題,自訂線上商店的內容、版面配置、字體和顏色。每種佈景主題都提供不同的區段和設定,讓您在無需編輯任何程式碼的情況下變更商店外觀和風格。

開始自訂佈景主題之前

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

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

編輯佈景主題的內容和設定

步驟:

不同的頁面類型有不同的佈景主題區段。在您首次開啟佈景主題編輯器時,系統會顯示首頁的區段。若要存取其他頁面的區段,請從位於頁面頂端的下拉式選單中選取頁面類型。

佈景主題編輯器下拉式選單

使用佈景主題編輯器時,透過選擇和編輯佈景主題區段,便可以編輯要顯示在商店中的內容。您也可以用一般佈景主題設定變更商店外觀、風格和功能。

若要深入瞭解編輯區段和佈景主題設定的相關資訊,請參閱「區段」和「佈景主題設定」。

佈景主題編輯器

佈景主題編輯器會在側邊欄以樹狀樣式顯示您目前正檢視的範本中的所有內容。使用展開圖示 展開區段節點以查看區塊,或使用收合圖示 以隱藏區塊。您可以點擊任何區段或區塊來檢視其設定。

展開和收合區段以檢視區塊

側邊欄模式

佈景主題編輯器提供兩種模式,可充分利用您螢幕上的所有空間。

雙側邊欄模式適用於較寬的瀏覽器視窗和較大的螢幕,而單側邊欄模式則適用於較窄的瀏覽器視窗和較小的螢幕。側邊欄模式決定了設定面板在編輯器中的顯示位置。

雙側邊欄模式

如果螢幕寬度大於 1600 像素,且瀏覽器視窗已完全展開,或您的瀏覽器視窗展開寬度已超過 1600 像素,則您會看到兩個側邊欄。左側側邊欄包含導覽面板,而右側側邊欄則是包含設定面板。

在雙側邊欄模式時,設定面板會於螢幕右上方顯示

單一側邊欄模式

寬度較窄的瀏覽器僅能容納一個側邊欄,以保留空間給佈景主題預覽畫面。若您點擊區段或區塊編輯,則設定面板會在側邊欄的導覽面板上方開啟。

在單一側邊欄模式時,設定面板以導覽面板的疊加層的形式顯示

區段和區塊

在區段和區塊清單中,頁面上所有區段的區塊會按預設顯示。

根據預設設定,組成頁首或頁尾的區段為收合狀態,但若您點擊區段名稱旁的展開圖示 即可查看。

移除區段

您可以在每個品項的設定畫面中,從範本刪除區段或區塊。「移除區段」按鈕會顯示在區段設定最下方。

使用「移除區段」按鈕移除區段

步驟:

  1. 在佈景主題編輯器側邊欄中,點擊欲移除的區段或區塊。
  2. 點擊「移除區段」或「移除區塊」。
  3. 點擊「儲存」。如果您編輯的是已發佈的佈景主題,請點擊「發佈」以儲存所做的變更並讓變更內容在您的商店上線。

隱藏區塊

您可以使用眼睛圖示隱藏任何區段或區塊。

使用「移除區段」按鈕移除區段

範本

您可以在佈景主題編輯器頂端列的頁面選擇器中,存取所有佈景主題範本。

若您目前使用的是 Online Store 2.0 佈景主題,您也可以點擊「新範本」選項直接在頁面選擇器中建立新範本。

使用特定資源預覽範本

在檢視範本時,您可以查看其和商店相容資源搭配起來的效果。例如,假設您在檢視產品範本時,您可以使用商店中的任一產品來測試。

步驟:

  1. 在佈景主題編輯器頁面選擇器中,選取您想要預覽的範本。
  2. 在導覽面板的「預覽」區段中,點擊「變更」。
  3. 在「選取」選單中,選取您想要預覽的資源。

復原和取消復原動作

復原和取消復原變更

復原」按鈕可以還原最近一次變更,「取消復原」按鈕則會將您復原的變更加回來。點擊「復原」按鈕多次會讓您繼續復原操作內容,一一復原每個變更。「復原」和「取消復原」按鈕位於「佈景主題編輯器工具列」中。

佈景主題編輯器工具列中的復原和取消復原按鈕

按一下「復原」按鈕,即可還原下列變更:

  • 新增、重新排序和刪除區段
  • 「佈景主題設定」索引標籤上套用顏色、字體和其他設定
  • 重設佈景主題樣式。

檢視說明文件、取得支援,以及查看佈景主題版本

您可以在選單列中的「更多 選單中,找到佈景主題說明文件和支援資訊的連結。您也可以在此選單中查看佈景主題版本和建立者資訊。

使用「更多」按鈕以存取佈景主題資訊。

秘訣:如果您使用 Shopify 的免費佈景主題,若要查看其區段和設定的詳細說明,您可以前往 Shopify 的免費佈景主題並按一下您的佈景主題名稱。

若要瞭解付費佈景主題中的區段和設定,請參閱佈景主題的說明文件

取得自訂項目的協助

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

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

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

免費試用