解决ShopAgg独立站手机端翻译与客服按钮遮挡问题

摘要： 本教程将详细介绍如何解决在ShopAgg平台部署的WordPress网站中，手机端浏览时，翻译按钮和客服按钮遮挡底部快捷菜单栏的问题。通过添加自定义CSS代码，您可以轻松调整按钮位置，优化移动端用户体验。

引言

良好的移动端体验对于跨境电商网站至关重要。然而，ShopAgg集成的翻译（GTranslate）和客服（Chaty）插件在手机端可能会与主题自带的底部菜单栏发生位置冲突，导致遮挡，影响用户操作。本教程将引导您通过添加少量CSS代码来解决此问题。

解决方案：使用自定义CSS调整按钮位置

查找解决方案文章：
- 访问 shopagg.com 官方网站。
- 寻找并进入 “知识库 (Knowledge Base)”。
- 在知识库中找到 “WordPress” 相关分类或直接搜索“翻译”、“客服”、“按钮遮挡”等关键词。
- 找到标题类似 “使用ShopAgg部署的WordPress网站，如何修改翻译和客服按钮的位置” 的文章。
登录网站后台：
- 在ShopAgg管理后台找到您的网站，点击“查看详情”进入WordPress网站后台。
进入自定义器 (Customizer)：
- 在WordPress后台左侧菜单栏，点击 “外观 (Appearance)” -> “自定义 (Customize)”。
添加自定义CSS：
- 在自定义器界面中，向下滚动，找到并点击 “附加CSS (Additional CSS)” 选项（可能在“扩展”或“其他”部分）。
- 从ShopAgg知识库的文章中复制提供的CSS代码。
- 将复制的代码粘贴到“附加CSS”文本框中。
（可选）自定义调整距离：
- 粘贴的代码中通常包含一个数值（例如 60px），这个数值代表按钮向上移动的距离。
- 您可以根据需要修改这个数值。例如，增大到 100px 或 200px 可以让按钮移得更高，远离底部菜单栏。请注意，数值过大可能会影响按钮自身的可见性或交互。
发布更改：
- 点击自定义器顶部的 “发布 (Publish)” 按钮以保存并应用CSS代码。
验证效果：
- 访问您的网站前台。
- 使用手机浏览器或在电脑浏览器中模拟手机屏幕模式来查看效果。
- 您应该能看到翻译和客服按钮已经向上移动，不再遮挡底部的快捷菜单栏。