新增、預覽和購買佈景主題
為了協助您快速上手,當您開設 Shopify 帳號時,管理介面的「佈景主題」頁面會設定好預設佈景主題。若要為網路商店自訂不同的佈景主題,您需要新增佈景主題至管理介面中。
您可以用下列任何方式新增佈景主題:
- 您可以用自己的語言描述您的業務,並使用人工智慧 (AI) 產生免費的個人化佈景主題。
- 你可以在Shopify 管理介面中新增免費佈景主題。
- 您可以在Shopify Theme Store 中試用付費佈景主題、預覽任何佈景主題,然後使用佈景主題編輯器自訂設定。您需要先購買佈景主題,才能將其發佈到您的網路商店。
- 如果您的電腦中已有佈景主題的 ZIP 檔,即可上傳檔案。
如果您是開發人員,或與 Shopify 合作夥伴或代理商合作,您也可以以下列方式為商店新增佈景主題:
- 您可以使用 Shopify GitHub 整合功能,將 GitHub 託管的佈景主題新增到您的商店。
- 您可以使用 Shopify CLI將佈景主題推送至您的商店。
您可以在帳號新增多個佈景主題,以便試用任何新版佈景主題、保留已發布的佈景主題的季節性版本,或是對已發布的佈景主題副本進行變更測試。您可以預覽這些佈景主題,但任何時候都只能發布一個佈景主題。在您切換至新版佈景主題後,仍可以在 Shopify 的「佈景主題」頁面上查看舊版佈景主題。
新增佈景主題後,您可以建立連結,以便與其他人分享已取消發布的佈景主題之預覽畫面。如果您希望在發布新佈景主題或開始經營網路商店前獲得意見回饋,這項功能就非常實用。您無法分享已發布的佈景主題之預覽畫面。
此頁面上
佈景主題資格要求
查看下列有關新增佈景主題至商店或組織的資格要求:
- 可新增的佈景主題數量上限視您的定價方案而定: - 使用 Shopify Starter 方案的商店只能新增 Spotlight 佈景主題。 - 使用 Basic、Shopify 和 Advanced 方案的商店和組織最多可以新增 20 個佈景主題。 - 使用 Shopify Plus 方案的商店和組織最多可以新增 100 個佈景主題。
如果您已達到方案的佈景主題數量上限,則需要先移除佈景主題,然後才能新增佈景主題。每個啟用的分店皆需取得佈景主題授權。
使用人工智慧 (AI) 產生免費的佈景主題
您可以從 Shopify 管理介面的「佈景主題」頁面中,使用人工智慧 (AI) 產生免費的個人化佈景主題。Shopify 團隊會提供免費佈景主題的自訂項目協助。
您可以從 Shopify 管理介面的「佈景主題」頁面中,使用人工智慧 (AI) 產生免費的個人化佈景主題。Shopify 團隊會提供免費佈景主題的自訂項目協助。
步驟如下:
電腦版
iPhone
在 Shopify 應用程式中,點選「
」圖示。
在「銷售管道」區段中,點選「網路商店」。
點一下**「管理佈景主題」**。
在頁面底部附近的「在幾秒鐘內設計您的商店」區段中說明您的業務,然後點選「產生佈景主題」以產生最多 3 個免費的個人化佈景主題。
點選您感興趣的佈景主題,並點選「試用佈景主題」將佈景主題套用到您的商店。
該佈景主題隨即會新增到管理介面中「佈景主題」頁面的「佈景主題庫」區段。
Android
在 Shopify 應用程式中,點選「
」按鈕。
在「銷售管道」區段中,點選「網路商店」。
點一下**「管理佈景主題」**。
在頁面底部附近的「在幾秒鐘內設計您的商店」區段中說明您的業務,然後點選「產生佈景主題」以產生最多 3 個免費的個人化佈景主題。
點選您感興趣的佈景主題,然後點選「試用佈景主題」將佈景主題套用到您的商店。
該佈景主題隨即會新增到管理介面中「佈景主題」頁面的「佈景主題庫」區段。
從管理介面新增免費佈景主題
Shopify 開發的免費佈景主題Shopify 支援免費佈景主題的自訂項目協助。
Shopify 開發的免費佈景主題Shopify 支援免費佈景主題的自訂項目協助。
步驟如下:
電腦版
iPhone
在 Shopify 應用程式中,點選「
」圖示。
在「銷售管道」區段中,點選「網路商店」。
點一下**「管理佈景主題」**。
在頁面底部附近的「 熱門免費佈景主題 」區段中,查看 Shopify Theme Store 的熱門免費佈景主題,或點選「造訪 Theme Store」來瀏覽所有可用的佈景主題。
點選 Shopify Theme Store 中的佈景主題名稱,以查看該佈景主題的詳細資訊。
點選佈景主題的「新增」按鈕。該佈景主題隨即會新增到管理介面中「佈景主題」頁面的「佈景主題庫」區段。
Android
在 Shopify 應用程式中,點選「
」按鈕。
在「銷售管道」區段中,點選「網路商店」。
點一下**「管理佈景主題」**。
在頁面底部附近的「 熱門免費佈景主題 」區段中,查看 Shopify Theme Store 的熱門免費佈景主題,或點選「造訪 Theme Store」來瀏覽所有可用的佈景主題。
點選 Shopify Theme Store 中的佈景主題名稱,以查看該佈景主題的詳細資訊。
點選佈景主題的「新增」按鈕。該佈景主題隨即會新增到管理介面中「佈景主題」頁面的「佈景主題庫」區段。
試用 Shopify Theme Store 的付費佈景主題
您可以先在 Shopify 管理介面中預覽佈景主題,再決定是否要購買付費佈景主題。您可以使用佈景主題編輯器自訂所預覽的佈景主題,例如使用品牌的顏色、樣式和產品變更佈景主題。若您購買佈景主題,則系統會儲存您所做的任何自訂內容。
您一次最多能預覽 19 個付費佈景主題,這可讓您在購買之前,先比較不同的佈景主題。您正在試用的付費佈景主題會有「佈景主題試用」標籤。
若要取得付費佈景主題的支援服務,請聯絡佈景主題開發人員。
步驟如下:
- 造訪 Shopify Theme Store 並選擇一個付費佈景主題。
- 點擊「試用佈景主題」,來為您的網路商店新增佈景主題。
- 在您的Shopify 管理介面 中,點擊「網路商店」>「佈景主題」。
- 在「佈景主題庫」區段中,點按欲預覽之佈景主題旁的「
」按鈕,以開啟動作選單。
- 點擊「預覽」。
您也可以自訂正在預覽的佈景主題。如果您對佈景主題感到滿意,即可購買佈景主題。系統會儲存您對佈景主題做的任何自訂內容。
購買 Shopify Theme Store 的佈景主題
使用者必須具備以下所有商店層級權限,才能從 Shopify Theme Store 購買佈景主題:
- 佈景主題
- 管理並安裝應用程式和管道
- 核准應用程式收費
您在網路商店試用了付費佈景主題後,即可選擇購買。您只能將購買的佈景主題發布到您的網路商店。透過 Shopify Theme Store 購買佈景主題後,該佈景主題會獨家授權給購買時所用的商店。如果想在不同的商店中使用您的佈景主題,您可能有資格轉移佈景主題。
付費佈景主題是由第三方開發人員打造。第三方佈景主題的一般支援服務和更新,由佈景主題開發人員提供。如果需要進階自訂,但沒有使用 HTML、CSS 和 JavaScript 開發網站的經驗,請考慮聘僱 Shopify 合作夥伴。
步驟如下:
在 Shopify 管理介面中,前往「網路商店」>「佈景主題」。
點按「新增佈景主題」>「造訪 Theme Store」。
搜尋要購買的佈景主題,然後按一下「試用佈景主題」。
在「佈景主題庫」區段中,點擊欲購買之佈景主題的「購買」,以開始進行交易。
從您的電腦上傳佈景主題檔案
如果您的電腦中已有佈景主題的 ZIP 檔案,您可以將該檔案上傳至 Shopify 管理介面中的「佈景主題」頁面。
在上傳檔案之前,請確認您已將佈景主題檔案壓縮為 ZIP 檔。
上傳 ZIP 壓縮檔後,系統會將佈景主題新增至您 Shopify 管理介面的佈景主題頁面。
步驟如下:
電腦版
在 Shopify 管理介面中,前往「網路商店」>「佈景主題」。
在「佈景主題庫」區段中,點按「新增佈景主題」>「上傳 zip 檔」。
在「上傳佈景主題」對話方塊中,點按「選擇檔案」來選取要上傳的 ZIP 檔。
按一下「上傳」。
iPhone
在 Shopify 應用程式中,點選「
」圖示。
在「銷售管道」區段中,點選「網路商店」。
點一下**「管理佈景主題」**。
在「佈景主題庫」區段中,點選「新增佈景主題」>「上傳 zip 檔」。
在「上傳佈景主題」對話方塊中,點選「選擇檔案」來選取要上傳的 ZIP 檔。
點選上傳。
Android
在 Shopify 應用程式中,點選「
」按鈕。
在「銷售管道」區段中,點選「網路商店」。
點一下**「管理佈景主題」**。
在「佈景主題庫」區段中,點選「新增佈景主題」>「上傳 zip 檔」。
在「上傳佈景主題」對話方塊中,點選「選擇檔案」來選取要上傳的 ZIP 檔。
點選上傳。
切換佈景主題
在您將新版佈景主題新增至商店後,這些佈景主題會顯示在 Shopify「佈景主題」頁面的「佈景主題庫」區段中。若要切換佈景主題,您可以將新版佈景主題發布至網路商店。在您發布新版佈景主題後,仍可從佈景主題庫中存取舊版佈景主題,而您也能隨時選擇切換回舊版佈景主題。
如果您是手動更新佈景主題,則更新版的佈景主題就會在佈景主題庫中顯示為另一個獨立版本。在您切換為更新版後,仍可以在佈景主題程式庫中存取舊版佈景主題。若要瞭解詳情,請參閱「更新佈景主題」。
準備切換佈景主題
佈景主題新增至您的佈景主題庫後,您可以開始量身訂作然後再發佈。這是一個好機會,讓您在取代現有的佈景主題之前,先檢視新佈景主題、調整設定及內容,以反映您的商店特色。您也可以在先行準備好的多個佈景主題之間切換,而不必重新設定。
您改用新的佈景主題時,系統不會變更或刪除商店的商品、商品系列、選單、頁面和網誌文章,因為在管理介面中,這些內容與佈景主題分開管理。不過,使用佈景主題編輯器、佈景主題程式碼編輯器以及語言編輯器管理的內容和設定,則專屬於您上傳的每個佈景主題和佈景主題版本。
您的網路商店有以下項目與佈景主題相關聯。您必須為想要使用的每個佈景主題,自訂網路商店的這些項目:
並非所有的佈景主題都支援 Shopify 的所有功能。您應檢閱佈景主題的功能清單,以確保得到您所需的功能。
佈景主題預覽
您可以在網路商店的佈景主題區段預覽任意佈景主題。預覽功能會在瀏覽器分頁中藉由網路商店預覽列顯示您在網路商店預覽的佈景主題。
網路商店預覽列會顯示下列關於您佈景主題的資訊:
- 佈景主題名稱。
- 佈景主題的狀態。已發布的佈景主題為「當前」狀態。未發布的佈景主題為「草稿」狀態。
您可以透過下列動作自訂預覽功能:
- 您可以在**
「檢視方式」**區段選取不同的國家/地區或語言,然後再預覽。進一步瞭解國際市場的資訊,並為您的佈景主題新增其他語言。
- 點擊
按鈕即可分享佈景主題預覽。
- 點擊關閉預覽即可關閉預覽並顯示您已發布的佈景主題。
- 點擊自訂佈景主題即可開啟佈景主題編輯器並自訂佈景主題。
- 點擊預覽列頂端附近即可收合。您可以再次點擊將其展開。
與他人分享佈景主題預覽
如果您即將開始經營網路商店或計畫透過發布新的佈景主題來變更商店,那麼您可以分享佈景主題預覽以取得其他人的意見回饋。
您可以建立連結,讓其他人可以使用此連結來存取您在 Shopify 管理介面新增的佈景主題的預覽。佈景主題無需發布即可與他人分享。
預覽連結可讓他人瀏覽您的網路商店,但無法存取結帳頁面。預覽連結建立後 2 天內為有效。您可以視需要隨時建立新連結,且不會影響舊的預覽連結。
步驟如下:
電腦版
在 Shopify 管理介面中,前往「網路商店」>「佈景主題」。
針對要分享的佈景主題,點按「
」按鈕以開啟動作選單,然後點按「預覽 」。
選用:選取不同的國家/地區、語言或同時選取以變更預覽。
點擊
按鈕以將其複製到剪貼簿。
iPhone
在 Shopify 應用程式中,點選「
」圖示。
在「銷售管道」區段中,點選「網路商店」。
點一下**「管理佈景主題」**。
針對要分享的佈景主題,點選「
」按鈕以開啟動作選單,然後點選「預覽 」。
選用:選取不同的國家/地區、語言或同時選取以變更預覽。
點選
以將其複製到剪貼簿。
Android
在 Shopify 應用程式中,點選「
」按鈕。
在「銷售管道」區段中,點選「網路商店」。
點一下**「管理佈景主題」**。
針對要分享的佈景主題,點選「
」按鈕以開啟動作選單,然後點選「預覽 」。
選用:選取不同的國家/地區、語言或同時選取以變更預覽。
點選
以將其複製到剪貼簿。
佈景主題預覽疑難排解
某些情況可能會導致佈景主題預覽或佈景主題預覽列無法正確顯示。如果在查看本指南的步驟後您的佈景主題仍然有問題,則必須聯絡佈景主題的支援團隊。深入瞭解如何取得對佈景主題的支援。
預覽列會顯示在您的線上商店中
這通常是因為佈景主題向您的網路商店網址錯誤新增了名為「preview_theme_id
」的參數。此參數僅供內部預覽,但網址中若有該參數,則會強制向所有訪客顯示預覽列。
造訪網路商店,檢查瀏覽器網址列中的 preview_theme_id
參數。您也可以要求顧客將預覽列顯示的連結位址轉寄給您。
如果網路商店網址中包含 preview_theme_id
參數,請聯絡佈景主題的開發人員尋求支援並說明問題。
若要編輯佈景主題程式碼,可以在佈景主題檔案中搜尋 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 要求的快取。
預覽列完全消失
如果預覽佈景主題時未顯示預覽列,有可能是因為自訂程式碼或第三方應用程式修改了佈景主題的預設指令碼。
這可能是因影響 Liquid 物件的修改引起的,這類物件通常位於佈景主題的版面配置資料夾當中,佈景主題的 `theme.liquid` 檔案內。預覽列指令碼需要
物件才能正確載入。修改此物件可能會使指令碼無法載入,進而導致預覽列消失以及其他 Shopify 功能和應用程式的問題。
您可以查看佈景主題和應用程式以找出修改來源。瞭解佈景主題的疑難排解。