### 📢 Veryfb课代表本帖排查指南针对同行 @"0111"#13926 提出的关于 **Shopify在线聊天插件** 的痛点与求助，结合评论区大佬们的实操会诊经验，为大家整理了以下核心解法与排查链路： [hr] **🌟 本帖精华/最佳解答：** **💡 核心解法：[【纯代码接入WhatsApp极速引流方案】](https://club.veryfb.com/d/33045/5)** - 放弃臃肿插件，直接将提供的一段包含 SVG 的悬浮按钮代码放置在 `theme.liquid` 的 `` 标签前。修改自身号码后，买家点击即可拉起手机或网页端 WhatsApp，直接沉淀至私域，且网页加载零负担。 - 贡献大佬：@"Pukii"#13025 (🔥 高赞) [hr] **🛠️ 核心排查链路 / 其它流派解法：** **💡 排查视角1：[【图标比例失调与样式覆盖排查】](https://club.veryfb.com/d/33045/17)** - 若置入代码后图标比例异常且修改无效，通常是因为网站（如 Ella 模板）的全局设置导致样式被强行覆盖。解决方案是利用 ChatGPT 在自定义 CSS 样式中加入 `!important` 强制提权生效。 - 贡献大佬：@"Pukii"#13025 **💡 排查视角2：[【SVG代码内部参数调整点】](https://club.veryfb.com/d/33045/24)** - 若需从代码层手动调整图标基础尺寸，应精准定位到代码行中的 `viewBox` 参数，以及紧随其后的 `width` 和 `height` 属性（如修改数值 32）来进行测试。 - 贡献大佬：@"bignewnew"#18168 **💡 排查视角3：[【常规商业客服插件备选库】](https://club.veryfb.com/d/33045/38)** - 如果因代码冲突难以解决且愿意牺牲部分速度，推荐测试市面上成熟的主流第三方插件：Tidio、Tawk.to、Shopify Inbox、LiveChat、Chatra 或 Willdesk。 - 贡献大佬：@"AdsPower"#3298 [hr] **‼️ 避坑：** - 新站部署代码时，极易触发 **全局样式覆盖** 导致排版错乱。若目标客群包含不熟悉智能手机的老年群体，桌面端同样会触发拉起 Web 版 WhatsApp 的指令，无需担忧设备兼容性。 > ℹ 本帖重点由 Veryfb 课代表结合 AI 辅助整理。强烈建议大家仔细阅读原帖，获取全部细节！

shopify有什么好用的在线聊天插件吗？

0111

1111

PolPot

同问

Pukii

直接上代码接入WhatsApp，比插件快还好用

0111

Pukii 怎么搞哇

Pukii

<a href="https://wa.me/8612345678900?text=Hello%20VeryFb%20team%2C%20I%20have%20a%20question!" style="position:fixed;width:60px;height:60px;bottom:20px;right:20px; background-color:#25D366;color:#FFF;border-radius:50%; text-align:center;box-shadow: 2px 2px 6px rgba(0,0,0,0.3); z-index:1000;display:flex;align-items:center;justify-content:center;" target="_blank"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="#FFFFFF"> <path d="M16 0C7.163 0 0 6.953 0 15.525c0 2.738.742 5.26 2.027 7.47L.03 32l9.11-2.387a16.05 16.05 0 0 0 6.86 1.513C24.837 31.126 32 24.174 32 15.525 32 6.953 24.837 0 16 0zm0 28.78a13.26 13.26 0 0 1-6.647-1.772l-.477-.285-5.412 1.42 1.44-5.256-.312-.54A12.63 12.63 0 0 1 3.05 15.5C3.05 8.905 8.918 3.38 16 3.38c7.08 0 12.95 5.525 12.95 12.12 0 6.598-5.87 12.123-12.95 12.123zm7.183-9.04c-.396-.198-2.34-1.157-2.704-1.288-.36-.132-.62-.198-.88.198-.257.396-1.013 1.288-1.24 1.555-.228.264-.457.297-.853.099-.396-.198-1.674-.617-3.19-1.967-1.18-1.053-1.977-2.352-2.208-2.748-.228-.396-.024-.61.174-.808.18-.178.396-.462.594-.693.198-.228.264-.396.396-.66.132-.264.066-.495-.033-.693-.1-.198-.88-2.127-1.207-2.92-.318-.77-.642-.666-.88-.666-.228-.012-.495-.015-.762-.015a1.47 1.47 0 0 0-1.068.495c-.366.396-1.41 1.38-1.41 3.367 0 1.987 1.44 3.905 1.64 4.17.198.264 2.84 4.356 6.88 6.108.96.414 1.71.66 2.295.844.96.306 1.83.264 2.52.159.77-.114 2.34-.957 2.67-1.881.33-.924.33-1.716.231-1.88-.099-.165-.36-.264-.756-.462z"/> </svg> </a>

上面861234567890改成你WhatsApp号，后面VeryFB改成你团队名称，改成其他的也行。
会全局右下角嵌入一个WhatsApp在线聊天，点击就会默认发送刚刚预设好的打招呼的话，就知道是网站来的
代码放在theme.liquid的</body>前面

0111

Pukii 牛牛牛!!!

0111

Pukii 哪个地方的代码可以改ws的图标大小比例不太协调

bignewnew

Pukii 2px 2px 6px rgba(0,0,0,0.3)

0111 Should it be here? 2px 应该是中间图标的大小，6px应该是整个图标的大小吧？我正准备加在线聊天呢看见这个帖子了哈哈哈，可以试一下看看

kkmao

Pukii 我滴天，这个是不是加载速度飞快，需要用户登录WA吗？还是输入邮箱？可惜我公司没有WA

bignewnew

0111 不对，我刚没注意看代码，发现里面有不少px的哈哈哈，我加上了试试看，找到在哪里了告诉你

bignewnew

0111 不对劲，我这里也是没问题的

Pukii

我这边显示是没问题的，你找gpt改一下就行了

0111

Pukii 好来

Pukii

bignewnew 这是阴影

bignewnew

Pukii 哈哈哈没注意看代码，我以为就这里有px

0111

bignewnew 好滴谢谢，gpt给我也没弄好

Pukii

bignewnew 找gpt改就行了

Pukii

0111 应该是你网站有全局设置导致样式效果被覆盖了，让gpt给你加!important

bignewnew

Pukii <svg xmlns=“http://www.w3.org/2000/svg” viewBox=“0 0 32 32” width=“32” height=“32” fill=“#FFFFFF”>

0111 在这一行的viewBox和后面的width、height里面，32是图标宽度，你改下看有没有生效，还是不行的话就是那个大佬说的被主图的全局样式覆盖掉了

0111

Pukii 难搞还是不行我看看是不是插件问题另外新品牌站用这个会有啥风险吗

Pukii

kkmao 肯定比插件快，这就几行代码，图标还是代码渲染的，比放图片快得多。点击会跳转到用户手机上的ws聊天页面，然后公司的ws可以装饰一下。这样有人聊天直接等于是引流到私域了

kkmao

Pukii 那桌面端呢？我客户有部分老年人手机都不太会用，估计用不了这个，但是这个功能确实非常有用！

Pukii

kkmao 桌面端也会跳转到ws 网页版。手机都不太会用，她咋购物的，主要是插件发信息，你回复客户了，后面就没下文了，在ws聊还能看到已读未读