新增、預覽與購買佈景主題
為協助您開始使用,當您開通 Shopify 帳號時,您的管理介面佈景主題頁面會預先設定一個預設佈景主題。若您想為網路商店自訂其他佈景主題,需先在管理介面新增該佈景主題。
您可以透過下列方式新增佈景主題:
- 您可以用自己的話描述您的業務,並使用 AI 產生免費個人化佈景主題。
- 您可以從 Shopify 管理介面新增免費佈景主題。
- 您可以從 Shopify Theme Store 試用付費佈景主題。您可以預覽任何佈景主題,並使用佈景主題編輯器自訂。您必須先購買佈景主題,才能將其發布到網路商店。
- 如果您的電腦上已有 ZIP 檔的佈景主題,您可以上傳該檔案。
如果您是開發人員,或正與 Shopify 合作夥伴或代理商合作,也可以透過下列方式將佈景主題新增至商店:
- 您可以使用Shopify GitHub 整合,將託管於 GitHub 的佈景主題新增到商店。
- 您可以使用Shopify CLI,將佈景主題推送至商店。
您可以在帳戶中新增多個佈景主題,用來嘗試新主題、保留已發布佈景主題的季節性版本,或在已發布佈景主題的副本上測試變更。您可以預覽這些佈景主題,但同一時間只能發布一個佈景主題。切換為新佈景主題後,您仍可在 Shopify 的佈景主題頁面存取舊佈景主題。
新增佈景主題後,您可以建立連結,將任何未發布的佈景主題分享預覽給其他人。若您想在發布新佈景主題或讓網路商店上線前徵求意見回饋,此功能相當實用。已發布的佈景主題無法分享預覽。
本頁內容
佈景主題適用資格
請檢視下列將佈景主題新增至您的商店或組織的資格條件:
- 您可新增的佈景主題數量上限取決於您的定價方案:
- 採用 Starter 方案的商店只能新增Spotlight 佈景主題。
- 採用 Basic、Grow 或 Advanced 方案的商店與組織最多可新增 20 個佈景主題。
- 採用Shopify Plus 方案的商店與組織最多可新增 100 個佈景主題。
如果已達到方案的佈景主題數量上限,您必須先移除佈景主題,才能新增新的佈景主題。分店的每個已上線分店都必須擁有各自的佈景主題授權。
使用 AI 產生免費佈景主題
您可以在 Shopify 管理介面的佈景主題頁面使用 AI 產生免費的個人化佈景主題。免費佈景主題的自訂協助由 Shopify 提供支援。
您可以在 Shopify 管理介面的佈景主題頁面使用 AI 產生免費的個人化佈景主題。免費佈景主題的自訂協助由 Shopify 提供支援。
步驟:
電腦版
行動版
在Shopify 應用程式中,點選
圖示。
在銷售管道區段,點選網路商店。
點選管理佈景主題。
在頁面底部附近的幾秒內設計您的商店區段,輸入商家描述並點選產生佈景主題,可產生最多 3 個免費的個人化佈景主題。
點選您感興趣的佈景主題,然後點選試用佈景主題,將該佈景主題套用到您的商店。
此佈景主題將會新增至管理介面中 佈景主題 頁面的「草稿佈景主題」區段。
從管理介面新增免費佈景主題
免費佈景主題由 Shopify 開發。免費佈景主題的自訂協助由 Shopify 提供支援。
免費佈景主題由 Shopify 開發。免費佈景主題的自訂協助由 Shopify 提供支援。
步驟:
電腦版
行動版
在Shopify 應用程式中,點選
圖示。
在銷售管道區段,點選網路商店。
點選管理佈景主題。
在頁面底部的「探索佈景主題」區段中,檢視 Shopify Theme Store 的熱門免費佈景主題,或點選「造訪佈景主題商店」以瀏覽所有可用的佈景主題。
點選佈景主題名稱,在 Shopify Theme Store 中檢視該佈景主題的詳情。
點選該佈景主題的「新增」按鈕。該佈景主題將會新增至管理介面中 佈景主題 頁面的「草稿佈景主題」區段。
試用 Shopify Theme Store 的付費佈景主題
在決定購買付費佈景主題之前,您可以在 Shopify 管理介面預覽並試用。您可使用佈景主題編輯器自訂預覽中的佈景主題,例如套用您的品牌色彩、品牌風格與商品。若您購買該佈景主題,系統會保留您所做的所有自訂。
您最多可同時預覽 19 個付費佈景主題,方便在購買前比較不同的佈景主題。您正在試用的付費佈景主題會顯示佈景主題試用標籤。
如需 get support for a paid theme,請聯絡佈景主題開發者。
步驟:
- 造訪 Shopify Theme Store,選擇付費佈景主題。
- 按一下試用佈景主題,將該佈景主題新增至您的網路商店。
- 在 Shopify 管理介面中,按一下網路商店 > 佈景主題。
- 在「草稿佈景主題」區段中,點擊想要預覽之佈景主題旁邊的
按鈕來開啟動作選單。
- 按一下預覽。
您可以在預覽期間 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。
步驟:
在您的 Shopify 管理介面中,前往網路商店 > 佈景主題。
按一下新增佈景主題 > 前往 Shopify Theme Store。
搜尋您想購買的佈景主題,然後按一下試用佈景主題。
在「草稿佈景主題」區段中,點擊想購買之佈景主題的「購買」以開始交易。
從您的電腦上傳佈景主題檔案
如果您的電腦上有 ZIP 檔案形式的佈景主題,您可以將其上傳到 Shopify 管理介面的 Themes 頁面。
上傳前,請確認已將佈景主題檔案壓縮為單一 ZIP 檔案。
上傳 ZIP 檔案後,系統會將該佈景主題新增至 Shopify 管理介面的 Themes 頁面。
步驟:
電腦版
在您的 Shopify 管理介面中,前往網路商店 > 佈景主題。
在「草稿佈景主題」區段中,點擊「匯入佈景主題」>「上傳 zip 檔案」。
在匯入佈景主題對話方塊中,按一下選擇檔案,選取您要上傳的 ZIP 檔案。
按一下上傳。
行動版
在Shopify 應用程式中,點選
圖示。
在銷售管道區段,點選網路商店。
點選管理佈景主題。
在「草稿佈景主題」區段中,點選「匯入佈景主題」>「上傳 zip 檔案」。
在匯入佈景主題對話方塊中,點選選擇檔案,選取您要上傳的 ZIP 檔案。
點選上傳。
切換佈景主題
新增佈景主題至商店後,它們會顯示在 Shopify「佈景主題」頁面的「草稿佈景主題」區段中。您可以透過將新佈景主題 發布 到網路商店來進行切換。發布新的佈景主題後,您的舊佈景主題依然會保留在草稿佈景主題中 (如果想要,您也可以切換回去)。
若您手動更新佈景主題,更新版本的佈景主題會顯示在草稿佈景主題中做為獨立版本。切換到更新版本時,舊版佈景主題依然會保留在草稿佈景主題中。若要瞭解詳情,請參閱 更新佈景主題。
準備切換佈景主題
將佈景主題新增至草稿佈景主題後,您可以在發布前進行自訂。這是在取代現有佈景主題之前,檢閱新佈景主題並配合商家需求調整設定和內容的好機會。您也可以在多個已準備好的佈景主題之間進行切換,且無須重新進行設定。
切換至新佈景主題時,商店的商品、商品系列、選單、頁面與網誌文章都不會變更或刪除,因為這些項目是在 Shopify 管理介面中獨立於佈景主題進行管理。不過,透過佈景主題編輯器、佈景主題程式碼編輯器與語言編輯器管理的內容與設定,皆為您上傳的每個佈景主題及其版本所獨有。
您的網路商店中下列部分與佈景主題相關。您欲使用的每個佈景主題都必須分別自訂這些部分:
- 套用於商店中 sections and blocks 的設定
- 全域 theme settings (包括套用於您的網路商店的色彩與字型)
- Text and wording
- Code customizations,包括由 app 新增的程式碼自訂
- 可用的 theme templates
並非所有佈景主題都支援全部 Shopify 功能。請檢視該佈景主題的功能清單,以確保具備您需要的功能。
佈景主題預覽
您可以在網路商店的佈景主題區段預覽任何佈景主題。系統會在瀏覽器分頁中,搭配網路商店預覽列,於您的網路商店顯示正在預覽的佈景主題。
網路商店的預覽列會顯示關於您的佈景主題的下列資訊:
- 佈景主題名稱。
- 佈景主題狀態。已發布的佈景主題會顯示上線狀態;未發布的佈景主題則為草稿狀態。
您可以透過以下操作自訂預覽:
- 在
View as 區段中,您可以選取不同的國家/地區或語言進行預覽。深入瞭解international markets與adding additional languages to your theme。
- 按一下
按鈕以share a preview of your theme。
- 按一下 關閉預覽 以關閉預覽並顯示您已發布的佈景主題。
- 按一下 編輯佈景主題,開啟佈景主題編輯器並自訂佈景主題。
- 按一下預覽列的上方區域即可將其收合。您也可以再次按一下將其展開。
與他人分享佈景主題預覽
如果您的網路商店即將上線,或打算透過發布新的佈景主題變更商店,您可以分享佈景主題的預覽,向他人徵詢意見回饋。
您可以建立一個連結,讓其他人存取您在 Shopify 管理介面中新增的任何佈景主題的預覽。佈景主題不需發布也能分享。
佈景主題預覽分為兩種類型:
- 訪客預覽:任何持有該網址的人都能看到,不需要驗證。這類預覽會在建立該網址後 2 天過期。訪客預覽的網址採用以下格式:
https://<token>-<shop_id>.shopifypreview.com。 - 商家預覽:商家預覽需要管理介面驗證,且可存取結帳頁面。這類預覽會在建立該網址後 30 天過期。商家預覽的網址會採用您的主要網域格式並附加權杖參數。
在佈景主題上按一下 預覽 時,商家預覽的網址會顯示在您瀏覽器的位址列。若要建立訪客預覽連結以分享給他人,請在預覽列中按一下 按鈕。您可以不限次數建立新的連結,建立新連結不會影響舊的預覽連結。
步驟:
電腦版
在您的 Shopify 管理介面中,前往網路商店 > 佈景主題。
在要分享的佈景主題上,按一下
按鈕開啟動作選單,然後按一下 預覽。
選用:選取不同的國家/地區、語言或兩者,以變更預覽。
按一下
按鈕,將連結複製到您的剪貼簿。
行動版
在Shopify 應用程式中,點選
圖示。
在銷售管道區段,點選網路商店。
點選管理佈景主題。
在要分享的佈景主題上,點選
按鈕以開啟動作選單,然後點選 預覽。
選用:選取不同的國家/地區、語言或兩者,以變更預覽。
點選
,將連結複製到您的剪貼簿。
佈景主題預覽疑難排解
各種情況可能導致您的佈景主題預覽或預覽列無法正確顯示。若您查看本指南的步驟後仍遇到佈景主題相關問題,可能需要聯絡您的佈景主題支援團隊。深入瞭解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。