Shopify站点无法将Weglot语言切换器移至顶部求有效解决方案

我近期在Shopify电商店铺安装了Weglot语言翻译应用，安装后我在设置页面尝试了所有调整CSS的方案，想要将店铺前台的Weglot语言切换器移动到页面右上角，但均未生效。我已联系Weglot官方支持获取了如下解决方案，全部尝试后仍未解决问题，恳请大家帮忙提供正确的CSS代码，让我添加到Theme.liquid文件后即可实现效果。

站点地址：https://www.bluecircle-coffee.com/

已尝试的Weglot官方解决方案（全部未生效） #

1. Weglot_here方案 #

你可以将对应代码粘贴到Theme.liquid文件（或其他liquid文件）中你想要显示语言切换器的位置。

2. Switchers方案 #

参考官方文档说明，通过添加Switchers.options到Weglot.initialize代码中来移动语言切换器位置。

Shopify - 如何更改语言切换器位置（含视频的文档）你可以在Shopify后台 > 在线店铺 > 主题 > 操作 > 编辑代码 > weglot_switchers.liquid路径下找到Weglot.initialize代码

之后你只需将目标元素(".header-nav")替换为你想要放置语言切换器的父元素的CSS选择器即可。
例如，如果你想要将其添加到你的菜单中：
你的目标行应写为：target: ".menu",

查找CSS选择器的提示：

• 右键点击你想要放置语言切换器的元素
• 选择“检查（Inspect）”
• 点击控制台左上角的箭头图标
• 右键点击选中的目标元素
• 选择复制 > 复制选择器（Copy > Copy selector）
• 将代码粘贴到"target"字段中即可。

3. Weglot Anchors方案 #

该方案允许你将Weglot关联到你自己的语言切换器或原生菜单中。参考官方文档说明，Weglot Anchors是你需要添加到语言切换器中用于管理翻译功能的链接。

https://developers.weglot.com/javascript/link-hooks#example-anchor

例如，你创建了一个“语言”菜单项，下设“英语”和“西班牙语”子菜单，英语的链接设为"#Weglot-en"，西班牙语的链接设为"#Weglot-es"即可。

内容的提问来源于stack exchange，提问作者Dhrub