在线商店模板故障排除

图片的显示效果可能与您预期的不同，但这可能是因为图片本身与您在模板中的图片用途不兼容。请确认您使用的图片具有正确的图片尺寸。请查看以下列表，了解上传不兼容的图片时可能会出现的常见显示问题：

• 如果您的标头显示得比预期大，而 logo 图片显示得比预期小，则可能是因为 logo 图片文件中存在空白区域。此空白区域可能会导致 logo 显示得更小，而标头则会因此显得更大。请编辑图片文件，确认其已围绕 logo 进行了裁剪且没有任何空白区域。
• 如果您的幻灯片图片被裁剪，这是特意设计的，旨在确保图片在移动设备和台式电脑上显示效果一致。由于内容在移动设备屏幕上显示得小很多，因此缩小内容可能会导致大量细节丢失。因此，我们会对内容进行裁剪，以确保细节不会丢失。纵向图片（高度大于宽度）在台式电脑上也可能占用大量空间。因此，幻灯片图片设有最大高度。您可以 添加焦点 为您的幻灯片图片添加焦点，以确保焦点始终位于幻灯片图片的中心位置。

  自适应高度选项：许多 Shopify 模板都包含幻灯片的自适应高度设置，该设置可调整幻灯片高度以匹配第一张图片幻灯片，从而减少在不同屏幕尺寸上的裁剪。Shopify 开发的所有当前受支持的模板中均提供此功能。

• 如果 GIF 图片无法正常显示，并且它是通过富文本编辑器（例如在产品描述或博客文章中）添加到您的在线店面的，则可能是因为图片尺寸不合适。您可以通过以下方法更正此问题：在富文本编辑器中点击该 GIF，然后点击编辑图片。在图片尺寸下拉菜单中，选择原始尺寸。然后，您可以通过点击并向内拖动图片边角来调小 GIF，或向外拖动来调大 GIF，从而调整其大小。
• 如果您的图片在在线店面中显示的颜色与原始图片有明显差异，则您的图片可能未使用标准红绿蓝 (sRBG) 颜色。若要修复此颜色变化，请在照片编辑应用中将文件另存为 sRBG。相关常用术语包括“Web 优化”、“为 Web 调整图片”或“存储为 Web 所用格式”。详细了解颜色配置文件。
• 如果您产品系列页面上的产品图片未对齐，则您可能需要调整产品图片文件中的纵横比，使它们具有相同的高宽比，然后重新上传产品图片。您还可以使用 Shopify App Store 中的图片编辑应用。

请查看以下内容，了解您遇到的具体问题以及可帮助您进行问题排查的步骤：

• 产品缺失：如果您的产品未在在线店面中显示，则您可能需要检查 Shopify 后台中您产品的发布分区中的状态和销售渠道。请确认产品状态为可用，并且产品可用于在线商店。
• 产品系列缺失：如果您的产品系列未在在线店面中显示，则您可能需要检查 Shopify 后台中该产品系列的发布分区中的销售渠道。请确认该产品系列可用于在线商店，并且您的产品系列已添加到菜单中。
• 产品系列已显示但产品缺失：如果您的产品系列已显示但其中有产品缺失，则您可能需要检查 菜单 设置中产品系列的任何标签筛选器。请确认使用标签筛选产品系列字段中没有任何可能导致产品无法显示的标签。
• 货币不正确：如果您的产品或产品系列中的货币未正确显示，那么您可能需要查看设置 > 常规中商店默认值分区内的货币显示方式，以确认没有任何其他代码。详细了解如何设置向客户显示的货币格式。
• 部分产品的显示方式不同：如果部分产品或产品系列的显示方式与其他产品或产品系列不同，请检查 Shopify 后台中分配给这些产品或产品系列的模板。
• 无法编辑产品或产品系列模板：如果默认产品或产品系列模板在模板编辑器中呈灰色且处于不可选状态，则您需要至少使 1 个产品或产品系列在“在线商店”销售渠道中可用。如果不提供可用于预览更改的产品或产品系列，则无法编辑这些默认模板。参阅更改产品系列的供货情况和在销售渠道中设置产品供货情况，详细了解。

如果已翻译内容未正常显示或在您的在线店面中缺失，则可能是因为内容的翻译已过时或缺失。该内容也可能位于某个市场的特定模板中。每当您以默认语言添加任何新内容时，请记得再次运行自动翻译或手动添加新翻译。

以下状态可应用于已翻译内容：

• 已翻译：内容有可用的翻译。
• 已过时：默认语言中的内容已更新，但翻译未反映任何更新。
• 未翻译：此内容类型没有翻译。

在查看已翻译内容时，请更新任何未翻译或已过时的内容，之后您的已翻译内容应可正常显示。

详细了解翻译和本地化您的商店。

如果您的在线店面和模板编辑器显示的信息不一致，请检查您正在编辑的模板样式。您可能需要进行编辑以更新模板样式，从而显示正确的信息。

通过市场覆盖，您可以为不同市场创建不同的在线店面并显示已翻译的内容。您在进行更新时，可能无意中是在特定市场或 B2B 环境下操作。请在模板编辑器中使用市场下拉菜单找到相应内容，以确保其位于正确的市场中。

详细了解市场覆盖。

Shopify 模板商店中提供的所有模板都是响应式模板，这意味着模板会适应屏幕的尺寸。在模板编辑器中，您可以在编辑模板期间切换屏幕尺寸视图，以验证您的页面和图片是否正确显示。详细了解在模板编辑器中查看不同屏幕尺寸。

许多分区和区块都有您可以自定义的移动版设置。例如，您可以在 相关产品分区中设置移动设备上的列数。您可以查看每个模板的移动版相关分区设置，以排查移动设备屏幕尺寸上的任何显示问题。

为了确保模板在所有屏幕尺寸上都具有辅助功能，某些模板功能在移动设备上的显示方式可能与在台式电脑上有所不同。例如，在台式电脑屏幕尺寸上，您的幻灯片可能带有文本叠加层，文本通常以一定的图片颜色不透明度或文本阴影显示在图片上方。但是，在移动设备屏幕尺寸上，文本可能会显示在幻灯片下方。这是一项特意设计的辅助功能，旨在确保文本在任何屏幕尺寸上都清晰可读。如果文本改为叠加显示，那么它在移动设备上会显示得非常小，导致难以阅读。

如果在移动设备上查看您的在线店面时，您的特色产品系列分区或产品系列页面显示的尺寸不一致或未对齐，则可能是由于宽高比不一致所致。图片网格（例如在产品系列或特色产品系列中显示的产品图片）是为适应屏幕尺寸而构建的响应式网格。如果图片网格中图片的宽高比不一致，则其显示方式可能会因屏幕尺寸而异。2,048 x 2,048 像素的方形产品图片通常在产品网格中效果最佳。请更新您的图片，使其具有一致的宽高比，以便在所有屏幕尺寸上进行优化。详细了解图片宽高比。

有时，您在富文本编辑器中添加的 HTML 代码会与模板代码冲突。如果问题出现在单个页面上（例如产品页面、页面或博客文章），则可能是由于多余的 HTML 所致。这有时可能是从其他网站复制和粘贴文本时添加的。

查看 HTML 代码

您可以在富文本编辑器中查看 HTML 代码。

步骤：

1. 在您的后台中转到相应页面。
2. 点击 显示 HTML 按钮以查看 HTML 代码。
3. 找到可能导致显示问题的任何 HTML 代码并将其删除。
4. 点击保存。

清除格式

您可以选中文本的一部分并清除 HTML 格式。

步骤：

1. 在您的后台中转到相应页面。
2. 选中存在格式问题的文本。
3. 点击 🚫 按钮。
4. 点击保存。

详细了解富文本编辑器。

如果您的在线店面包含将用户重定向到与您的商店无关的 URL 的代码，那么当您访问模板编辑器时，请确认该重定向已被停用。

例如，此类重定向可能会添加到在线店面中，以便根据客户所在地点将其引导至不同的 Shopify 商店。此类重定向代码可能存在于您的模板或您安装的应用中。

为确认您的重定向不会干扰编辑器体验，请在访问模板编辑器时，使用对 JavaScript 中 window.Shopify.designMode 变量的引用来停用重定向。当在线店面在编辑器中加载时，此变量会设置为 true；否则会设置为 false。

如果您有在所有产品页面上都显示相同内容的可折叠区块或其他模板区块，则需要使用元字段设置动态资源。这种情况通常发生在商家为某个产品添加产品特定信息（例如成分或保养说明）但该信息却显示在所有产品上时。

可折叠区块在所有产品上都显示相同的文本

当您在模板编辑器中直接向可折叠区块添加内容时，该内容将显示在所有产品页面上。要显示特定于产品的内容，您需要使用包含元字段的动态资源：

1. 在 Shopify 后台中，转至设置 > 元字段 > 产品。
2. 点击添加定义。
3. 为您的元字段输入名称，然后点击选择内容类型。
4. 选择文本和多行文本。
5. 点击保存。
6. 在后台中转到产品页面，然后滚动到页面底部的元字段部分。
7. 将您的产品特定内容添加到您创建的元字段中。
8. 在模板编辑器中，转至产品模板并找到您的可折叠行分区。
9. 在行内容设置中，点击 按钮。
10. 从可用选项中选择您的元字段。
11. 保存您的更改。

现在，如果元字段已填写，则每个产品都会显示其自己的内容；如果该产品的元字段为空，则不会显示任何内容。

详细了解在您的在线商店中显示元字段和将元字段和元对象与动态资源结合使用。

如果您的模板代码中存在语法错误，则 模板编辑器 中会显示 发现 HTML 错误或模板错误警告消息。该错误消息会显示包含错误的 Liquid 文件。

当存在任何损坏的 HTML 时，可能会显示找不到您正在查找的模板警告消息。模板编辑器中的页面可能由于多种原因而无法加载，例如以下原因：

• 网络连接问题
• 模板中的无效 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. 前往您的在线店面，以验证页面是否按预期显示。

“Exceeded maximum number of unique handles”错误

如果您在主页上看到类似“Exceeded maximum number of unique handles for all_products”的 Liquid 错误消息，这通常意味着您在主页上添加了过多的特色产品分区（在大多数模板中通常超过 20 个分区）。

要解决此问题：

1. 在您的 Shopify 后台中，转至在线商店 > 模板。
2. 找到您当前的模板，然后点击编辑模板。
3. 前往您的主页。
4. 删除一些特色产品分区，以确保不超过模板的限制。
5. 请考虑改用特色产品系列分区，这样可以更高效地显示多个产品，并提高您商店的绩效。

大多数模板的页脚中通常默认包含付款图标，以向客户显示您接受的付款方式。如果您的模板页脚中未显示付款图标，则可以检查以下各项：

1. 在模板编辑器中，转到页脚部分，并验证显示付款图标设置是否已启用。
2. 在您的 Shopify 后台中，转至设置 > 支付，并验证是否至少有一种有效的付款方式。某些付款方式可能需要先完成账户设置，然后其图标才会显示。
3. 如果您使用的是第三方支付网关，由于平台限制，可能无法显示付款图标。

如果您已验证这些设置但付款图标仍未显示，那么您可能需要获取模板支持。