排解網路商店佈景主題的疑難問題

有許多不同情況可能會導致佈景主題未按預期顯示，從而造成元素消失或無法適當運作以及各種其他顯示問題。這可能是因為第三方或應用程式程式碼與佈景主題發生衝突，或自訂程式碼自訂衝突所造成。您的 Shopify 管理介面中也存在一些需要調整的設定。例如，您必須查看翻譯內容、商品、商品系列、導覽或您的市場。

若查看本指南的步驟後您的佈景主題仍然有問題，則您可能需要聯絡佈景主題的支援團隊。深入瞭解如何取得佈景主題支援服務。

找到問題的根源

找到佈景主題的問題根源，是解決問題的第一步。請執行下列步驟來協助找出問題根源：

1. 建議您造訪 Shopify 狀態頁面，以瞭解可能影響您店面的任何已知問題。如果未列出任何類似問題，請進一步調查該問題。

2. 問題可能發生在本機。本機問題通常是因為裝置、瀏覽器設定或網際網路連線問題所造成。請執行下列步驟以確定這不是本機問題，而且在其他裝置、瀏覽器或網際網路連線上也會出現相同問題：

   • 清除瀏覽器快取和 Cookie。如果您使用 Shopify 帳號登入 Shopify 說明中心，清除瀏覽器快取和 Cookie 會讓您登出帳號。如果您使用虛擬說明中心助理，則清除瀏覽器快取和 Cookie 會重設您的聊天記錄並讓您登出帳號，您需要與虛擬說明中心助理重新開始聊天對話。
   • 嘗試使用無痕模式、其他裝置或 Shopify 應用程式。
   • 嘗試使用行動數據或其他網際網路連線。
   • 確定瀏覽器為最新版本。
   • 確定瀏覽器未設定為封鎖所有 Cookie，因為如果沒有 Cookie，部分應用程式可能無法正確顯示。
   • 確定您未使用虛擬私人網路 (VPN) 或啟用了封鎖 Shopify 的防火牆。

3. 如果您在其他裝置、瀏覽器或網際網路連線上仍遇到相同問題，表示這不是本機問題而且可以複製。因此下一步是在另一個佈景主題上重現該問題，藉此找到問題根源。請造訪 Theme Store 並安裝新版佈景主題，然後測試最新版的佈景主題是否仍然存在該問題。安裝其他佈景主題 (例如免費 Shopify 佈景主題) 也是一種很好的做法，因為可以確定問題是由特定佈景主題引起的，還是所有佈景主題都有相同的問題。測試其他佈景主題後，請根據問題的呈現方式，參考以下建議的後續步驟：

   • 如果問題只出現在當前的佈景主題以及佈景主題的更新和非自訂版本上，您必須取得佈景主題的支援服務。
   • 如果問題只出現在當前的佈景主題上，則可能是某些佈景主題程式碼導致問題。如果您最近更新了佈景主題程式碼，請撤回至舊版佈景主題程式碼。如果您並未修改佈景主題的程式碼，建議查看佈景主題設定。例如，若未顯示「加入購物車」按鈕，請查看佈景主題設定中「按鈕」的顏色，並確保使用不同且對比鮮明的顏色。
   • 如果所有佈景主題都存在該問題，則可能是因為您的 Shopify 管理介面設定、應用程式或其他問題所造成。

4. 問題可能來自應用程式。如果您最近安裝或更新了任何會影響店面的應用程式，則需要暫時解除安裝該應用程式。如果將應用程式解除安裝後問題不再出現，建議您聯絡應用程式開發人員支援團隊以取得更多協助，讓應用程式正確顯示在店面中。深入瞭解如何取得應用程式的協助。如果解除安裝應用程式後問題仍然存在，則該應用程式並非問題的根源。

圖片未正確顯示

圖片的顯示效果與您期望的不同，這可能是因為圖片本身與您在佈景主題中使用圖片的目的不相容所造成。確保您所使用的圖片尺寸正確無誤。請查看以下清單，瞭解上傳不相容圖片時可能發生的常見顯示問題：

• 如果您的頁首在桌上型電腦上的顯示範圍較廣，而標誌圖片在行動裝置上的顯示範圍比您預期的要小，這可能是因為標誌圖片檔案中的空格所造成。請編輯圖片檔案，確保沿著標誌周圍裁剪圖片，且圖片中沒有任何空格。
• 如果素材輪播圖片經過裁剪，則是基於設計考量，用以確保圖片在行動裝置與桌上型電腦上顯示一致。由於內容在行動裝置螢幕上的顯示要小得多，因此縮小內容可能會失去很多商品細節。反之，裁剪內容則可確保商品細節的完整性。高度大於寬度的直向圖片，也會在桌上型電腦佔用大量空間。這是素材輪播圖片具有高度上限的原因。您可以為素材輪播圖片新增焦點，以確保焦點一律為素材輪播圖片的中心。如果新增焦點沒有幫助，建議您找到適用於所有螢幕尺寸的圖片。深入瞭解素材輪播的最佳做法。
• 如果 GIF 圖片未正確顯示，且已使用 RTF 文字編輯器將該圖片新增至店面中 (例如在產品說明或網誌文章中)，則可能是因為圖片尺寸所造成。您可以在 RTF 文字編輯器中按一下 GIF，然後點按「編輯圖片」來更正此問題。在「圖片尺寸」下拉式選單中，選取「原始」尺寸。然後，您可以點按並向內或向外拖曳圖片的四個角，使圖片變小或變大，從而調整 GIF 的大小。
• 如果店面圖片的顏色與原始圖片明顯不同，則圖片可能未採用標準的紅綠藍 (sRBG) 顏色。若要修正此顏色變化，請在照片編輯應用程式中將檔案另存為 sRBG。常見術語包含「網站最佳化」、「調整網站圖片」或「儲存供網站使用」。深入瞭解色彩設定檔。
• 如果商品系列頁面上的產品圖片未對齊，您必須調整產品圖片檔案中的寬高比，使圖片具有相同的寬高比，然後重新上傳產品圖片。您也可以使用 Shopify App Store 中的圖片編輯應用程式來調整。

商品或商品系列未正確顯示

如果店面中缺少您的商品，請從 Shopify 管理介面前往商品的「發布」區段，然後查看「狀態」和「銷售管道」。請確定商品狀態為「啟用中」，且該商品在「網路商店」中可供購買。

如果店面中缺少您的商品系列，請從 Shopify 管理介面前往商品系列的「發布」區段，然後查看「銷售管道」。請確定該商品系列在「網路商店」中可供購買。您也需要確定商品系列已新增至「導覽」。

如果店面顯示了您的商品系列，但缺少商品，請在「導覽」設定中查看該商品系列的所有標籤篩選條件。確定「以標籤篩選商品系列」欄位中沒有任何可能會導致商品無法顯示的標籤。

如果商品或商品系列中的幣別未正確顯示，請從「設定」>「一般」前往「商店預設值」區段，然後查看「幣別顯示」以確定沒有任何其他程式碼。深入瞭解如何設定顧客看到的幣別格式。

如果某些商品或商品系列的顯示方式與其他商品或商品系列不同，您必須在 Shopify 管理介面中查看指派給商品或商品系列的「佈景主題範本」。

翻譯內容未正確顯示

如果翻譯內容未正確顯示或店面中缺少翻譯內容，表示該翻譯內容可能已過時或缺少該翻譯內容。內容也可能位於市場的特定範本中。每次以預設語言新增任何內容時，請務必再次執行自動翻譯或手動新增翻譯。

以下狀態適用於翻譯的內容：

• 已翻譯：該內容有可用的翻譯。
• 已過時：已更新預設語言的內容，但翻譯沒有反映任何更新內容。
• 未翻譯：此內容類型無翻譯。

查看翻譯內容時，請更新任何未翻譯或已過時的內容，翻譯內容應該就可以正確顯示。

深入瞭解如何翻譯並建立本地化商店內容。

佈景主題編輯器中的更新內容未顯示在店面上

如果您的店面和佈景主題編輯器未顯示相同資訊，請查看您所編輯的佈景主題範本。您必須編輯以更新佈景主題範本，藉此顯示正確的資訊。關聯式商店可讓您為不同市場建立不同的店面，並顯示翻譯內容。您可能會無意間在特定市場或 B2B 版本中更新內容。請使用佈景主題編輯器中的「內容」下拉式選單找出內容，確保其位在正確的市場。

深入瞭解關聯式商店。

RTF 文字編輯器

在 RTF 文字編輯器中新增的 HTML 程式碼有時會與佈景主題程式碼發生衝突。如果問題出現在單一頁面上，例如產品頁面、網誌文章或其他頁面，則可能是由於額外的 HTML 所造成。有時，這些內容可能是您從另一個網站複製和貼上文字時所新增。

查看 HTML 程式碼

您可以在 RTF 文字編輯器中查看 HTML 程式碼。

步驟如下：

1. 導覽至管理介面中的頁面。
2. 按一下「</> 顯示 HTML」按鈕以查看 HTML 程式碼。
3. 找出並移除任何可能導致顯示問題的 HTML 程式碼。
4. 點擊「儲存」。

清除格式

您可以標示部分文字並清除 HTML 格式。

步驟如下：

1. 導覽至管理介面中的頁面。
2. 標示格式有問題的文字。
3. 按一下「🚫」按鈕。
4. 點擊「儲存」。

深入瞭解 RTF 文字編輯器。

頁面正在重新導向至不支援的 URL

如果您店面包含的程式碼，會將使用者重新導向至沒有連結您商店的 URL，請驗證該重新導向功能已在您造訪佈景主題編輯器時停用。

舉例來說，店面可能會新增此類型的重新導向，以根據顧客位置，將其導向不同的 Shopify 商店。此類型的重新導向程式碼，可能存在於您安裝的佈景主題或應用程式中。

為確保重新導向不會干擾您的編輯體驗，請在 JavaScript 中參考 window.Shopify.designMode 變數的值，以在您造訪佈景主題編輯器時，停用該重新導向功能。在編輯器中載入店面時，此變數會設為 true，而編輯器未載入店面時，此變數則設為 false。

程式碼錯誤訊息

如果佈景主題程式碼含有語法錯誤，則佈景主題編輯器中將顯示 HTML error found 或 Theme error 警告訊息。該錯誤訊息會顯示包含錯誤的 Liquid 檔案。

HTML 損毀時，可能會顯示 The theme you're looking for couldn't be found 警告訊息。佈景主題編輯器無法載入頁面的原因很多，常見原因如下：

• 網路連線問題
• 佈景主題中有無效的 Liquid 程式碼。

您可以在佈景主題程式碼中找到變更的程式碼並修正程式碼，或將檔案還原到程式碼變更之前的內容。

步驟

1. 按一下錯誤訊息中連結的 .liquid 區段檔案，或查看檔案以瞭解最近的變更。系統會將您導向至「編輯 HTML/CSS 頁面」，並且在程式碼編輯器中開啟該檔案。

2. 瀏覽檔案中的程式碼，並嘗試找出無效的 HTML 或 Liquid。程式碼編輯器將以紅色顯示潛在的語法錯誤。常見問題包含：

   • 多餘的 HTML 結束標籤 (例如缺少開頭標籤的結束標籤 </div>) <div>
   • 多餘的未結束 HTML 標籤 (例如缺少結束標籤的開頭標籤 <div>) </div>
   • 格式錯誤的 HTML 標籤 (例如 <div class="my-class" 缺少 >
   • 格式錯誤的 Liquid 程式碼
   • 內含佈景主題程式碼片段檔案中損毀的 HTML

3. 找到問題後，請修正佈景主題檔案中的程式碼，或在「近期變更內容」中選取過去的版本以還原程式碼。

4. 點擊「儲存」。

5. 點擊「自訂」以返回佈景主題編輯器，並確認錯誤訊息已消失。

6. 導覽至您的店面，以確定顯示效果符合預期。