指南

Shopify 语言切换器:如何添加和自定义

Weglot产品图片
Elizabeth Pokorny
作者
Elizabeth Pokorny
审阅人
更新于
2026年10月26日

Shopify语言切换器是多语言商店的实用原生功能。该工具让顾客能以偏好语言浏览您的网站,助力品牌开拓国际新市场。您还可通过代码定制该功能,使其更契合品牌美学风格。

不过,原生功能确实存在一些缺点,包括与第三方解决方案相比,其自定义选项较为有限。

通过集成专用的Shopify翻译应用,店主可享受增强功能、提升用户参与度并处理实际翻译工作的附加功能。例如,我们自家的Shopify翻译Weglot为其语言切换器提供了独特的设计和布局选项,使其能适应任何店铺版式。此外,它不仅能让用户切换语言,更具备诸多其他功能——具体细节我们稍后详述。

本文将向您展示如何充分利用Shopify原生语言切换器,随后深入Weglot Shopify平台的 Weglot ,详细介绍店铺翻译的最佳实践方案,助您打造卓越的用户体验。

要点

  • Shopify 的原生语言切换器支持多种语言,但与第三方应用相比,其自定义功能较为有限。
  • Weglot 自动网站Weglot ,并为其语言切换器Weglot 丰富的自定义选项。该平台同时支持完全手动编辑功能,通过创建语言专属URL及实施hreflang标签,有效提升多语言搜索引擎优化效果。

Shopify 语言切换器:概述与设置

Shopify 主页
Shopify 主页

首先,让我们看看Shopify内置的语言切换器。正如我们提到的,该功能让店主能够支持多种语言,自然能提升国际客户的用户体验(UX)。

系统同时支持手动选择语言和根据访客浏览器偏好进行的自动语言重定向。您可以在“在线商店”>“偏好设置”>“自动重定向”>“语言”下启用基于访客浏览器偏好的自动语言重定向,前提是您已发布相关语言版本,并在目标市场中提供了这些语言版本。

如果原生切换器能满足您的需求,以下是设置方法。

设置语言和翻译方法

在语言切换器出现之前,您的Shopify商店必须先提供多种语言选项。如果您已经设置好了翻译内容,可以直接跳到下一节。否则,请按照以下步骤开始操作……

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

Shopify 内置的“Translate & Adapt”应用是搭建多语言网店的一种选择。添加语言后,您只需进入“设置”>“应用”部分,该应用就会自动将您的核心内容免费翻译成 2 种语言(如果您的网店位于英国、瑞士或 10 个欧盟国家之一,则可翻译成 8 种语言)。

若需批量管理,请通过“设置”>“语言”>“导出”将网站的语言数据导出为 CSV 文件。批量编辑翻译内容后,再将其重新导入——关键在于切勿修改那些花括号 {{ }} 或 {% %} 内的Liquid 代码。那是 Shopify 的主题引擎,并非纯文本。

如果您更倾向于完全手动控制,Shopify 允许商家管理多达 20 种语言(Shopify Plus 支持 30 种)。请前往“设置”>“语言”>“操作”>“订购翻译”页面,直接从您的 Shopify 控制面板订购专业翻译服务。

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

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

Shopify 的内置语言切换器通常位于主题编辑器的“页眉”或“页脚”部分。其确切位置和自定义选项取决于您使用的主题和版本。

请尝试以下步骤:

  1. 在 Shopify 管理后台,转到“在线商店”>“主题”>“编辑主题”。
  2. 根据您希望切换按钮显示的位置,打开“页眉”或“页脚”部分。
  3. 查找诸如“启用语言选择器”、“显示语言选择器”或“本地化”之类的设置。
  4. 启用选择器,然后单击“保存”。

一旦您的商店在客户所在的市场中提供了多种已发布的语言,语言切换器应显示可用的语言选项。

Shopify 的免费主题(包括Dawn、Craft、Refresh、Sense 和Studio)在当前版本中均支持在页眉和页脚中使用语言选择器。从 9.0.0 版本起,免费在线商店 2.0 主题以及 Horizon 系列主题均支持在页眉中放置语言选择器,无需额外编写代码。

对于高级主题,语言选项的显示位置各不相同。例如,Impulse 主题在页眉工具栏和页脚中支持语言选择,而其他主题可能提供不同的设置或显示位置。如果您找不到该选项,请查阅主题开发者的文档。

较旧的经典主题可能提供的自定义选项较少。如果您的主题不支持您首选的布局位置,您可能需要编辑其 Liquid 模板、切换到较新的主题,或者使用带有独立布局控制功能的翻译应用。

切换器的外观还取决于您的主题。内置选择器通常会显示语言名称,并遵循您网店的字体、颜色和样式。有些主题提供了额外的设计设置,而更全面的自定义可能需要使用 CSS。

此外,请使用 Shopify 的主题预览功能检查移动端布局。根据您所使用的主题不同,切换器可能会出现在页脚、页眉或移动端导航菜单中。请确保客户在小屏幕上也能轻松找到并使用它;如果同时显示了国家/地区选择器,请将其置于附近位置。

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

您可以通过主题的内置设置在 Shopify 页眉中添加语言选择器,或者使用Weglot 提供的“切换器编辑器”,无需修改主题代码即可放置一个可自定义的切换器。

如前所述,要添加 Shopify 的原生语言选择器,请前往 Shopify 管理后台 > 在线商店 > 主题 > 编辑主题,打开“页眉”部分,找到“启用语言选择器”或类似的设置,启用该选择器,然后点击“保存”。

如果您使用的是Weglot ,请打开Weglot ,进入“仪表盘”>“设置”>“语言切换器”>“切换器编辑器”。将切换器拖动到您首选的页眉位置,然后点击“保存”。请选择一个在商店各页面中始终显示的区域,这样当顾客浏览时,切换器就能保持在原位。

为了实现更精确的定位,Weglot 还支持以下 HTML 占位符:


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

您可以将其添加到主题“页眉”区域中的自定义 Liquid 部分或代码块中(如果支持的话),或者将其插入到相应的主题文件中。Weglot 随后会在占位符出现的位置显示切换器。具体位置取决于您主题的布局。

设置完成后,请务必在桌面端和移动端测试语言切换器,包括产品页和系列页。此外,还需测试结账流程,因为Shopify将结账流程与商店页头分开管理,因此在商店页头添加语言切换器并不会自动在结账页面添加该功能。如果您使用的是Weglot 的Shopify Markets集成,Shopify会根据客户之前的选项来处理结账语言,且Weglot 的语言切换器本身在结账过程中不会显示。

使用 Liquid Code 添加切换器

如果您的 Shopify 主题未提供所需的语言选择器位置或设计选项,您可以使用 Liquid 创建一个自定义选择器。这需要编辑主题代码,因此请在继续操作前先备份代码。

要设置和自定义 Shopify 语言切换器,您需要按照以下步骤操作:

  1. 在您的 Shopify 管理后台,转到“设置”>“语言”,然后添加您希望支持的语言。请确保这些语言在您的目标市场中可用,并且您已添加了必要的翻译内容。
  2. 进入“在线商店”>“主题”,然后在主题的三个点菜单中点击“编辑代码”。
  3. 在Sections目录中找到 header.liquid 文件。具体文件及合适的插入位置取决于您的主题,因此在进行修改前请先检查其结构。
  4. 在 header.liquid 文件中找到合适的位置(通常靠近导航菜单),然后粘贴以下 Liquid 代码snippet:

{% 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),并将当前语言标记为已选中。客户从下拉菜单中选择一种语言,然后点击“应用”即可切换。

如果您的主题已经在同一位置显示了语言选择器,请通过主题编辑器禁用现有的语言选择器,以避免重复。

  1. 您可以使用 CSS 来控制切换器的对齐方式、颜色、间距和边框。在主题编辑器中,打开“主题设置”>“自定义 CSS”,然后添加以下示例:

.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;
}

  1. 完成编辑后,点击“保存”以应用更改。此时,根据您的设置,语言切换器应已显示在您的店铺中。请在桌面端和移动端预览您的店铺。

通过Weglot语言切换器增强Shopify商店

Weglot 主页
Weglot 主页

Weglot 这是一款基于人工智能的网站翻译工具,无需对主题进行任何修改,即可为您的 Shopify 商店添加语言切换功能。虽然 Shopify 原生的语言切换功能已能满足基本需求,但像 Weglot 则提供了更丰富的自定义选项,以及额外的 Shopify 翻译功能,适合希望为国际客户真正实现店铺体验本地化的商家。

与Shopify语言切换器不同Weglot 网站内容100%翻译成110多种语言,涵盖结账页面、邮件通知及SEO元数据,并针对搜索引擎进行优化。

__wf_reserved_inherit
翻译清单预览

有了Weglot,您的整个 Shopify 商店都能从自动翻译中受益,从而加速扩展项目。与为每种语言聘请单独的翻译人员相比,Weglot的自动化大大缩短了新语言版本的上市时间。

然而,Weglot的功能不仅限于自动翻译。使用Weglot,您可以对网站上的翻译内容进行完全编辑控制。您还可以直接通过该平台聘请专业翻译人员。

您还可以使用Weglot 的AI翻译模型,即时生成符合品牌风格的翻译。该模型会根据您的指示、术语表和手动翻译历史进行学习,从而立即为您提供符合上下文且风格与您一致的翻译。

Weglot 还与 Shopify 的现有功能和流行的第三方应用程序集成,包括对Dawn和Prestige 等主题的定制。您可以根据需要添加、发布、取消发布或删除语言,从而省去了管理多个店铺或手动翻译的麻烦。

Weglot 提供翻译服务,其核心功能Weglot 包含多语言SEO优化。该平台会为每种语言版本自动创建子域名或子目录,并实施hreflang标签,从而优化您网站在本地搜索引擎中的表现。此外,我们的 Visual Editor 支持轻松定制翻译内容,可精细调整以契合品牌语调。

Weglot Visual Editor
Weglot Visual Editor

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

在您的 Shopify 商店中设置Weglot

通过 Shopify 应用程序商店‍购买Weglot
通过 Shopify 应用商店查看Weglot

在您的 Shopify 商店中设置Weglot 非常简单。以下是一份入门指南:

1.首先访问Shopify 应用程序商店:

  • 在搜索栏中输入 Weglot 并找到Weglot 应用程序。
  • 单击 "安装",然后按照提示将其添加到您的商店。

2.安装应用程序后,您需要设置一个账户:

  • 从 Shopify 面板打开Weglot 应用程序。
  • 输入您的电子邮件地址并选择密码。

3.配置语言设置:

  • 接下来,选择您的原始语言(Shopify 商店的语言)。
  • 然后,选择要将内容翻译成的目标语言。
按语Weglot翻译
Weglot集中式仪表板

选择语言后,Weglot 会自动扫描您商店中的所有内容,包括元数据和来自第三方应用程序的内容。自动检测意味着您无需手动收集需要翻译的内容,因为Weglot 会为您完成这一切!

随后,您的网站将通过领先的AI翻译技术进行即时翻译,并根据您在Weglot 控制台中选择的结构,显示在相应的语言子目录或子域名下。

Weglot切换器:设计与布局选项

Weglot切换器提供丰富的自定义选项,可根据您的店铺品牌进行个性化调整,呈现专业级效果。具体自定义方法如下:

  1. 访问视觉语言切换器编辑器:进入您的Weglot 导航至设置>语言切换器。
  2. 改变外观: 可从下拉菜单、按钮或旗帜等多种格式中选择,以显示语言选项。例如:
    • 使用旗帜快速识别。
    • 选择按钮,显示效果更突出。
Weglot语言切换器的进阶选项
  1. 调整位置:您可以将切换器放置在页眉、页脚或侧边栏等关键区域,具体位置视您的布局而定。
  2. 修改颜色和样式:在Weglot 设置中自定义颜色和样式,使其与您的商店品牌相一致。

重要的是,语言切换器无需修改主题即可轻松重新定位,确保在您商店的不同页面上始终保持易于访问且用户友好。有关高级布局设置,请参阅下方关于"克服Shopify商店本地化常见难题"的章节。

高级定制:开发人员的编码技巧

对于希望使用Weglot 增强其 Shopify 商店的开发人员来说,定制是创建量身定制的多语言体验的关键。Weglot的灵活性使开发人员能够创建定制的多语言体验,同时对非技术用户保持友好。

以下是一些值得考虑的编码技巧:

使用CSS微调语言切换器外观

开发人员可以修改背景颜色、字体大小和填充等样式,以匹配商店的品牌。例如

select {    
background-color: #f0f0f0;    
 border: 2px solid #007bff;    
 border-radius: 5px;    
 padding: 10px;
}

为自定义功能执行 JavaScript

开发人员可以使用 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 ,实现跨语言无缝页面转换

Weglot的主要功能之一是自动创建特定语言的 URL,例如为网站的法语版本创建 example.com/fr。合理的 URL 结构可确保搜索引擎能够索引每个语言版本,从而提高多语言搜索引擎优化效果。

无论是浏览商品还是结账,Weglot 都能帮助顾客在购物过程中轻松切换语言。当顾客从英文产品页面切换到西班牙文等同页面时,他们会体验到流畅的转换,而不会丢失他们在购物过程中的位置。此类功能可影响网站停留时间和转换率等关键指标,提高客户满意度,并最终推动全球增长。

举例来说,Everyone.org 使用Weglot 创建了一个 12 种语言的多语言网站,其总访问量增加了 40%,其中法语用户的转换率几乎是全站平均转换率的两倍。

Everyone.org 主页
Everyone.org 主页

优化多语言搜索引擎优化并保持页面一致性

多语种搜索引擎优化可确保您的产品能够被不同语言搜索的用户发现,从而提高在线流量。多语种搜索引擎优化的一个基本方面是拥有适当的 URL 结构,使用子目录有助于搜索引擎识别不同语言的网页并对其进行排名。

Hreflang 标签在这一过程中发挥着重要作用,它能让搜索引擎了解网页的语言和地区定位。这有助于引导用户访问网站的最相关版本。

经过翻译的元数据(包括标题标签和描述)可进一步提高搜索能见度。Weglot 可自动完成大部分技术性搜索引擎优化工作,自动创建特定语言的 URL 并实施 hreflang 标签,无需人工干预。

以图片形式解释 URL、元描述和页面标题
以图片形式解释 URL、元描述和页面标题

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

设置词汇表规则
设置词汇表规则

要想在多语言搜索引擎优化方面多走一步,Shopify店主可以采取以下措施:

  • 针对每个目标市场进行本地化关键词研究。
  • 确保所有内容(包括元数据)翻译准确无误。
  • 定期审查翻译,以反映语言趋势的变化。

请记住,有效的多语言搜索引擎优化(SEO)能够带来更多市场机遇!在采用Weglot 进行多语言优化后,Shopify商家RonDorff的网站访问量实现了惊人的400%增长。

罗恩-多罗夫主页
罗恩-多罗夫主页

克服 Shopify 商店本地化中的常见挑战

Shopify 店铺本地化会遇到一些独特的挑战,但Weglot 可提供有效的解决方案,让您轻松完成整个过程。

要在 Shopify 网站上更改Weglot 切换器的位置,可采用以下四种方法之一:

1.切换器编辑器功能

使用切换器编辑器,将语言切换器直接拖拽到网站的实时预览界面中。此方法要求您的网站已上线运行。

2.添加到菜单

在主菜单中创建自定义语言切换器,将其Weglot 关联。前往Shopify管理后台>在线商店> 导航设置,为每种语言添加菜单项时请使用格式Weglot(例如Weglot 代表英语)。您还可创建语言下拉菜单。

3.Weglot 选项

将以下代码snippet 插入snippet Theme.liquid 文件的所需位置:


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

此代码将语言切换器放置于您插入代码的位置,解决了社区论坛中讨论的常见位置限制问题。

4.切换器选项

修改weglot.liquid 中的weglot 初始化代码,手动集成切换器。包含切换器选项,并指定希望切换器出现的 CSS 目标选择器:

Weglot.initialize({  
api_key: "YOUR_API_KEY",  
 switchers: [{     
  location: { target: ".header-nav" }   
 }]
});

确保将 .header-nav 替换为所需元素的 CSS 选择器。

使用Weglot,您还将获得以下本地化优势:

  • 动态内容翻译: Weglot 可有效翻译 JavaScript 生成的内容和 AJAX 加载的元素,确保捕捉并翻译所有动态内容。
  • Shopify 的多语言搜索引擎优化: Weglot 可自动执行 hreflang 标签并创建特定语言的网站地图。这与 Shopify 的内置搜索引擎优化功能相辅相成,允许搜索引擎向用户提供正确的语言版本。
  • Shopify 特定元素的翻译: Weglot 可处理您整个商店的翻译工作,包括结账页面、电子邮件通知和元字段,从而克服了Shopify 文档中所述的限制。
  • 优化翻译工作流程: Weglot的翻译记忆库和词汇表功能可帮助您在大型产品目录中保持一致性。这确保了术语的统一翻译,保证了您的品牌信息在不同语言中的一致性。

Weglot eglot与Shopify原生语言切换器的对比

功能 Weglot Shopify
翻译方法 通过多个引擎(DeepL、Google 等)进行自动翻译,并可完全手动编辑。 人工翻译;可通过与翻译工具集成实现自动化。
内容范围 对网站进行 100% 的翻译,包括导航、页眉、页脚和元信息。 需要额外的应用程序才能实现全面翻译(如导航)。
搜索引擎优化 服务器端翻译带有自动 hreflang 标记,每种语言都有唯一的 URL。 为每种语言创建单独的 URL,还包括用于搜索引擎优化的 hreflang 标签。
定制选项 高度可定制的语言切换器,配备visual editor 。 可使用 Liquid 代码自定义的基本语言选择器。
用户体验 Visual Editor 实时编辑和上下文翻译调整。 根据用户选择的语言或 URL 自动显示翻译内容。
易用性 用户友好型设置,无需编码;处理翻译的技术问题。 需要在 Shopify 管理器中进行一些设置;用户需要第三方应用程序来满足更复杂的需求。

Shopify 为用户提供将其店铺翻译成多种语言所需的基本工具,但也存在一些限制。

相比之下,Weglot 提供了一个全面的翻译解决方案,并迎合了 Shopify 的局限性。因此,该平台更适合那些希望放手进行多语言内容管理的用户。

克服语言障碍:在您的 Shopify 商店中使用Weglot

正如我们所见Weglot 独特优势,使其成为克服在线语言障碍的理想解决方案。Weglot语言切换器,您可获得更多自定义选项以提升用户体验;而Visual Editor 上下文翻译Visual Editor ,让您随时随地优化内容。您甚至能直接通过控制面板订购专业翻译服务,确保内容准确无误。

Weglot 可与常用的 Shopify 应用程序集成,包括智能搜索工具和图片库,确保您的店铺在多语言环境下保持完整功能。此外,我们的平台还能创建特定语言的子域或子目录,大大提高搜索引擎优化效果。

最重要的是,Weglot 与所有内容管理系统兼容,这意味着如果您不再使用 Shopify,也不会失去Weglot 的优势。

立即开始使用Weglot 的14天免费试用,几分钟内即可拥有一个多语言网站!

常见问题和快速解决方案

主题更新、应用安装或布局调整后,语言切换器有时会消失。这些问题通常与您的主题设置或切换器的位置有关。下面让我们来排查四个最常见的故障原因。

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

看到两个切换器通常意味着 Shopify 的原生切换器和您应用的切换器(例如Weglot )同时处于激活状态。此外,您可能还配置了多个Weglot 切换器。

首先,打开Shopify 管理后台 > 在线商店 > 主题 > 编辑主题。检查页眉和页脚中是否存在 Shopify 的原生语言选择器,如果您使用的是“Weglot ”,请将其禁用,然后保存更改。具体设置取决于您的主题。此外,如果客户需要通过国家/地区选择器来选择目标市场,请保持该功能启用。

如果两个切换器都属于Weglot ,请打开Weglot 仪表盘 > 设置 > 语言切换器 > 切换器编辑器。检查已配置的切换器有哪些,以及它们是否设置为在相同的屏幕尺寸下显示。Weglot 支持分别配置桌面版和移动版切换器,因此请确保它们不会意外地同时显示。

如果您已在 Shopify 导航中添加了语言链接,请检查它们是否与Weglot 的常规语言切换器并列显示。如果您不需要同时显示这两个选项,请删除多余的菜单项。

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

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

如果更新 Shopify 主题后语言切换器消失了,这并不一定意味着您的翻译内容丢失了。问题可能出在切换器的设置上,或者它在新主题中的位置有问题。

如果您的配置使用了语言子目录,请测试您商店中一个已翻译的 URL,例如 yourstore.com/fr/。如果页面显示了翻译后的内容,但语言切换器缺失,那么问题可能出在语言切换器的显示上,而不是翻译内容本身。

如果您使用的是 Shopify 的内置语言切换器,请务必确认您的其他语言是否仍在“设置”>“语言”下处于已发布状态。如果它们未被标记为“已发布”,则不会在任何地方显示。

如果您使用的是Weglot :

  1. 请确认“Weglot ”已启用:打开“在线商店”>“主题”>“编辑主题”>“应用嵌入”,找到“Weglot ”,如果该功能处于禁用状态,请将其启用。点击“保存”,然后查看您的商店前端。
  2. 重置切换器的位置:如果切换器仍然不见,请打开Weglot 仪表盘 > 设置 > 语言切换器 > 切换器编辑器。在“位置”下,选择“重置为默认位置”。这将把切换器恢复到右下角。
Weglot “切换器编辑器”,其中“重置为默认位置”按钮被高亮显示
在“切换器编辑器”中重置切换器的位置
  1. 如有需要,请选择新位置:如果切换器再次出现,其原位置可能已不适用于您更新的主题。请使用“切换器编辑器”将其拖动到商店中始终显示的某个元素内的新位置,然后点击“保存”。

如果您已手动将Weglot 的切换器添加到主题代码中,请检查更新是否保留了您的自定义位置。例如,如果您之前使用的是 <div id="weglot_here"></div>, 请确认它是否仍位于预期位置。如果已被移除,请在确认其位置与更新后的布局兼容后,从之前的主题版本中将其恢复。

此外,请在桌面端和移动端都检查一下您的网店。如果切换器在桌面端能正常工作,但在移动端却无法正常工作,可能是屏幕尺寸可见性设置或您所用主题的移动端布局导致的。接下来我们将详细探讨这一点。

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

如果您的 Shopify 语言切换器在桌面端显示,但在移动端却不见了,可能是被主题的移动端布局隐藏了,或者被设置为仅在较大屏幕上显示。

如果您使用的是 Shopify 的内置切换器,请打开“在线商店”>“主题”>“编辑主题”,然后选择移动端预览。根据您使用的主题,检查语言选择器是否出现在页脚、页眉或移动端菜单中。如果未显示,请确认相关语言选择器设置已启用。某些主题可能需要进行额外自定义,才能将其显示在您首选的移动端位置。

如果您使用的是Weglot :

  1. 打开Weglot 仪表盘 > 设置 > 语言切换器 > 切换器编辑器。
  2. 从左上角的下拉菜单中选择您现有的切换器。在“行为”>“在特定屏幕尺寸上显示”下,请确认其已配置为在移动设备上显示。
  3. 如果您想要不同的移动端布局,请在编辑器的左下角选择“移动端视图”,点击“+”按钮创建一个独立的切换器,然后将其拖动到您希望的位置。
  4. 点击“保存”,然后检查您的桌面版和移动版切换器是否在预期的屏幕尺寸上显示正常。

如果您的移动端页眉空间不足,也可以将语言链接添加到移动端导航菜单中。请前往 Shopify 管理后台 > 内容 > 菜单, 选择您移动端导航所使用的菜单,并按照Weglot 中的链接格式为每种语言添加一个菜单项,例如 #Weglot-en 英语或 #Weglot-fr 法语。如果您的主题支持,还可以将这些链接归类到“语言”下拉菜单中。

如果切换按钮仍然不见,请检查是否是自定义 CSS 在较小屏幕上将其隐藏了,或者它是否被放置在仅限桌面的导航元素内。将其移动到一个可见且位置固定的位置可能会解决此问题。

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

如果您的Weglot 语言切换器只有在刷新页面后才会显示,那么该问题可能与您的Shopify主题加载内容的方式或切换器的位置有关。

请尝试以下解决方法:

  1. 就像我们在上面的第二个问题中所做的那样,重置切换器的位置。如果切换器现在能稳定显示,那么问题可能出在它之前的位置上。Weglot 建议将其放置在商店所有页面中都存在的某个元素内部。
  2. 请检查您主题的页面切换效果。某些 Shopify 主题会使用动画或 AJAX 导航在页面之间切换,而无需完全重新加载页面,这可能会影响Weglot 的运行。如果您的主题提供了这些设置,请前往“在线商店”>“主题”>“编辑主题”>“主题设置”,查找“性能”或“动画”选项。Weglot 建议在有这些选项的情况下,选择“Sport”而非“Ludicrous”,并禁用“页面间动画”功能。
  3. 请检查任何自定义切换器代码。如果您手动自定义了Weglot 的位置,请确认在切换器加载时所选位置是否存在。如果头部或导航元素在稍后才出现,可能需要进行额外的集成工作。

最后,请在无痕浏览器窗口中测试您的网店,从首页开始,依次浏览不同的商品和系列页面。如果问题仍然存在,请联系Weglot 客服,并提供您的网店网址、主题名称以及重现该问题的操作步骤。

在这份指南中,我们将探讨:

本页面提供11种语言版本,包括Weglot

过去 90 天内,翻译页面带来的访问量为 0 次。

基于您自身广告制定的新市场进入计划
请输入您的着陆页以及您希望进军的国家/地区。几分钟内,您将看到经过本地化的页面和最佳广告、当地买家搜索的内容、已在该地区投放广告的竞争对手,以及应采取的首批行动。

了解更多关于与Weglot合作的信息

常见问题图标

常见问题

没有找到任何内容。
开始使用

准备开始吧

几分钟内触达新受众,无需占用你团队的时间。任何人都可以安装。