排解線上商店佈景主題問題

圖片的顯示可能與您的預期不同，原因可能是圖片本身不適合您在主題中的使用情境。請確認您使用的圖片之 圖片尺寸 是否正確。以下為上傳不相容圖片時可能發生的常見顯示問題：

• 如果頁首看起來較大，而標誌圖片比您預期更小，可能是標誌圖片檔中有留白。圖片檔的留白會讓標誌顯示較小，也可能讓頁首因留白而看起來較大。請編輯圖片檔，確保已在標誌周圍裁切，且沒有留白。
• 如果素材輪播的圖片被裁切，這是設計使然，目的是確保圖片在行動裝置與電腦版的顯示一致。由於行動裝置螢幕的內容顯示更小，若直接縮小內容，許多細節會遺失；因此會透過裁切來確保細節不會遺失。直向圖片（高度大於寬度）在電腦版也會占用大量空間，因此素材輪播圖片設有最大高度。您可以 加入焦點 到輪播圖片上，以確保焦點始終位於輪播圖片的中央。

  自動調整高度選項：許多 Shopify 佈景主題提供素材輪播的自動調整高度設定，會依第一張圖片投影片調整輪播高度，以減少在不同螢幕尺寸的裁切。此功能在目前支援的所有由 Shopify 開發的佈景主題皆可使用。

• 若 GIF 圖片透過富文本編輯器加入至線上店面（例如產品說明或網誌文章）後未正確顯示，可能是圖片尺寸造成。您可以在富文本編輯器中點選該 GIF，然後按一下 編輯圖片。在 圖片尺寸 下拉式選單中，選取 原始大小。接著，拖曳圖片四角向內縮小或向外放大，以調整 GIF 的尺寸。
• 如果您在線上店面看到的圖片與原始圖片相比有明顯色偏，可能是圖片未使用標準 sRBG 色彩。要修正色彩變化，請在相片編輯 app 中將檔案儲存為 sRBG。常見用語包括「網頁最佳化」、「為 Web 調整圖片」或「另存為 Web」。深入瞭解 色彩設定檔。
• 如果商品系列頁面的產品圖片未對齊，您可能需要調整產品圖片檔的長寬比，使高度與寬度比例一致，然後重新上傳產品圖片。您也可以使用 來自 Shopify App Store 的圖片編輯 app。

請依您的情況參考以下問題說明與疑難排解步驟：

• 產品缺漏：如果您的商品未出現在線上店面，請在 Shopify 管理介面的商品「發布」區段檢查「狀態」與「銷售管道」。請確認商品狀態為「啟用」，且商品已可在「線上商店」販售。
• 商品系列缺漏：如果您的商品系列未出現在線上店面，請在 Shopify 管理介面的該商品系列「發布」區段檢查「銷售管道」。請確認商品系列已可在「線上商店」販售，且已將該商品系列加入您的選單。
• 商品系列有顯示但商品缺漏：如果商品系列有顯示，但有部分商品缺漏，請檢查您在 選單 設定中使用的標籤篩選。請確認「以標籤篩選商品系列」欄位中沒有會導致商品不顯示的標籤。
• 幣別不正確：如果商品或商品系列的幣別顯示有誤，請在「設定」>「一般」的「商店預設」區段檢查「幣別顯示」，確認沒有額外的程式碼。深入瞭解 向顧客顯示幣別的格式設定。
• 部分商品顯示不同：如果部分商品或商品系列的顯示與其他項目不同，請在 Shopify 管理介面檢查這些商品或商品系列所套用的「佈景主題範本」。
• 無法編輯產品或商品系列範本：如果預設的產品或商品系列範本在佈景主題編輯器中呈現反灰且無法選取，您需要將至少 1 件產品或商品系列設為可供「線上商店」銷售管道使用。如果沒有可用來預覽變更的產品或商品系列，您將無法編輯這些預設範本。深入瞭解變更商品系列的可用性以及在銷售管道中設定產品供貨情況。

如果翻譯內容在線上店面顯示不正常或缺漏，可能是翻譯已過時或缺少該內容的翻譯。內容也可能位於某個市場的特定範本中。每次以預設語言新增內容時，請記得再次執行自動翻譯，或手動加入新翻譯。

翻譯內容可能有以下狀態：

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

檢視翻譯內容時，請更新所有未翻譯或已過時的項目，翻譯內容就能正確顯示。

深入瞭解 翻譯與在地化您的商店。

如果您的線上店面與佈景主題編輯器顯示的資訊不一致，請檢查您正在編輯的佈景主題範本。您可能需要編輯並更新佈景主題範本，才能顯示正確資訊。

市場覆寫可讓您為不同市場建立不同的線上店面，並顯示翻譯後的內容。您在更新時，可能不小心在特定市場或 B2B 中進行了編輯。請在佈景主題編輯器中使用市場下拉式選單找出該內容，確認它位於正確的市場。

瞭解詳情：market overrides。

Shopify 佈景主題商店中提供的所有佈景主題皆為回應式佈景主題，也就是會依螢幕尺寸自動調整。您可在佈景主題編輯器中切換不同的螢幕尺寸檢視，確認頁面與圖片是否正確顯示。瞭解詳情：viewing different screen sizes in the theme editor。

許多區段與區塊都提供可自訂的行動裝置設定。舉例來說，您可在 Related products section 中設定行動裝置的欄數。您可以逐一檢查各範本的行動裝置相關區段設定，以排解在行動版螢幕尺寸上的任何顯示問題。

為了確保在各種螢幕尺寸上都具備無障礙功能，某些佈景主題功能在行動版與電腦版上的顯示可能不同。以素材輪播為例，在電腦版螢幕尺寸下，文字可能會以疊加層方式顯示在圖片上，並搭配圖片顏色透明度或文字陰影；但在行動版螢幕尺寸下，文字可能改為顯示在輪播下方。這是為了提升可讀性的設計型無障礙功能，讓任何螢幕尺寸都能清楚閱讀。如果改以疊加層呈現文字，行動版上的文字會變得很小，難以閱讀。

如果您在行動裝置上檢視店面時，精選商品系列區段或商品系列頁面出現尺寸不一或無法對齊，可能是因為長寬比不一致。像商品系列或精選商品系列內顯示的產品圖片等圖片網格，會依螢幕尺寸自動調整。如果網格中的圖片長寬比不一致，顯示效果就可能因螢幕尺寸而異。正方形的產品圖片 2,048 px × 2,048 px 通常最適合用於產品網格。請將圖片調整為一致的長寬比，以在各種螢幕尺寸上獲得最佳化效果。瞭解詳情：image aspect ratio。

有時您在富文本編輯器中加入的 HTML 會與佈景主題程式碼衝突。若問題只出現在單一頁面，例如產品頁面、一般頁面或網誌文章，原因可能是多餘的 HTML。這種情況有時會因從其他網站複製貼上文字而一併帶入。

檢視 HTML 程式碼

您可以在富文本編輯器中檢視 HTML 程式碼。

步驟：

1. 在管理介面中前往該頁面。
2. 點選 顯示 HTML 按鈕以檢視 HTML 程式碼。
3. 找出可能導致顯示問題的 HTML 程式碼並移除。
4. 點選 儲存。

清除格式

您可以選取部分文字並清除其 HTML 格式。

步驟：

1. 在管理介面中前往該頁面。
2. 選取格式有問題的文字。
3. 點選 🚫 按鈕。
4. 點選 儲存。

瞭解詳情：rich text editor。

如果您的線上店面包含會將使用者重新導向至與您的商店無關的網址的程式碼，請在您造訪佈景主題編輯器時確認該重新導向已停用。

例如，可能會在店面加入這類重新導向，依據顧客所在位置將其導向不同的 Shopify 商店。這類重新導向程式碼可能存在於您的佈景主題或您安裝的 app 中。

為了確保重新導向不會干擾編輯器體驗，請在 JavaScript 中使用 window.Shopify.designMode 變數，於您造訪佈景主題編輯器時停用重新導向。當線上店面在編輯器中載入時，該變數會設為 true，否則為 false。

如果您有可收合區塊或其他佈景主題區塊，在所有產品頁面上都顯示相同內容，您需要搭配中繼欄位設定動態來源。這種情況常見於商家把商品專屬資訊（例如成分或保養說明）新增到某個商品後，卻顯示在所有商品上。

可收合區塊在所有商品上顯示相同文字

當您直接在佈景主題編輯器的可收合區塊中新增內容時，該內容會顯示在所有產品頁面上。若要顯示產品專屬內容，您需要使用搭配中繼欄位的動態來源：

1. 在 Shopify 管理介面中，前往設定 > 中繼欄位 > 商品。
2. 點選 新增定義。
3. 輸入中繼欄位的名稱，然後點選選擇內容類型。
4. 選取 文字 與 多行文字。
5. 點選 儲存。
6. 在管理介面中開啟某個產品頁面，並捲動到頁面底部的中繼欄位區段。
7. 將商品專屬內容新增到您建立的中繼欄位。
8. 在佈景主題編輯器中，前往產品範本，找到 Collapsible row 區段。
9. 在 Row content 設定中，點選 按鈕。
10. 從可用選項中選取您的中繼欄位。
11. 儲存變更。

之後每個商品在中繼欄位有填寫時，會顯示各自的內容；若該商品的中繼欄位為空，則不會顯示任何內容。

瞭解詳情：displaying metafields on your online store 與 using metafields and metaobjects with dynamic sources。

如果佈景主題的程式碼有語法錯誤，您的 theme editor 會顯示 HTML error found 或 Theme error 警示訊息。錯誤訊息會顯示包含錯誤的 Liquid 檔案。

若存在有誤的 HTML，可能會顯示 The theme you're looking for couldn't be found 警示訊息。頁面可能因下列原因而無法在佈景主題編輯器中載入：

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

您可以在佈景主題程式碼中找出程式碼變更並加以修正。如果您可以識別受影響的現有檔案，便可在程式碼編輯器的 時間軸 檢視畫面中將其還原為可用的先前版本。

步驟：

1. 按一下錯誤訊息中連結的 .liquid 區段檔案，或檢視檔案的近期變更。系統會帶您前往 編輯 HTML/Cascading Style Sheets (CSS) 頁面，並在程式碼編輯器中開啟該檔案。
2. 瀏覽檔案中的程式碼，嘗試找出不正確的 HTML 或 Liquid。程式碼編輯器會以紅色標示可能的語法錯誤。常見問題如下：
   • 多餘的關閉 HTML 標籤，例如有關閉的 </div>，卻沒有對應的開啟 <div>
   • 未關閉的 HTML 標籤，例如有開啟的 <div>，卻沒有對應的關閉 </div>
   • 格式不正確的 HTML 標籤，例如 <div class="my-class" 結尾缺少 >
   • Liquid 程式碼格式不正確
   • 佈景主題的程式碼片段檔案中含有錯誤的 HTML
3. 找到問題後，請修正佈景主題檔案中的程式碼。如果您使用程式碼編輯器的 時間軸 檢視畫面選取先前版本並「還原內容」，整個檔案內容便會遭到取代。若您可能想保留任何變更，請先將目前的檔案內容複製到安全的位置。
4. 點選 儲存。
5. 按一下 編輯佈景主題 返回佈景主題編輯器，並確認錯誤訊息已消失。
6. 前往您的線上店面，確認顯示是否符合預期。

「Exceeded maximum number of unique handles」錯誤

如果您的首頁出現 Liquid 錯誤訊息，例如「Exceeded maximum number of unique handles for all_products」，通常代表您在首頁加入了太多「精選商品」區段；大多數佈景主題在超過 20 個區段時就會觸發。

要解決此問題：

1. 在 Shopify 管理介面中，前往 線上商店 > 佈景主題。
2. 找到目前使用的佈景主題，然後按一下 編輯佈景主題。
3. 前往您的首頁。
4. 移除部分「精選商品」區段，以符合佈景主題的限制。
5. 建議改用「精選商品系列」區段，可更有效率地顯示多項商品，並提升商店效能。

多數佈景主題的頁尾預設會顯示付款圖示，讓顧客知道您可接受哪些付款方式。若佈景主題的頁尾未顯示付款圖示，您可以檢查以下項目：

1. 在佈景主題編輯器中，前往 頁尾 區段，確認 顯示付款圖示 設定已啟用。
2. 在 Shopify 管理介面中，前往 設定 > 付款，確認至少有一種啟用中的付款方式。有些付款方式可能需要先完成帳戶設定，圖示才會顯示。
3. 如果您使用的是第三方付款閘道，付款圖示可能會因為平台限制而無法顯示。

如果您已確認這些設定，但付款圖示仍未顯示，您可能需要 get support for your theme。