新增、預覽與購買佈景主題

為協助您開始使用,當您開通 Shopify 帳號時,您的管理介面佈景主題頁面會預先設定一個預設佈景主題。若您想為網路商店自訂其他佈景主題,需先在管理介面新增該佈景主題。

您可以透過下列方式新增佈景主題:

如果您是開發人員,或正與 Shopify 合作夥伴或代理商合作,也可以透過下列方式將佈景主題新增至商店:

您可以在帳戶中新增多個佈景主題,用來嘗試新主題、保留已發布佈景主題的季節性版本,或在已發布佈景主題的副本上測試變更。您可以預覽這些佈景主題,但同一時間只能發布一個佈景主題。切換為新佈景主題後,您仍可在 Shopify 的佈景主題頁面存取舊佈景主題。

新增佈景主題後,您可以建立連結,將任何未發布的佈景主題分享預覽給其他人。若您想在發布新佈景主題或讓網路商店上線前徵求意見回饋,此功能相當實用。已發布的佈景主題無法分享預覽。

佈景主題適用資格

請檢視下列將佈景主題新增至您的商店或組織的資格條件:

  • 您可新增的佈景主題數量上限取決於您的定價方案
  • 採用 Starter 方案的商店只能新增Spotlight 佈景主題
  • 採用 Basic、Grow 或 Advanced 方案的商店與組織最多可新增 20 個佈景主題。
  • 採用Shopify Plus 方案的商店與組織最多可新增 100 個佈景主題。

如果已達到方案的佈景主題數量上限,您必須先移除佈景主題,才能新增新的佈景主題。分店的每個已上線分店都必須擁有各自的佈景主題授權。

使用 AI 產生免費佈景主題

您可以在 Shopify 管理介面的佈景主題頁面使用 AI 產生免費的個人化佈景主題。免費佈景主題的自訂協助由 Shopify 提供支援

您可以在 Shopify 管理介面的佈景主題頁面使用 AI 產生免費的個人化佈景主題。免費佈景主題的自訂協助由 Shopify 提供支援

步驟:

電腦版
  1. 在您的 Shopify 管理介面中,前往網路商店 > 佈景主題

  2. 幾秒內設計您的商店區段,輸入您的商家描述,然後按一下產生佈景主題,可產生最多 3 個免費的個人化佈景主題。

  3. 按一下您感興趣的佈景主題,然後按一下試用佈景主題,將該佈景主題套用到您的商店。

  4. 此佈景主題將會新增至管理介面中 佈景主題 頁面的「草稿佈景主題」區段。

行動版
  1. Shopify 應用程式中,點選 Menu 圖示。

  2. 銷售管道區段,點選網路商店

  3. 點選管理佈景主題

  4. 在頁面底部附近的幾秒內設計您的商店區段,輸入商家描述並點選產生佈景主題,可產生最多 3 個免費的個人化佈景主題。

  5. 點選您感興趣的佈景主題,然後點選試用佈景主題,將該佈景主題套用到您的商店。

  6. 此佈景主題將會新增至管理介面中 佈景主題 頁面的「草稿佈景主題」區段。

從管理介面新增免費佈景主題

免費佈景主題由 Shopify 開發。免費佈景主題的自訂協助由 Shopify 提供支援

免費佈景主題由 Shopify 開發。免費佈景主題的自訂協助由 Shopify 提供支援

步驟:

電腦版
  1. 在您的 Shopify 管理介面中,前往網路商店 > 佈景主題

  2. 在頁面底部的「探索佈景主題」區段中,檢視 Shopify Theme Store 的熱門免費佈景主題,或點擊「造訪佈景主題商店」以瀏覽所有可用的佈景主題。

  3. 按一下佈景主題名稱,即可在 Shopify Theme Store 檢視該佈景主題的詳情。

  4. 點擊該佈景主題的「新增」按鈕。該佈景主題將會新增至管理介面中 佈景主題 頁面的「草稿佈景主題」區段。

行動版
  1. Shopify 應用程式中,點選 Menu 圖示。

  2. 銷售管道區段,點選網路商店

  3. 點選管理佈景主題

  4. 在頁面底部的「探索佈景主題」區段中,檢視 Shopify Theme Store 的熱門免費佈景主題,或點選「造訪佈景主題商店」以瀏覽所有可用的佈景主題。

  5. 點選佈景主題名稱,在 Shopify Theme Store 中檢視該佈景主題的詳情。

  6. 點選該佈景主題的「新增」按鈕。該佈景主題將會新增至管理介面中 佈景主題 頁面的「草稿佈景主題」區段。

試用 Shopify Theme Store 的付費佈景主題

在決定購買付費佈景主題之前,您可以在 Shopify 管理介面預覽並試用。您可使用佈景主題編輯器自訂預覽中的佈景主題,例如套用您的品牌色彩、品牌風格與商品。若您購買該佈景主題,系統會保留您所做的所有自訂。

您最多可同時預覽 19 個付費佈景主題,方便在購買前比較不同的佈景主題。您正在試用的付費佈景主題會顯示佈景主題試用標籤。

如需 get support for a paid theme,請聯絡佈景主題開發者。

步驟:

  1. 造訪 Shopify Theme Store,選擇付費佈景主題。
  2. 按一下試用佈景主題,將該佈景主題新增至您的網路商店。
  3. 在 Shopify 管理介面中,按一下網路商店 > 佈景主題
  4. 在「草稿佈景主題」區段中,點擊想要預覽之佈景主題旁邊的 水平選單 按鈕來開啟動作選單。
  5. 按一下預覽

您可以在預覽期間 customize a theme's settings。若您滿意此佈景主題,便可 buy the theme。系統會保留您對佈景主題所做的任何自訂。佈景主題處於試用期間時,無法編輯其程式碼,也無法使用人工智慧 (AI) 程式碼產生器。

從 Shopify Theme Store 購買佈景主題

只有同時具備下列所有 store-level permissions 的使用者,才能從 Shopify Theme Store 購買佈景主題:

  • 佈景主題
  • 管理與安裝 app 與銷售管道
  • 核准 app 收費

在您的網路商店試用付費佈景主題後,您可以選擇購買。只有您已購買的佈景主題才能 publish themes 到您的網路商店。從 Shopify Theme Store 購買的佈景主題,其授權僅限於完成購買的商店專用。若您想在其他商店使用該佈景主題,您可能符合條件可 transfer it

付費佈景主題由第三方佈景主題開發者製作。第三方佈景主題的一般支援與更新皆由 provided by the theme developer。若您需要進階自訂,但沒有使用 HTML、CSS 與 JavaScript 開發網站的經驗,建議 hiring a Shopify Partner

步驟:

  1. 在您的 Shopify 管理介面中,前往網路商店 > 佈景主題

  2. 按一下新增佈景主題 > 前往 Shopify Theme Store

  3. 搜尋您想購買的佈景主題,然後按一下試用佈景主題

  4. 在「草稿佈景主題」區段中,點擊想購買之佈景主題的「購買」以開始交易。

從您的電腦上傳佈景主題檔案

如果您的電腦上有 ZIP 檔案形式的佈景主題,您可以將其上傳到 Shopify 管理介面的 Themes 頁面。

上傳前,請確認已將佈景主題檔案壓縮為單一 ZIP 檔案。

上傳 ZIP 檔案後,系統會將該佈景主題新增至 Shopify 管理介面的 Themes 頁面。

步驟:

電腦版
  1. 在您的 Shopify 管理介面中,前往網路商店 > 佈景主題

  2. 在「草稿佈景主題」區段中,點擊「匯入佈景主題」>「上傳 zip 檔案」。

  3. 匯入佈景主題對話方塊中,按一下選擇檔案,選取您要上傳的 ZIP 檔案。

  4. 按一下上傳

行動版
  1. Shopify 應用程式中,點選 Menu 圖示。

  2. 銷售管道區段,點選網路商店

  3. 點選管理佈景主題

  4. 在「草稿佈景主題」區段中,點選「匯入佈景主題」>「上傳 zip 檔案」。

  5. 匯入佈景主題對話方塊中,點選選擇檔案,選取您要上傳的 ZIP 檔案。

  6. 點選上傳

切換佈景主題

新增佈景主題至商店後,它們會顯示在 Shopify「佈景主題」頁面的「草稿佈景主題」區段中。您可以透過將新佈景主題 發布 到網路商店來進行切換。發布新的佈景主題後,您的舊佈景主題依然會保留在草稿佈景主題中 (如果想要,您也可以切換回去)。

若您手動更新佈景主題,更新版本的佈景主題會顯示在草稿佈景主題中做為獨立版本。切換到更新版本時,舊版佈景主題依然會保留在草稿佈景主題中。若要瞭解詳情,請參閱 更新佈景主題

準備切換佈景主題

將佈景主題新增至草稿佈景主題後,您可以在發布前進行自訂。這是在取代現有佈景主題之前,檢閱新佈景主題並配合商家需求調整設定和內容的好機會。您也可以在多個已準備好的佈景主題之間進行切換,且無須重新進行設定。

切換至新佈景主題時,商店的商品、商品系列、選單、頁面與網誌文章都不會變更或刪除,因為這些項目是在 Shopify 管理介面中獨立於佈景主題進行管理。不過,透過佈景主題編輯器、佈景主題程式碼編輯器與語言編輯器管理的內容與設定,皆為您上傳的每個佈景主題及其版本所獨有。

您的網路商店中下列部分與佈景主題相關。您欲使用的每個佈景主題都必須分別自訂這些部分:

並非所有佈景主題都支援全部 Shopify 功能。請檢視該佈景主題的功能清單,以確保具備您需要的功能。

佈景主題預覽

您可以在網路商店的佈景主題區段預覽任何佈景主題。系統會在瀏覽器分頁中,搭配網路商店預覽列,於您的網路商店顯示正在預覽的佈景主題。

網路商店的預覽列會顯示關於您的佈景主題的下列資訊:

  • 佈景主題名稱。
  • 佈景主題狀態。已發布的佈景主題會顯示上線狀態;未發布的佈景主題則為草稿狀態。

您可以透過以下操作自訂預覽:

  • view icon View as 區段中,您可以選取不同的國家/地區或語言進行預覽。深入瞭解international marketsadding additional languages to your theme
  • 按一下 link 按鈕以share a preview of your theme
  • 按一下 關閉預覽 以關閉預覽並顯示您已發布的佈景主題。
    • 按一下 編輯佈景主題,開啟佈景主題編輯器並自訂佈景主題。
  • 按一下預覽列的上方區域即可將其收合。您也可以再次按一下將其展開。

與他人分享佈景主題預覽

如果您的網路商店即將上線,或打算透過發布新的佈景主題變更商店,您可以分享佈景主題的預覽,向他人徵詢意見回饋。

您可以建立一個連結,讓其他人存取您在 Shopify 管理介面中新增的任何佈景主題的預覽。佈景主題不需發布也能分享。

佈景主題預覽分為兩種類型:

  • 訪客預覽:任何持有該網址的人都能看到,不需要驗證。這類預覽會在建立該網址後 2 天過期。訪客預覽的網址採用以下格式:https://<token>-<shop_id>.shopifypreview.com
  • 商家預覽:商家預覽需要管理介面驗證,且可存取結帳頁面。這類預覽會在建立該網址後 30 天過期。商家預覽的網址會採用您的主要網域格式並附加權杖參數。

在佈景主題上按一下 預覽 時,商家預覽的網址會顯示在您瀏覽器的位址列。若要建立訪客預覽連結以分享給他人,請在預覽列中按一下 link 按鈕。您可以不限次數建立新的連結,建立新連結不會影響舊的預覽連結。

步驟:

電腦版
  1. 在您的 Shopify 管理介面中,前往網路商店 > 佈景主題

  2. 在要分享的佈景主題上,按一下 horizontal menu 按鈕開啟動作選單,然後按一下 預覽

  3. 選用:選取不同的國家/地區、語言或兩者,以變更預覽。

  4. 按一下 link 按鈕,將連結複製到您的剪貼簿。

行動版
  1. Shopify 應用程式中,點選 Menu 圖示。

  2. 銷售管道區段,點選網路商店

  3. 點選管理佈景主題

  4. 在要分享的佈景主題上,點選 horizontal menu 按鈕以開啟動作選單,然後點選 預覽

  5. 選用:選取不同的國家/地區、語言或兩者,以變更預覽。

  6. 點選 link,將連結複製到您的剪貼簿。

佈景主題預覽疑難排解

各種情況可能導致您的佈景主題預覽或預覽列無法正確顯示。若您查看本指南的步驟後仍遇到佈景主題相關問題,可能需要聯絡您的佈景主題支援團隊。深入瞭解getting support for themes

預覽列會顯示在您的線上商店

這種情況通常是因為您的佈景主題錯誤地將名為 preview_theme_id 的參數加入網路商店的網址。此參數僅供內部預覽使用,若出現在正式網址上,會強制所有訪客都看到預覽列。

造訪您的網路商店,並在瀏覽器的位址列檢查是否有 preview_theme_id 參數。您也可以請顧客將出現預覽列的連結位址轉寄給您。

若您的網路商店網址包含 preview_theme_id 參數,請contact your theme's developer for support並說明問題。

若您熟悉editing theme code,可以在佈景主題檔案中搜尋 preview_theme_id,並移除將它加入網址的程式碼。layout 檔案,以及包含 Javascript 的檔案(副檔名為 .js),最有可能包含此類程式碼。僅在您懂得 HTML 與 CSS,並具備基本的Liquid、Shopify 的範本語言、JSON 與 Javascript 概念時,才編輯佈景主題程式碼。

此問題曾在從 Shopify Theme Store 以外來源購買的佈景主題上被回報,例如 ThemeForest 的 Lumia 佈景主題。

預覽草稿佈景主題會重新導向至當前佈景主題

如果您在未發布的佈景主題上按一下 預覽,卻被重新導向至當前佈景主題,通常與 Cloudflare 的快取設定有關。

若您在 Shopify 商店前端使用 Cloudflare,快取設定可能會干擾 Shopify 的預覽機制。Shopify 也使用 Cloudflare 進行快取,這些快取層有時會互相衝突。我們的文件中也提及與外部快取可能發生的衝突。

為確保預覽列正常運作,請在 Cloudflare 上停用針對 Shopify 的所有快取。

預覽列完全未顯示

如果您在預覽佂景主題時沒有看到預覽列,可能是因為自訂程式碼或第三方 app 修改了佈景主題的預設指令碼。

此問題很可能是因為修改影響了 Liquid 物件,通常位於您的佈景主題版面配置資料夾中的 `theme.liquid` 檔案。預覽列指令碼需要該 物件才能正確載入。修改此物件可能會阻止指令碼載入,導致預覽列缺失,以及 Shopify 功能與 app 的其他問題。

您可以檢查您的佈景主題與 app,找出修改的來源。瞭解如何troubleshoot your theme