Shopify 主题国际化 (i18n) 开发:多语言与多货币支持 - shopi8 中文建站教程

Shopify 主题国际化 (i18n) 开发:多语言与多货币支持

摘要

让你的主题卖向全球!拆解 Shopify 多语言(Locales)架构。掌握 t 过滤器的使用、JSON 翻译文件的组织,以及多货币切换器的前端实现。

先判断问题出现在哪里

如果你的主题里写死了 <button>Add to Cart</button>,当一个法国商家使用你的主题时,他会绝望地发现这个按钮无法变成法语。

主题国际化  开发的四项 Shopify 检查清单
主题国际化 开发的四项 Shopify 检查清单
Shopify 主题国际化 (i18n) 开发:多语言与多货币支持 总览图
先看这张总览图,再对照正文里的步骤、字段和检查项操作。

核心逻辑是:代码中绝对不能出现硬编码(Hardcoded)的静态文本。

所有的文本需要被提取为“翻译键(Translation Keys)”,存放在 locales/ 目录下的 JSON 文件中。在前端,通过 Liquid 的 t 过滤器(Translate Filter)动态调用。Shopify 会根据当前用户选择的语言环境,自动去对应的 JSON 文件中寻找翻译并渲染。

实战步骤

步骤 1:建立 locales/ 目录结构

操作路径在主题根目录的 locales 文件夹中创建 JSON

  1. 创建默认语言文件:en.default.json(英语)。
  2. 创建其他语言文件:fr.json(法语)、zh-CN.json(简体中文)。
  3. JSON 结构规范:按页面或组件进行层级嵌套。
    // en.default.json
    {
      "products": {
        "product": {
          "add_to_cart": "Add to cart",
          "sold_out": "Sold out"
        }
      }
    }

步骤 2:在 Liquid 中使用 t 过滤器

操作路径替换所有硬编码的文本

  1. 基础调用
    <button>{{ 'products.product.add_to_cart' | t }}</button>
  2. 带变量的动态翻译
    JSON 中:"cart_count": "You have {{ count }} items in your cart"
    Liquid 中:{{ 'cart.general.cart_count' | t: count: cart.item_count }}

步骤 3:翻译 Schema 中的后台配置项

操作路径在 {% schema %} 中使用 t 标签

  1. 不仅前台要翻译,后台给商家看的设置面板也要翻译!
  2. 在 Schema 中,不能使用 {{ 'key' | t }},需要使用 t: 前缀。
    "settings": [
      {
        "type": "text",
        "id": "title",
        "label": "t:sections.featured_collection.settings.title.label"
      }
    ]

步骤 4:实现多货币与多语言切换器 (Localization Form)

操作路径在 Header 或 Footer 中添加切换表单

  1. 使用 Shopify 原生的 {% form 'localization' %}
    {% form 'localization', id: 'FooterLanguageForm' %}
      <select name="locale_code" onchange="this.form.submit()">
        {% for language in localization.available_languages %}
          <option value="{{ language.iso_code }}" {% if language.iso_code == localization.language.iso_code %}selected{% endif %}>
            {{ language.endonym_name }}
          </option>
        {% endfor %}
      </select>
    {% endform %}
  2. 当用户选择新语言并提交表单时,Shopify 会自动刷新页面并切换到对应的语言环境。

常见误区与处理方法

误区一:在 JavaScript 文件中直接使用 t 过滤器

规避方法:这是前端新手最容易犯的错误。你写了一个 theme.js,在里面写了 alert("{{ 'general.success' | t }}");。结果浏览器直接报错,因为 .js 文件不会经过 Shopify 服务器的 Liquid 引擎解析,它只是一堆静态的文本!在外部 JS 文件中,绝对不能写 Liquid 代码。 正确的做法是:在 theme.liquid<head> 中,定义一个全局的 JavaScript 对象,将需要的翻译文本注入进去:

<script>
  window.themeStrings = {
    successMessage: {{ 'general.success' | t | json }}
  };
</script>
然后在你的 theme.js 中调用 alert(window.themeStrings.successMessage);

误区二:JSON 翻译文件缺少键值导致页面大面积报错

规避方法:你在 en.default.json 里加了一个新的翻译键 "new_feature": "New",但在 fr.json 里忘记加了。当法语用户访问时,页面上原本该显示文字的地方,会直接暴露出一长串丑陋的错误代码:Translation missing: fr.products.new_feature。这会让网站显得非常不专业。在发布主题前,需要使用 Shopify Theme Check 工具扫描代码。 它会自动对比所有 locales/ 下的 JSON 文件,揪出所有缺失的翻译键。

误区三:多货币切换后,Ajax 购物车里的价格没有更新

规避方法:用户在页脚把货币从 USD 切换到了 EUR。页面刷新了,产品页的价格变成了欧元。但当用户点击“加入购物车”弹出 Ajax 抽屉时,里面的价格居然还是美元!这是因为你的 Ajax 购物车是通过 JS 渲染的,而 JS 里缓存了旧的货币格式。在处理多货币时,前端 JS 需要监听货币切换事件,或者在每次 Ajax 请求购物车数据时,强制要求 Shopify 返回带 HTML 货币符号的格式化价格(Formatted Price),而不是自己用 JS 去拼接数字。

常见问题

学习「Shopify 主题国际化 (i18n) 开发:多语言与多货币支持」前需要什么基础?

建议先熟悉 HTML、CSS、基础 JavaScript 和 Shopify 后台结构。涉及 Liquid、Section、Schema 或主题工作流的内容,可以边读边在测试主题里练习,不要直接改线上主题。

可以直接在正在使用的线上主题里操作吗?

不建议。主题开发和结构调整应先在复制主题、开发主题或本地环境中完成,确认移动端、产品页、购物车和关键模板正常后,再发布到线上主题。

修改主题前最应该备份什么?

至少保留当前主题副本,并用 Git 记录代码变化。如果文章涉及主题编辑器配置,还要注意模板 JSON 和 settings_data.json 这类配置文件是否需要同步。

遇到教程和后台界面不一致怎么办?

优先以当前 Shopify 后台、主题代码和官方文档为准。Shopify 后台和 CLI 会持续更新,旧截图可用于理解路径,但不能替代当前界面提示。

这类主题开发内容适合什么时候上线到正式店铺?

当改动已经在测试主题中完成移动端、桌面端、产品页、集合页、购物车和速度检查后,再安排上线。影响结账、价格、库存或应用兼容的改动要单独回归。

下一步阅读

📢 Share this article

Any other questions?

Our professional team is ready to answer your questions.

Was this article helpful to me?

This article is suitable for all merchants and developers who want to learn about Shopify. Whether you are a beginner just starting out with Shopify or an advanced user looking to improve your skills, you will gain practical knowledge and techniques from it. The methods in this article have all been tested and proven in practice and can be directly applied to your projects.

How can we apply the methods described in the article?

Each step in this article comes with detailed instructions and code examples, which you can directly copy and use. It's recommended to try it in a test environment first to confirm the results before applying it to the production site. If you encounter any problems during implementation, feel free to leave a comment or join our discussion group for help; we and our community members will be happy to assist you.

Can the code in the article be used directly?

Yes! All the code examples we provide have been tested and can be used directly in your Shopify theme. Remember to adjust the parameters and styles according to your actual needs. If you encounter any problems, feel free to leave a message for discussion.

How often will new content be updated?

We publish 2-3 high-quality Shopify tutorials and operational tips every week. Follow our WeChat official account or join our discussion group to get the latest content and exclusive resources first.

Can I get help if I encounter a problem?

Of course! You can leave a comment below the article or join our WeChat group to connect with 1000+ Shopify merchants and developers. We'll get back to you as soon as possible.

Ready to get started?

Follow us to get the latest Shopify tutorials and operational tips.

Join the community Contact Us