Shopify 主题语言切换器：如何自定义和解决问题

Shopify的语言切换器是一个出色的视觉触发器，能让用户获得更多控制权。若您发现该功能缺失、悬浮位置异常，或在切换/更新主题后始终无法显示，那么您会庆幸自己找到了这篇文章！

首先，别慌。语言切换器本身并不存储任何翻译数据，因此只需让该功能在网站上重新显示即可。继续阅读本文，不到十分钟，你就能精准定位问题根源——通常是三大元凶之一：主题更新、未发布语言或懒加载异常——并实施相应的解决方案。

主要收获

• Shopify 语言切换器只是视觉触发器，不会影响网站的翻译数据或搜索引擎优化。
• 大多数 "切换器消失 "问题都可追溯到主题更新、未发布的语言或懒加载头文件。
• 在台式机上看起来很好的东西，在手机上往往会隐藏起来，因此一定要在常用的断点进行测试。
• 如果您觉得视觉上的技巧还不够，Weglot还能在不影响翻译质量的前提下，为您提供真正灵活的位置和风格。

设置语言和翻译方法

首先——在语言切换器出现之前，您的Shopify商店必须实际提供多种语言选项。若您已完成翻译设置，可直接跳至下一部分。否则，请按以下步骤开始操作：

前往设置>语言>添加语言。从20 多种受支持的选项中选择，从西班牙语到日语一应俱全。请记住，点击每种语言旁边的 "发布 "即可为客户提供翻译。如果错过这一步，您的新切换器将无法切换任何语言。

Shopify 内置的 "翻译和调整 "应用程序是多语言商店的一个选择。在添加语言后，它可以从 "设置">"应用程序"部分自动将您的核心内容免费翻译成两种语言。

要进行批量控制，可从 "设置">"语言">"导出"将网站的语言数据导出为 CSV 格式。批量编辑翻译，然后重新导入 - 关键是永远不要碰那些大括号 {{ }} 或 {% %} 括弧内的Liquid 代码。那是 Shopify 的主题引擎，不是纯文本。

如果您喜欢完全手动控制，Shopify 允许商店管理多达 20 种语言。请查看 "设置">"语言">"操作 ">" 订购翻译"，直接从 Shopify 面板订购 专业翻译服务。

语言发布和翻译应用完成后，您就可以使用切换器了。

查找和配置主题的内置切换器

Shopify的主题语言切换器就藏在显眼处——但只有知道在哪里找才能发现！

对于黎明、工艺和刷新主题，切换器隐藏在在线商店>主题>自定义>页脚中。

打开启用语言选择器切换器，它就会出现在网站底部。这些主题会将切换器锁定在页脚，因此将其放在页眉需要额外的代码--页眉顶部没有内置切换器。(提示：我们将在下文的 "如何在我的 Shopify 页眉添加语言选择器？）

Sense和Studio同样简单明了。它们的主题定制器只在页脚设置中提供切换器。查找 "语言选择器 "或 "本地化"--切换就在那里进行。同样，除非你有信心添加自定义代码片段，否则无法放置页眉。

Prestige、Impulse 和Motion等高级主题通常在 "主题设置">"页眉"或 "语言和货币 "部分中包含页眉位置。值得注意的是，有些主题的页眉和页脚面板提供的编辑功能比其他主题更有创意。

若您仍在使用旧版主题，这些主题早于Shopify的在线商店2.0升级版本。添加或移动切换器需要进入代码进行操作，通常位于footer.liquid文件中。语言切换器通常采用硬编码方式，因此自定义位置需要直接编辑HTML和Liquid标记。

视觉调整取决于你的主题。大多数切换器会显示标志、语言名称或两者。字体和颜色遵循网站风格，除非手动覆盖。

移动端购物者获得略有不同的体验。多数主题会将语言切换器隐藏在768像素以下的区域，以保持购物车和导航区域的清晰度，有时会通过页脚或可展开菜单使其保持可见。

Weglot 成为您的最佳选择时

当 Shopify 的内置选项开始感到拥挤时、 Weglot为您提供所需的一切自由！

"如果您的目标是增加两种以上的语言，想 风格的切换器 与您的品牌相匹配，渴望自动地理位置切换，或者需要在页眉和页脚中使用语言触发器，Weglot 都能让您自由地做到这些，而且还能做得更多。

- Eugène Ernoult，Weglot首席营销官

设置快速便捷。安装应用、选择Weglot器即刻呈现。若想实现超便捷访问，只需Weglot Weglot任意导航Weglot即可在任意位置创建可点击的语言切换器，其速度之快堪比轻描淡写一句"et voila"。

有了Weglot 的支持，可视化定制就变得轻而易举。我们的仪表板可让您实时预览切换器的变化，省去了任何复杂的步骤。调整位置、风格或图标，您所看到的就是客户所得到的。

此外，Weglot 采用异步脚本加载，加载速度小于 100KB，因此不会影响您的核心网站性能。请务必通过PageSpeed Insights来查看您的网站。

{{ai-banner}}

如何在我的Shopify标题中添加语言选择器？

转到主题定制器>页眉>添加块>自定义液体。

如果您希望在页眉中使用 Shopify 的本地切换器，请从主题的 footer.liquid 文件中复制本地化表单代码。该表单通常以本地化标签开头，当客户选择新语言时，表单会更改 URL 中的本地化参数。

将这些代码封装在一个容器中，并使用独特的类名进行样式设计。为确保切换器位于粘性菜单或弹出窗口上方，请添加 CSS，如 z-index：10000.这一小步可使切换器保持可见且无故障。

对于Weglot 用户来说，设置更加简单。输入以下代码

<div id="weglot_here"></div>

在您的自定义液体块中。Weglot 会立即检测到这一容器，并将其整齐地放入您的切换器中。

设置完成后，请始终测试您的结账流程。在结账过程中，主题有时会使用单独的头文件或布局，因此除非这些文件得到相同的更新，否则您的切换器可能不会出现。

常见问题和快速解决方案

语言切换器有时会在主题更新、应用程序安装或布局调整后消失。别担心，这些通常只是视觉上的小插曲，而不是什么大故障。让我们来排除四种最常见的障碍。

1.为什么我有两个语言切换器？

看到两个切换器通常意味着Shopify的本地切换器和您的应用程序版本（如Weglot）同时处于活动状态。要整理一下，请前往主题定制器的 "页脚 "部分，禁用本地语言选择器。

如果您的主题使用懒加载的页眉，Weglot的切换器可能会在元素加载时出现或消失。对于动态加载页眉等元素的主题，Weglot 建议在页眉出现后手动初始化切换器。具体方法是添加Weglot 脚本，然后调用

javascript
Weglot.initialize({
	api_key: 'YOUR_API_KEY',  
    // other options
});

这将在标题完全加载后完成（例如，通过 DOM ready 事件或短暂延迟后）。这样可以确保切换器每次都在正确的位置弹出。

有关自定义切换器放置和初始化的更多指导，请参阅官方Weglot 语言切换器文档。

{{quote-image-banner}}

2. 为什么主题更新后我的语言切换器不见了？

切换器有时会在主题更新时消失，但翻译很少出错。

首先，请在设置>语言下仔细检查您的额外语言是否已发布。如果没有标记为已发布，则不会在任何地方显示。

接下来，打开 "网上商店" > "主题" > "自定义" > "页脚"，确保 "启用语言选择器"切换开关处于打开状态。有些主题（如 Dawn）会在更新后将此设置重置为关闭。

第三，在店铺 URL 中添加 /fr/ 或 /es/。翻译后的页面意味着您的语言数据是安全的，您只需排除显示问题。

最后，请务必在多种设备上查看您的网站--移动设备上缺少切换器通常是 CSS 显示冲突，而不是翻译故障。

3. 为何移动端不显示语言切换器？

若移动端缺少语言切换器，这很可能是设计使然。多数Shopify主题会通过CSS在768像素以下隐藏多余小部件，为购物车和菜单图标腾出空间。苹果《人机界面指南》要求触控目标尺寸为44x44像素，以确保小屏幕设备上的可点击性。

要解决这个问题，可以在 CSS 中添加一个媒体查询，将切换器固定在移动设备的右下角，并使用较高的 z-index 值将其保持在顶部。如果标题空间不够，可将切换器放在移动汉堡包菜单内。

4.切换器在刷新后能工作，但在首次加载页面时不能工作？

当主题使用懒加载页眉时，Weglot的切换器有时仅在手动刷新后才会出现。在 Dawn 15+ 和类似主题中，页眉是在主页面加载后由 JavaScript 绘制的。Weglot 会尽快注入切换器，因此如果页眉还没准备好，切换器就会出现在后备位置（通常是右下角），或者在一秒钟后闪烁消失。

解决方法是在加载Weglot 脚本之前（在 theme.liquid 中）设置 WGNOTINITIALIZED 标志。然后在标题渲染后手动调用Weglot.initialize()（使用 setTimeout 或 DOM ready 事件）。

或者，您也可以在Weglot 面板中设置一个后备位置，比如先是页眉，然后是页脚。这样，即使页眉姗姗来迟，您的切换器也总能出现在某个位置！

您的完整实施Checklist

首先，在进行任何更改之前，使用在线商店>主题>操作>复制复制您的主题。这将为您提供一个安全的沙盒，用于测试和修复。

接下来，请在设置>语言中再次确认所有目标语言均显示为已发布状态。确保语言切换器可见——部分主题要求在页眉显示切换按钮，部分则将其置于页脚，请检查这两个位置。

在商店地址中添加 /es/ 或 /fr/，尝试直接访问 URL。如果这些页面加载成功，说明翻译已经准备就绪，只需注意切换器的位置。使用实际设备以 375px、768px 和 1920px 等突破性尺寸预览您的商店，以捕捉任何响应性怪癖。

打开Chrome 浏览器 DevTools，测量脚本加载时间。迟缓的切换器会给购物者带来麻烦。始终使用每种语言进行测试购买，因为结账模板喜欢给你惊喜。最后，在更新主题前记录所有设置。这样，您就能从任何意外重置中快速恢复。

如果您已经准备好使用即时、无障碍的切换器，那么使用Weglot，只需点击一下鼠标，即可完成语言切换。请试用我们的14 天免费试用版，看看多语言销售有多简单。