在线商店模板故障排除

有很多不同的情况会导致模板不能按预期显示，导致元素消失或不能正常运行，以及各种其他显示问题。这可能是由于第三方或应用代码与模板或自定义代码自定义冲突。在 Shopify 后台中可能还需要调整一些设置。例如，您可能需要检查翻译内容、产品、产品系列、菜单或市场。

如果查看本指南中的步骤后，您的模板仍然有问题，您可能需要联系模板的支持团队。详细了解如何获取模板支持。

找出问题原因

找出模板问题原因是解决问题的第一步。请尝试以下步骤，帮助找出问题原因：

1. 您可以访问 Shopify 状态页面，了解可能影响店面的任何已知问题。如果未列出任何类似问题，您可以进一步调查此问题。

2. 问题可能由设备本地原因导致。本地问题通常源自于设备或浏览器设置或网络连接问题。请尝试以下步骤，确保不是本地问题，并且问题可在其他设备、浏览器或 Internet 连接中重现：

   • 清除浏览器缓存和 Cookie。如果您使用 Shopify 账户登录 Shopify 帮助中心，则清除浏览器缓存和 Cookie 会将您退出账户。如果您使用虚拟帮助中心助手，则清除浏览器缓存和 Cookie 会重置您的聊天历史记录并将您退出账户，您需要与虚拟帮助中心助手发起新聊天。
   • 请使用隐身模式、其他设备或 Shopify 应用。
   • 尝试使用移动数据或其他 Internet 连接。
   • 确保浏览器处于最新状态。
   • 请确保浏览器未被设置为阻止所有 Cookie，因为如果没有 Cookie，某些应用可能无法正确显示。
   • 确保您未使用虚拟专用网络 (VPN) 或未激活阻止 Shopify 的防火墙。

3. 如果您在其他设备、浏览器或 Internet 连接中仍然遇到问题，则表示不是本地问题，且问题可以重现。在其他模板上重现问题是找出问题原因的下一步。访问 Theme Store，安装模板新版本，测试问题是否在模板的最新版本中仍然出现。安装其他模板（例如免费 Shopify 模板）也是一个好方法，因为您可以确定问题是由该特定模板导致，还是所有模板都有相同的问题。测试其他模板后，可根据问题呈现方式执行以下有效步骤：

   • 如果问题只在当前模板以及模板的更新和未自定义版本中出现，您可能需要获取模板支持。
   • 如果问题只在当前模板中出现，可能是某些模板代码导致问题。如果您最近更新了模板代码，可以回退到模板代码旧版本。如果您并未修改模板代码，可能需要检查模板设置。例如，如果不显示添加到购物车按钮，请在模板设置中检查按钮颜色，确保颜色不同且对比度不同。
   • 如果所有模板上都出现此问题，可能是由于 Shopify 后台设置、应用或其他问题。

4. 问题可能源自应用。如果您最近安装或更新了任何影响店面的应用，您可能需要暂时卸载该应用。如果在卸载应用后不存在问题，您可以联系应用开发人员的支持团队，获取有关在店面中正确显示该应用的更多帮助。详细了解如何获取应用帮助。如果在卸载应用后仍然存在问题，表示应用不是问题原因。

图片显示不正确

图片显示可能与预期不同，但这可能是由于图片本身与模板的图片要求不兼容。确保您使用的图片尺寸正确无误。请查看上传不兼容图片时可能会出现的以下常见显示问题列表：

• 如果标头显示比预期大，logo 图片显示比预期小，则可能是由于 logo 图片文件有空白。logo 图片文件有空白可能会导致 logo 显示较小，空白可能会导致标头显示较大。编辑图片文件，确保围绕 logo 裁剪，没有空白。
• 如果幻灯片图片被裁剪，这是由设计决定的，旨在确保图片在移动设备上与台式电脑上具有相同的显示方式。由于内容在移动设备屏幕上显示得更小，因此缩小内容可能会丢失很多细节。相反，系统会裁剪内容，确保细节不会丢失。高度大于宽度的纵向图片也会在台式电脑上占用大量空间。这就是幻灯片图像有最大高度的原因。您可以向幻灯片图片添加焦点，确保焦点始终是幻灯片图片的中心。如果添加焦点不起作用，您可以尝试寻找适用于所有屏幕尺寸的图片。详细了解幻灯片最佳做法。
• 如果 GIF 图片显示不正确，并且已使用富文本编辑器添加到店面（例如产品描述或博客文章），则可能是由于图片尺寸。您可以在富文本编辑器中点击 GIF，然后点击编辑图片进行纠正。在图片尺寸下拉菜单中，选择原始。然后，调整 GIF 尺寸，点击图片的角并向内拖动可缩小，向外拖动可增大。
• 如果图片在店面中的显示与原始图片有显著色差，可能是由于图片未采用标准红色绿色蓝色 (sRBG) 颜色。若要修复色差，在照片编辑应用程序中将文件保存为 sRBG。常见术语包括“Web 优化”、“针对 Web 调整图片”或“保存为 Web 图片”。详细了解颜色配置文件。
• 如果产品系列页面上的产品图片未对齐，您可能需要调整产品图片文件的纵横比，使纵横比相同，然后再次上传产品图片。您还可以使用 Shopify App Store 中的图片编辑应用。

产品或产品系列显示不正确

如果店面缺少产品，您可能需要在 Shopify 后台的产品发布部分中检查状态和销售渠道。确保产品状态为活跃，并且产品可用于在线商店。

如果店面缺少产品系列，您可能需要在 Shopify 后台的产品系列发布分区中检查销售渠道。确保该产品系列在在线商店中销售。您可能还需要确保已将产品系列添加到菜单中。

如果产品系列显示正常但缺少产品，则您可能需要在菜单设置中检查该产品系列的任何标签筛选器。确保使用标签筛选产品系列字段中没有可能导致产品不显示的标签。

如果产品或产品系列的货币显示不正确，您可能需要在设置 > 常规中的商店默认值部分中检查货币显示，确保没有任何其他代码。详细了解如何设置货币面向客户的显示格式。

如果某些产品或产品系列的显示与其他产品或产品系列不同，您可能需要在 Shopify 后台中检查分配给产品或产品系列的模板样式。

翻译内容显示不正确

如果翻译内容在店面中显示不正确或缺失，可能是由于内容翻译过时或缺失。内容也可能在市场特定模板中。每当以默认语言添加任何新内容时，请再次运行自动翻译，或手动添加新翻译。

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

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

查看翻译内容时，请更新任何未翻译或过时的内容，然后翻译内容应该会正确显示。

详细了解如何翻译和本地化商店。

模板编辑器更新在店面中不显示

如果店面和模板编辑器显示的信息不同，请检查正在编辑的模板样式。要显示正确信息，您可能需要编辑更新模板样式。通过市场覆盖，您可以为不同的市场创建不同的店面，并显示翻译内容。您可能无意中在特定市场或 B2B 中进行了更新。在模板编辑器中使用市场下拉菜单找到内容，确保内容在正确的市场中。

详细了解市场覆盖。

模板在移动设备和台式电脑视图之间的差异

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

许多分区和块都有可自定义的移动设备设置。例如，您可以在相关产品部分中设置移动设备上的列数。您可以查看每种页面类型与移动设备相关的分区设置，以对移动设备屏幕尺寸上的任何显示问题进行故障排除。

为确保模板在所有屏幕尺寸上都可用，某些模板功能在移动设备上的显示方式可能与台式电脑不同。例如，在台式电脑屏幕尺寸上，幻灯片可能有一个文本叠加，文本显示在图片顶部，通常带有图像颜色不透明度或文本阴影。然而，在移动设备屏幕尺寸上，文本可能会显示在幻灯片下方。这是一个辅助功能，旨在使文本在任何屏幕尺寸上都可读。如果文本为叠加，在移动设备上的显示就会非常小，难以阅读。

如果特色产品系列部分或产品系列页面显示尺寸不一致或在移动设备上查看店面时未对齐，则可能是因为纵横比不一致。图片网格（例如在产品系列或特色产品系列中显示的产品图片）旨在适应屏幕尺寸。如果图片网格中的图片纵横比不一致，则图片显示可能会因屏幕尺寸而不同。2048 x 2048 像素的正方形产品图片通常在网格中效果最佳。将图片更改为一致的纵横比，以便在所有屏幕尺寸上获得最佳效果。详细了解图像纵横比。

富文本编辑器

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

检查 HTML 代码

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

步骤：

1. 在后台中导航到该页面。
2. 点击 </>显示 HTML 按钮检查 HTML 代码。
3. 找到并删除可能导致显示问题的任何 HTML 代码。
4. 点击保存。

清除格式

您可以突出显示部分文本并清除 HTML 格式。

步骤：

1. 在后台中导航到该页面。
2. 突出显示有格式问题的文本。
3. 点击 🚫 按钮。
4. 点击保存。

了解有关 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 代码无效

您可以在模板代码中找到代码更改并更正代码，或将文件恢复到代码更改之前。

步骤

1. 点击错误消息中链接的 .liquid 分区文件，或检查文件最近的更改。这会将您定向到编辑 HTML/CSS 页面，并且文件在代码编辑器中打开。

2. 仔细浏览文件中的代码，并尝试找到无效的 HTML 或 Liquid。代码编辑器用红色显示潜在的语法错误。常见错误包括：

   • 额外的结束 HTML 标记，例如，结束 </div> 没有对应的开始 <div>
   • 额外的开始 HTML 标记，例如，开始 <div> 没有对应的结束 </div>
   • HTML 标记格式错误，例如，<div class="my-class" 缺少 >
   • Liquid 代码格式错误
   • 包含的模板代码片段文件中的 HTML 已损坏

3. 找到问题后，请更正模板文件中的代码，或在最近更改中选择以前的版本来恢复代码。

4. 点击保存。

5. 点击自定义以返回模板编辑器，并确认错误消息已消失。

6. 导航到您的店面，确保显示效果符合预期。