在线商店模板故障排除
有很多不同的情况会导致模板不能按预期显示，导致元素消失或不能政策运行，以及各种其他显示问题。这可能是由于第三方或应用代码与模板或自定义代码自定义冲突。在 Shopify 后台中可能还需要调整一些设置。例如，您可能需要检查翻译内容、产品、产品系列、导航或市场。
如果查看本指南中的步骤后，您的模板仍然有问题，您可能需要联系模板的支持团队。详细了解如何获取模板支持。
找出问题原因
找出模板问题原因是解决问题的第一步。请尝试以下步骤，帮助找出问题原因：
- 您可以访问 Shopify 状态页面，了解可能影响店面的任何已知问题。如果未列出任何类似问题，您可以进一步调查此问题。
-
问题可能由设备本地原因导致。本地问题通常源自于设备或浏览器设置或网络连接问题。请尝试以下步骤，确保不是本地问题，并且问题可在其他设备、浏览器或 Internet 连接中重现：
- 清除浏览器缓存和 Cookie。如果您使用 Shopify 账户登录 Shopify 帮助中心，则清除浏览器缓存和 Cookie 会将您退出账户。如果您使用虚拟帮助中心助手，则清除浏览器缓存和 Cookie 会重置您的聊天历史记录并将您退出账户，您需要与虚拟帮助中心助手发起新聊天。
- 请使用隐身模式、其他设备或 Shopify 应用。
- 尝试使用移动数据或其他 Internet 连接。
- 确保浏览器处于最新状态。
- 请确保浏览器未被设置为阻止所有 Cookie，因为如果没有 Cookie，某些应用可能无法正确显示。
- 确保您未使用虚拟专用网络 (VPN) 或未激活阻止 Shopify 的防火墙。
-
如果您在其他设备、浏览器或 Internet 连接中仍然遇到问题，则表示不是本地问题，且问题可以重现。在其他模板上重现问题是找出问题原因的下一步。访问 Theme Store，安装模板新版本，测试问题是否在模板的最新版本中仍然出现。安装其他模板（例如免费 Shopify 模板）也是一个好方法，因为您可以确定问题是由该特定模板导致，还是所有模板都有相同的问题。测试其他模板后，可根据问题呈现方式执行以下有效步骤：
- 如果问题只在当前模板以及模板的更新和未自定义版本中出现，您可能需要获取模板支持。
- 如果问题只在当前模板中出现，可能是某些模板代码导致问题。如果您最近更新了模板代码，可以回退到模板代码旧版本。如果您并未修改模板代码，可能需要检查模板设置。例如，如果不显示添加到购物车按钮，请在模板设置中检查按钮颜色，确保颜色不同且对比度不同。
- 如果所有模板上都出现此问题，可能是由于 Shopify 后台设置、应用或其他问题。
问题可能源自应用。如果您最近安装或更新了任何影响店面的应用，您可能需要暂时卸载该应用。如果在卸载应用后不存在问题，您可以联系应用开发人员的支持团队，获取有关在店面中正确显示该应用的更多帮助。详细了解如何获取应用帮助。如果在卸载应用后仍然存在问题，表示应用不是问题原因。
图片显示不正确
图片显示可能与预期不同，但这可能是由于图片本身与模板的图片要求不兼容。确保您使用的图片尺寸正确无误。请查看上传不兼容图片时可能会出现的以下常见显示问题列表：
- 如果标头在台式电脑上显示较宽，logo 图片在移动设备上显示比预期小，则可能是由于 logo 图片文件有空白。编辑图片文件，确保围绕 logo 裁剪，没有空白。
- 如果幻灯片图片被裁剪，这是由设计决定的，旨在确保图片在移动设备上与台式电脑上具有相同的显示方式。由于内容在移动设备屏幕上显示得更小，因此缩小内容可能会丢失很多细节。相反，系统会裁剪内容，确保细节不会丢失。高度大于宽度的纵向图片也会在台式电脑上占用大量空间。这就是幻灯片图像有最大高度的原因。您可以向幻灯片图片添加焦点，确保焦点始终是幻灯片图片的中心。如果添加焦点不起作用，您可以尝试寻找适用于所有屏幕尺寸的图片。详细了解幻灯片最佳做法。
- 如果 GIF 图片显示不正确，并且已使用富文本编辑器添加到店面（例如产品描述或博客文章），则可能是由于图片尺寸。您可以在富文本编辑器中点击 GIF，然后点击编辑图片进行纠正。在图片尺寸下拉菜单中，选择原始。然后，调整 GIF 尺寸，点击图片的角并向内拖动可缩小，向外拖动可增大。
- 如果图片在店面中的显示与原始图片有显著色差，可能是由于图片未采用标准红色绿色蓝色 (sRBG) 颜色。若要修复色差，在照片编辑应用程序中将文件保存为 sRBG。常见术语包括“Web 优化”、“针对 Web 调整图片”或“保存为 Web 图片”。详细了解颜色配置文件。
- 如果产品系列页面上的产品图片未对齐，您可能需要调整产品图片文件的纵横比，使纵横比相同，然后再次上传产品图片。您还可以使用 Shopify App Store 中的图片编辑应用。
产品或产品系列显示不正确
如果店面缺少产品，您可能需要在 Shopify 后台的产品发布部分中检查状态和销售渠道。确保产品状态为活跃，并且产品可用于在线商店。
如果店面缺少产品系列，您可能需要在 Shopify 后台的产品系列发布部分中检查销售渠道。确保该产品系列可用于在线商店。您可能还需要确保产品系列已添加到导航中。
如果产品系列显示正常但缺少产品，您可能需要在导航设置中检查该产品系列的任何标签筛选器。确保使用标签筛选产品系列字段中没有可能导致产品不显示的标签。
如果产品或产品系列的货币显示不正确，您可能需要在设置 > 常规中的商店默认值部分中检查货币显示，确保没有任何其他代码。详细了解如何设置货币面向客户的显示格式。
如果某些产品或产品系列的显示与其他产品或产品系列不同，您可能需要在 Shopify 后台中检查分配给产品或产品系列的模板样式。
翻译内容显示不正确
如果翻译内容在店面中显示不正确或缺失，可能是由于内容翻译过时或缺失。内容也可能在市场特定模板中。每当以默认语言添加任何新内容时，请再次运行自动翻译，或手动添加新翻译。
以下状态可应用于翻译的内容：
- 已翻译：内容有可用的翻译。
- 已过时：采用默认语言的内容已更新，但翻译未反映任何更新。
- 未翻译：此内容类型没有翻译。
查看翻译内容时，请更新任何未翻译或过时的内容，然后翻译内容应该会正确显示。
详细了解如何翻译和本地化商店。
模板编辑器更新在店面中不显示
如果店面和模板编辑器显示的信息不同，请检查正在编辑的模板样式。要显示正确信息，您可能需要编辑更新模板样式。通过商店上下文设置，您可以为不同的市场创建不同的店面，并显示翻译内容。您可能无意中在特定市场或 B2B 中进行了更新。在模板编辑器中使用上下文下拉菜单找到内容，确保内容在正确的市场中。
详细了解商店上下文设置。
富文本编辑器
有时，在富文本编辑器中添加的 HTML 代码与模板代码冲突。如果单个页面（例如产品页面、页面或博客文章）存在问题，则可能是由于多余的 HTML。有时，从其他网站复制和粘贴文本会出现这种问题。
检查 HTML 代码
您可以在富文本编辑器中检查 HTML 代码。
步骤：
- 在后台中导航到该页面。
- 点击 </>显示 HTML 按钮检查 HTML 代码。
- 找到并删除可能导致显示问题的任何 HTML 代码。
- 点击保存。
清除格式
您可以突出显示部分文本并清除 HTML 格式。
步骤：
- 在后台中导航到该页面。
- 突出显示有格式问题的文本。
- 点击 🚫 按钮。
- 点击保存。
了解有关 rich text editor 的详细信息。
页面正重定向到不受支持的 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 代码无效
您可以在模板代码中找到代码更改并更正代码，或将文件恢复到代码更改之前。
步骤
- 点击错误消息中链接的
.liquid分区文件，或检查文件最近的更改。这会将您定向到编辑 HTML/CSS 页面，并且文件在代码编辑器中打开。 -
仔细浏览文件中的代码，并尝试找到无效的 HTML 或 Liquid。代码编辑器用红色显示潜在的语法错误。常见错误包括：
- 额外的结束 HTML 标记，例如，结束
</div>没有对应的开始<div> - 额外的开始 HTML 标记，例如，开始
<div>没有对应的结束</div> - HTML 标记格式错误，例如，
<div class="my-class"缺少> - Liquid 代码格式错误
- 包含的模板代码片段文件中的 HTML 已损坏
- 额外的结束 HTML 标记，例如，结束
找到问题后，请更正模板文件中的代码，或在最近更改中选择以前的版本来恢复代码。
点击保存。
点击自定义以返回模板编辑器，并确认错误消息已消失。
导航到您的店面，确保显示效果符合预期。