在导航中放置国家/语言选择器的最佳位置

国际购物者都很清楚这种无声的挫折感：你在一个商店里，价格显示的是错误的货币，无论如何你都找不到更改它的按钮。你滚动到底部，看着一排微小的旗帜图标，点击其中一个，页面重新加载到首页，而不是你看的那个产品。三次点击和一次页面重新加载后，你终于看到了以你的货币显示的价格——但你的耐心已经消耗殆尽。

国家和语言选择器的放置位置不是一个设计细节。这是一个转化杠杆。页眉放置和页脚放置之间的区别可以从参与率、会话时长和国际访客的收入中体现出来。

四种常见的放置方式

国家和语言选择器在 Shopify 商店中出现在四个位置，每个位置在可见性、可用性和技术复杂性方面都有不同的权衡。

页脚放置

最常见的默认方式。Shopify 主题通常在页脚中放置国家/货币选择器，有时是一对下拉菜单，有时是旗帜图标网格。从技术上讲，它是无障碍的，不会占用太多空间。

问题是：大多数访客从不到达页脚。来自 Contentsquare 2024 年数字体验基准的滚动深度数据显示，只有 45% 的电子商务访客滚动超过页面中点，到达绝对底部的更少。对于从柏林登录你的商店并立即注意到货币错误的国际访客来说，滚动到页脚不是自然的反应——他们先看页眉，然后看导航，最后才考虑离开。

页脚选择器在国际访客中的参与率始终低于 8%。它们作为积极搜索它们的少数用户的备选方案，而不是主要互动点。

页眉栏或实用行

比页脚放置更进一步。许多商店在主导航上方添加一个薄的实用栏——有时称为”顶栏”或”公告栏”——在旁边包含国家或货币选择器，以及免运费消息或联系信息等元素。

这种放置方式在页面加载时无需滚动即可看到，这立即提高了发现率。Baymard Institute 对电子商务页眉设计的研究发现，带有地区选择器的实用栏的互动率明显高于仅页脚放置，特别是在移动设备上，页眉是唯一默认可见的导航元素。

权衡点是空间。在移动设备上，实用栏与徽标、汉堡菜单、购物车图标和搜索框竞争。在不拥挤界面的情况下将国家选择器放入该行需要仔细设计。许多商店缩写为旗帜图标或两个字母的国家代码，这样可以节省空间但降低清晰度——并非每个购物者都能在 16 像素时识别他们国家的旗帜，两个字母的代码可能不明确（”EN”是指英语还是英国？）。

浮窗小部件

一个持久按钮——通常是地球仪图标或旗帜——浮动在屏幕的一角，点击时打开选择器面板。无论滚动位置如何，始终可见。

浮窗小部件解决了发现问题。它们在每个页面上、每个滚动深度、每个设备上都可见。但它们引入了新问题。在移动设备上，浮窗按钮可能会与内容重叠、干扰其他浮窗元素（聊天小部件、Cookie 横幅、返回顶部按钮），并为屏幕阅读器创建无障碍问题，因为它们在正常文档流之外遇到意外的交互元素。

还有认知成本。浮窗元素与实际内容竞争关注。正在阅读产品描述的用户看到角落里有一个脉动的地球仪图标会经历轻微的分散，在每个页面上都会重复。对于国际流量很大的商店来说，它可能是值得的；对于 90% 的访客是本地的商店，浮窗小部件对大多数人来说是视觉噪音，只是为了服务少数人。

嵌入主导航菜单

参与度最高的方法：将国家和语言选择器放置在导航菜单本身中，作为菜单项或超级菜单中的一个部分。

当访客打开导航浏览类别时，他们看到他们当前的地区和语言与其他菜单项一起显示。点击它会打开一个子面板或下拉菜单进行切换。选择器是上下文相关的——它恰好在访客已处于”导航模式”时出现，考虑接下来去哪里和做什么。

使用这种模式的商店数据显示，与仅页脚放置相比，区域设置的参与度高 2.3 倍。原因是行为学的：访客几乎在每个会话中都会与导航菜单交互，所以将选择器嵌入其中意味着它被被动发现，而不是需要主动搜索。

为什么放置位置影响转化

选择器放置位置与转化之间的联系不仅仅是访客是否找到了按钮。这与他们在旅程中何时找到它有关。

一个来自柏林的访客登录你的商店，立即在页眉导航中看到”USD

English”，他们知道商店没有为他们本地化——但也知道完全如何解决这个问题。一次点击，他们就看到欧元定价。他们从不离开产品页面。摩擦只持续了两秒。

同一访客在仅页脚选择器的商店中看到美元定价，感到不确定，可能无论如何都添加了一些东西到购物车，然后在结账时发现发往德国的运费比预期高得多，因为商店显示的是美国优化费率。他们放弃了购物车。摩擦持续了三分钟，以失去销售而告终。

根据 Baymard Institute 的持续研究，结账放弃原因中全球排名第一的是”意外成本”，影响所有放弃的 48%。对于国际访客，”意外成本”通常意味着货币混淆和运费惊喜，而可访问的国家选择器本来可以在第一页上解决这些问题。

重要的实现细节

仅放置位置还不够。选择器在访客做出选择后的行为对满意度有很大影响。

保留当前 URL。 当访客在产品页面上从美元切换到欧元时，他们应该停留在新货币的该产品页面上。在地区切换后重定向到首页是国家选择器可用性测试中最常见的抱怨。当使用子目录时，Shopify Markets 默认处理正确，但自定义实现和某些第三方应用会重定向到根目录。

记住选择。 设置持久 Cookie 或使用 Shopify 客户元数据来存储访客的选择。上周选择欧元的回访访客本周不应再看到美元。对于使用服务器端地理位置的商店，这尤其重要——Cookie 应覆盖 IP 检测。

将语言与货币与国家分开。 并非每个访客都想要相同的组合。一个在日本的美国侨民可能想要英语、日元和日本运费。强制”日本 = 日语”的商店忽视了一个重要的用户群。如果可能的话，让访客自由组合。

清楚地标记。 使用国家名称和货币代码，而不仅仅是旗帜图标。旗帜不明确（美国和利比里亚国旗在小尺寸时看起来相似），一些访客更多地识别语言而不是国家。”美国

美元

英语”是清晰的。16 像素的旗帜图标是一个猜谜游戏。

快速审计在移动设备上访问你的商店。在不滚动的情况下，你能看到显示哪个国家或货币被选中的任何指示吗？如果没有，你的国际访客可能正在经历相同的困惑。修复不需要重新设计——将选择器移动或复制到页眉或导航菜单通常是配置更改，而不是开发项目。

导航嵌入式方法的实践

最有效的实现方式将国家和语言选择器视为一流的导航元素，而不是附加在页脚上的事后想法。

实际上，这意味着添加一个菜单项——在主导航栏或超级菜单面板中可见——显示访客当前的地区和语言。点击它会打开一个子菜单或覆盖层，其中包含独立更改国家、货币和语言的选项。

Navi+ Menu Builder 对 Shopify 商店本地支持这种模式，让商家通过其拖放界面将国家和货币选择器直接嵌入自定义导航菜单。选择器与类别和集合一起存在，所以访客在浏览时自然发现它，而不是在页脚中寻找它。使用这种嵌入式方法的商店报告显示，区域设置的参与度明显更高，有关货币或运费混淆的支持票据更少。

这一切背后的原则很简单：将选择器放在人们已经看的地方。访客查看导航菜单。他们不查看页脚。相应地设计。

本文是更大指南的一部分：自动检测访客位置：何时重定向，何时询问。