

Shopify语言切换器是多语言商店的实用原生功能。该工具让顾客能以偏好语言浏览您的网站,助力品牌开拓国际新市场。您还可通过代码定制该功能,使其更契合品牌美学风格。
不过,原生功能确实存在一些缺点,包括与第三方解决方案相比,其自定义选项较为有限。
通过集成专用的Shopify翻译应用,店主可享受增强功能、提升用户参与度并处理实际翻译工作的附加功能。例如,我们自家的Shopify翻译Weglot为其语言切换器提供了独特的设计和布局选项,使其能适应任何店铺版式。此外,它不仅能让用户切换语言,更具备诸多其他功能——具体细节我们稍后详述。
本文将向您展示如何充分利用Shopify原生语言切换器,随后深入Weglot Shopify平台的 Weglot ,详细介绍店铺翻译的最佳实践方案,助您打造卓越的用户体验。

首先,让我们看看Shopify内置的语言切换器。正如我们提到的,该功能让店主能够支持多种语言,自然能提升国际客户的用户体验(UX)。
系统同时支持手动选择语言和根据访客浏览器偏好进行的自动语言重定向。您可以在“在线商店”>“偏好设置”>“自动重定向”>“语言”下启用基于访客浏览器偏好的自动语言重定向,前提是您已发布相关语言版本,并在目标市场中提供了这些语言版本。
如果原生切换器能满足您的需求,以下是设置方法。
在语言切换器出现之前,您的Shopify商店必须先提供多种语言选项。如果您已经设置好了翻译内容,可以直接跳到下一节。否则,请按照以下步骤开始操作……
前往设置>语言>添加语言。从20 多种受支持的选项中选择,从西班牙语到日语一应俱全。请记住,点击每种语言旁边的 "发布 "即可为客户提供翻译。如果错过这一步,您的新切换器将无法切换任何语言。
Shopify 内置的“Translate & Adapt”应用是搭建多语言网店的一种选择。添加语言后,您只需进入“设置”>“应用”部分,该应用就会自动将您的核心内容免费翻译成 2 种语言(如果您的网店位于英国、瑞士或 10 个欧盟国家之一,则可翻译成 8 种语言)。
若需批量管理,请通过“设置”>“语言”>“导出”将网站的语言数据导出为 CSV 文件。批量编辑翻译内容后,再将其重新导入——关键在于切勿修改那些花括号 {{ }} 或 {% %} 内的Liquid 代码。那是 Shopify 的主题引擎,并非纯文本。
如果您更倾向于完全手动控制,Shopify 允许商家管理多达 20 种语言(Shopify Plus 支持 30 种)。请前往“设置”>“语言”>“操作”>“订购翻译”页面,直接从您的 Shopify 控制面板订购专业翻译服务。
语言发布和翻译应用完成后,您就可以使用切换器了。
Shopify 的内置语言切换器通常位于主题编辑器的“页眉”或“页脚”部分。其确切位置和自定义选项取决于您使用的主题和版本。
请尝试以下步骤:
一旦您的商店在客户所在的市场中提供了多种已发布的语言,语言切换器应显示可用的语言选项。
Shopify 的免费主题(包括Dawn、Craft、Refresh、Sense 和Studio)在当前版本中均支持在页眉和页脚中使用语言选择器。从 9.0.0 版本起,免费在线商店 2.0 主题以及 Horizon 系列主题均支持在页眉中放置语言选择器,无需额外编写代码。
对于高级主题,语言选项的显示位置各不相同。例如,Impulse 主题在页眉工具栏和页脚中支持语言选择,而其他主题可能提供不同的设置或显示位置。如果您找不到该选项,请查阅主题开发者的文档。
较旧的经典主题可能提供的自定义选项较少。如果您的主题不支持您首选的布局位置,您可能需要编辑其 Liquid 模板、切换到较新的主题,或者使用带有独立布局控制功能的翻译应用。
切换器的外观还取决于您的主题。内置选择器通常会显示语言名称,并遵循您网店的字体、颜色和样式。有些主题提供了额外的设计设置,而更全面的自定义可能需要使用 CSS。
此外,请使用 Shopify 的主题预览功能检查移动端布局。根据您所使用的主题不同,切换器可能会出现在页脚、页眉或移动端导航菜单中。请确保客户在小屏幕上也能轻松找到并使用它;如果同时显示了国家/地区选择器,请将其置于附近位置。
您可以通过主题的内置设置在 Shopify 页眉中添加语言选择器,或者使用Weglot 提供的“切换器编辑器”,无需修改主题代码即可放置一个可自定义的切换器。
如前所述,要添加 Shopify 的原生语言选择器,请前往 Shopify 管理后台 > 在线商店 > 主题 > 编辑主题,打开“页眉”部分,找到“启用语言选择器”或类似的设置,启用该选择器,然后点击“保存”。
如果您使用的是Weglot ,请打开Weglot ,进入“仪表盘”>“设置”>“语言切换器”>“切换器编辑器”。将切换器拖动到您首选的页眉位置,然后点击“保存”。请选择一个在商店各页面中始终显示的区域,这样当顾客浏览时,切换器就能保持在原位。
为了实现更精确的定位,Weglot 还支持以下 HTML 占位符:
<div id="weglot_here"></div>
您可以将其添加到主题“页眉”区域中的自定义 Liquid 部分或代码块中(如果支持的话),或者将其插入到相应的主题文件中。Weglot 随后会在占位符出现的位置显示切换器。具体位置取决于您主题的布局。
设置完成后,请务必在桌面端和移动端测试语言切换器,包括产品页和系列页。此外,还需测试结账流程,因为Shopify将结账流程与商店页头分开管理,因此在商店页头添加语言切换器并不会自动在结账页面添加该功能。如果您使用的是Weglot 的Shopify Markets集成,Shopify会根据客户之前的选项来处理结账语言,且Weglot 的语言切换器本身在结账过程中不会显示。
如果您的 Shopify 主题未提供所需的语言选择器位置或设计选项,您可以使用 Liquid 创建一个自定义选择器。这需要编辑主题代码,因此请在继续操作前先备份代码。
要设置和自定义 Shopify 语言切换器,您需要按照以下步骤操作:
{% if localization.available_languages.size > 1 %}
<div class="page-width custom-language-topbar">
{% form 'localization', id: 'header-language-form' %}
<div class="shopify-language-switcher">
<label for="header-language-selector">Language</label>
<select
id="header-language-selector"
name="language_code"
>
{% for language in localization.available_languages %}
<option
value="{{ language.iso_code }}"
{% if language.iso_code == localization.language.iso_code %}selected{% endif %}
>
{{ language.endonym_name | escape }}
</option>
{% endfor %}
</select>
<button type="submit">Apply</button>
</div>
{% endform %}
</div>
{% endif %}
Liquid 代码的位置决定了语言切换器在商店前端显示的位置。例如,将其放置在页眉的导航区域内,可能会使其与菜单并排显示;而将其放置在导航上方的一个独立容器中,则可以创建一个专用的语言选择栏。
该代码使用 Shopify 的本地化表单来获取可供客户选择的语言。它以各语言的本地名称显示每种语言(例如,法语显示为Français),并将当前语言标记为已选中。客户从下拉菜单中选择一种语言,然后点击“应用”即可切换。
如果您的主题已经在同一位置显示了语言选择器,请通过主题编辑器禁用现有的语言选择器,以避免重复。
.custom-language-topbar {
display: flex;
justify-content: flex-end;
padding-top: 8px;
padding-bottom: 8px;
}
.custom-language-topbar .shopify-language-switcher {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
flex-wrap: wrap;
}
.shopify-language-switcher select {
font: inherit;
font-size: 16px;
color: #007bff;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 5px;
padding: 8px;
}
.shopify-language-switcher select:hover {
border-color: #555;
}
.shopify-language-switcher select:focus-visible {
outline: 2px solid #0056b3;
outline-offset: 2px;
}

Weglot 这是一款基于人工智能的网站翻译工具,无需对主题进行任何修改,即可为您的 Shopify 商店添加语言切换功能。虽然 Shopify 原生的语言切换功能已能满足基本需求,但像 Weglot 则提供了更丰富的自定义选项,以及额外的 Shopify 翻译功能,适合希望为国际客户真正实现店铺体验本地化的商家。
与Shopify语言切换器不同Weglot 网站内容100%翻译成110多种语言,涵盖结账页面、邮件通知及SEO元数据,并针对搜索引擎进行优化。

有了Weglot,您的整个 Shopify 商店都能从自动翻译中受益,从而加速扩展项目。与为每种语言聘请单独的翻译人员相比,Weglot的自动化大大缩短了新语言版本的上市时间。
然而,Weglot的功能不仅限于自动翻译。使用Weglot,您可以对网站上的翻译内容进行完全编辑控制。您还可以直接通过该平台聘请专业翻译人员。
您还可以使用Weglot 的AI翻译模型,即时生成符合品牌风格的翻译。该模型会根据您的指示、术语表和手动翻译历史进行学习,从而立即为您提供符合上下文且风格与您一致的翻译。
Weglot 还与 Shopify 的现有功能和流行的第三方应用程序集成,包括对Dawn和Prestige 等主题的定制。您可以根据需要添加、发布、取消发布或删除语言,从而省去了管理多个店铺或手动翻译的麻烦。
Weglot 提供翻译服务,其核心功能Weglot 包含多语言SEO优化。该平台会为每种语言版本自动创建子域名或子目录,并实施hreflang标签,从而优化您网站在本地搜索引擎中的表现。此外,我们的 Visual Editor 支持轻松定制翻译内容,可精细调整以契合品牌语调。

最棒的是Weglot 语言切换器只需片刻功夫!让我们来看看。

在您的 Shopify 商店中设置Weglot 非常简单。以下是一份入门指南:
1.首先访问Shopify 应用程序商店:
2.安装应用程序后,您需要设置一个账户:
3.配置语言设置:

选择语言后,Weglot 会自动扫描您商店中的所有内容,包括元数据和来自第三方应用程序的内容。自动检测意味着您无需手动收集需要翻译的内容,因为Weglot 会为您完成这一切!
随后,您的网站将通过领先的AI翻译技术进行即时翻译,并根据您在Weglot 控制台中选择的结构,显示在相应的语言子目录或子域名下。
Weglot切换器提供丰富的自定义选项,可根据您的店铺品牌进行个性化调整,呈现专业级效果。具体自定义方法如下:

重要的是,语言切换器无需修改主题即可轻松重新定位,确保在您商店的不同页面上始终保持易于访问且用户友好。有关高级布局设置,请参阅下方关于"克服Shopify商店本地化常见难题"的章节。
对于希望使用Weglot 增强其 Shopify 商店的开发人员来说,定制是创建量身定制的多语言体验的关键。Weglot的灵活性使开发人员能够创建定制的多语言体验,同时对非技术用户保持友好。
以下是一些值得考虑的编码技巧:
开发人员可以修改背景颜色、字体大小和填充等样式,以匹配商店的品牌。例如
select {
background-color: #f0f0f0;
border: 2px solid #007bff;
border-radius: 5px;
padding: 10px;
}
开发人员可以使用 JavaScript 在选择语言时触发特定操作,例如更新页面上的其他元素或跟踪语言变化以进行分析。例如,您可以实现一个事件监听器:
document.addEventListener('DOMContentLoaded', function() {
var languageSelector = document.querySelector('select[name="language_code"]');
if (languageSelector) {
languageSelector.addEventListener('change', function(event) {
// Custom functionality here
// For example, track language change event
console.log('Language changed to: ' + event.target.value);
});
}
});
Weglot的主要功能之一是自动创建特定语言的 URL,例如为网站的法语版本创建 example.com/fr。合理的 URL 结构可确保搜索引擎能够索引每个语言版本,从而提高多语言搜索引擎优化效果。
无论是浏览商品还是结账,Weglot 都能帮助顾客在购物过程中轻松切换语言。当顾客从英文产品页面切换到西班牙文等同页面时,他们会体验到流畅的转换,而不会丢失他们在购物过程中的位置。此类功能可影响网站停留时间和转换率等关键指标,提高客户满意度,并最终推动全球增长。
举例来说,Everyone.org 使用Weglot 创建了一个 12 种语言的多语言网站,其总访问量增加了 40%,其中法语用户的转换率几乎是全站平均转换率的两倍。

多语种搜索引擎优化可确保您的产品能够被不同语言搜索的用户发现,从而提高在线流量。多语种搜索引擎优化的一个基本方面是拥有适当的 URL 结构,使用子目录有助于搜索引擎识别不同语言的网页并对其进行排名。
Hreflang 标签在这一过程中发挥着重要作用,它能让搜索引擎了解网页的语言和地区定位。这有助于引导用户访问网站的最相关版本。
经过翻译的元数据(包括标题标签和描述)可进一步提高搜索能见度。Weglot 可自动完成大部分技术性搜索引擎优化工作,自动创建特定语言的 URL 并实施 hreflang 标签,无需人工干预。

此外Weglot Visual Editor 语言词汇表可帮助店主保持翻译的一致性。

要想在多语言搜索引擎优化方面多走一步,Shopify店主可以采取以下措施:
请记住,有效的多语言搜索引擎优化(SEO)能够带来更多市场机遇!在采用Weglot 进行多语言优化后,Shopify商家RonDorff的网站访问量实现了惊人的400%增长。

Shopify 店铺本地化会遇到一些独特的挑战,但Weglot 可提供有效的解决方案,让您轻松完成整个过程。
要在 Shopify 网站上更改Weglot 切换器的位置,可采用以下四种方法之一:
使用切换器编辑器,将语言切换器直接拖拽到网站的实时预览界面中。此方法要求您的网站已上线运行。
在主菜单中创建自定义语言切换器,将其Weglot 关联。前往Shopify管理后台>在线商店> 导航设置,为每种语言添加菜单项时请使用格式Weglot(例如Weglot 代表英语)。您还可创建语言下拉菜单。
将以下代码snippet 插入snippet Theme.liquid 文件的所需位置:
<div id="weglot_here"></div>
此代码将语言切换器放置于您插入代码的位置,解决了社区论坛中讨论的常见位置限制问题。
修改weglot.liquid 中的weglot 初始化代码,手动集成切换器。包含切换器选项,并指定希望切换器出现的 CSS 目标选择器:
Weglot.initialize({
api_key: "YOUR_API_KEY",
switchers: [{
location: { target: ".header-nav" }
}]
});
确保将 .header-nav 替换为所需元素的 CSS 选择器。
使用Weglot,您还将获得以下本地化优势:
| 功能 | Weglot | Shopify |
|---|---|---|
| 翻译方法 | 通过多个引擎(DeepL、Google 等)进行自动翻译,并可完全手动编辑。 | 人工翻译;可通过与翻译工具集成实现自动化。 |
| 内容范围 | 对网站进行 100% 的翻译,包括导航、页眉、页脚和元信息。 | 需要额外的应用程序才能实现全面翻译(如导航)。 |
| 搜索引擎优化 | 服务器端翻译带有自动 hreflang 标记,每种语言都有唯一的 URL。 | 为每种语言创建单独的 URL,还包括用于搜索引擎优化的 hreflang 标签。 |
| 定制选项 | 高度可定制的语言切换器,配备visual editor 。 | 可使用 Liquid 代码自定义的基本语言选择器。 |
| 用户体验 | Visual Editor 实时编辑和上下文翻译调整。 | 根据用户选择的语言或 URL 自动显示翻译内容。 |
| 易用性 | 用户友好型设置,无需编码;处理翻译的技术问题。 | 需要在 Shopify 管理器中进行一些设置;用户需要第三方应用程序来满足更复杂的需求。 |
Shopify 为用户提供将其店铺翻译成多种语言所需的基本工具,但也存在一些限制。
相比之下,Weglot 提供了一个全面的翻译解决方案,并迎合了 Shopify 的局限性。因此,该平台更适合那些希望放手进行多语言内容管理的用户。
正如我们所见Weglot 独特优势,使其成为克服在线语言障碍的理想解决方案。Weglot语言切换器,您可获得更多自定义选项以提升用户体验;而Visual Editor 上下文翻译Visual Editor ,让您随时随地优化内容。您甚至能直接通过控制面板订购专业翻译服务,确保内容准确无误。
Weglot 可与常用的 Shopify 应用程序集成,包括智能搜索工具和图片库,确保您的店铺在多语言环境下保持完整功能。此外,我们的平台还能创建特定语言的子域或子目录,大大提高搜索引擎优化效果。
最重要的是,Weglot 与所有内容管理系统兼容,这意味着如果您不再使用 Shopify,也不会失去Weglot 的优势。
立即开始使用Weglot 的14天免费试用,几分钟内即可拥有一个多语言网站!
主题更新、应用安装或布局调整后,语言切换器有时会消失。这些问题通常与您的主题设置或切换器的位置有关。下面让我们来排查四个最常见的故障原因。
看到两个切换器通常意味着 Shopify 的原生切换器和您应用的切换器(例如Weglot )同时处于激活状态。此外,您可能还配置了多个Weglot 切换器。
首先,打开Shopify 管理后台 > 在线商店 > 主题 > 编辑主题。检查页眉和页脚中是否存在 Shopify 的原生语言选择器,如果您使用的是“Weglot ”,请将其禁用,然后保存更改。具体设置取决于您的主题。此外,如果客户需要通过国家/地区选择器来选择目标市场,请保持该功能启用。
如果两个切换器都属于Weglot ,请打开Weglot 仪表盘 > 设置 > 语言切换器 > 切换器编辑器。检查已配置的切换器有哪些,以及它们是否设置为在相同的屏幕尺寸下显示。Weglot 支持分别配置桌面版和移动版切换器,因此请确保它们不会意外地同时显示。
如果您已在 Shopify 导航中添加了语言链接,请检查它们是否与Weglot 的常规语言切换器并列显示。如果您不需要同时显示这两个选项,请删除多余的菜单项。
有关自定义切换器放置和初始化的更多指导,请参阅官方Weglot 语言切换器文档。
如果更新 Shopify 主题后语言切换器消失了,这并不一定意味着您的翻译内容丢失了。问题可能出在切换器的设置上,或者它在新主题中的位置有问题。
如果您的配置使用了语言子目录,请测试您商店中一个已翻译的 URL,例如 yourstore.com/fr/。如果页面显示了翻译后的内容,但语言切换器缺失,那么问题可能出在语言切换器的显示上,而不是翻译内容本身。
如果您使用的是 Shopify 的内置语言切换器,请务必确认您的其他语言是否仍在“设置”>“语言”下处于已发布状态。如果它们未被标记为“已发布”,则不会在任何地方显示。
如果您使用的是Weglot :

如果您已手动将Weglot 的切换器添加到主题代码中,请检查更新是否保留了您的自定义位置。例如,如果您之前使用的是 <div id="weglot_here"></div>, 请确认它是否仍位于预期位置。如果已被移除,请在确认其位置与更新后的布局兼容后,从之前的主题版本中将其恢复。
此外,请在桌面端和移动端都检查一下您的网店。如果切换器在桌面端能正常工作,但在移动端却无法正常工作,可能是屏幕尺寸可见性设置或您所用主题的移动端布局导致的。接下来我们将详细探讨这一点。
如果您的 Shopify 语言切换器在桌面端显示,但在移动端却不见了,可能是被主题的移动端布局隐藏了,或者被设置为仅在较大屏幕上显示。
如果您使用的是 Shopify 的内置切换器,请打开“在线商店”>“主题”>“编辑主题”,然后选择移动端预览。根据您使用的主题,检查语言选择器是否出现在页脚、页眉或移动端菜单中。如果未显示,请确认相关语言选择器设置已启用。某些主题可能需要进行额外自定义,才能将其显示在您首选的移动端位置。
如果您使用的是Weglot :
如果您的移动端页眉空间不足,也可以将语言链接添加到移动端导航菜单中。请前往 Shopify 管理后台 > 内容 > 菜单, 选择您移动端导航所使用的菜单,并按照Weglot 中的链接格式为每种语言添加一个菜单项,例如 #Weglot-en 英语或 #Weglot-fr 法语。如果您的主题支持,还可以将这些链接归类到“语言”下拉菜单中。
如果切换按钮仍然不见,请检查是否是自定义 CSS 在较小屏幕上将其隐藏了,或者它是否被放置在仅限桌面的导航元素内。将其移动到一个可见且位置固定的位置可能会解决此问题。
如果您的Weglot 语言切换器只有在刷新页面后才会显示,那么该问题可能与您的Shopify主题加载内容的方式或切换器的位置有关。
请尝试以下解决方法:
最后,请在无痕浏览器窗口中测试您的网店,从首页开始,依次浏览不同的商品和系列页面。如果问题仍然存在,请联系Weglot 客服,并提供您的网店网址、主题名称以及重现该问题的操作步骤。
过去 90 天内,翻译页面带来的访问量为 0 次。