不编造一条动态，Shopify 也有社会认同可以展示

看到这个功能，你该把标签页关掉

去挑一个社会认同应用，你会反复遇到同一个选项，通常被包装成还没有数据时的起步方式。你自己把通知内容打进去，或者工具替你生成一串看起来很合理的购买事件：一个名字、一座城市、一件商品、一个时间。然后它们出现在商品页角落里，摆出一副刚刚有人下单的样子。

顾客不会把那当成营销修辞。他们把它读成关于你这家店的事实，而且是在决定要不要把卡号交给你的那一刻读到的。消费者保护机构把编造的顾客活动和无人给过的背书当作欺骗性广告处理，美国联邦贸易委员会和欧盟消费者法近年都对伪造的评价和推荐动过手。生成的下单提示在你所在的市场会不会被追究，那是律师的问题，不是小部件供应商的问题。

不需要律师的部分是这个：事件如果来自一张清单而不是你的店铺，那张清单会重复。有人开着标签页，看着同样三个名字循环走过，于是学到一件事，这家店在小事上愿意撒谎，同时想让人放心把卡号交出来。用这种代价去填页面一角，太贵了。

一条诚实的提示能说出口的话

BootSignal 的社会认同提示没有编辑框，也没有生成器，因为除了你自己的网站，它没有别的事件来源。它读的是 BootSignal 小部件已经为你的域名存下的动态（评论、表情、评分、投票），然后轮流展示。措辞保持笼统，也不显示访客姓名："有人刚刚留下了评论"，旁边跟一个相对时间。超过三天的动态会退出候选池，所以上个月的一阵热闹没法当成今天下午来回收利用。

这个设计有一个后果，装之前最好是你有意接受的：最近没有动态的店铺，角落就是空的。没有兜底文案，没有填充物，也没有会漏进正式环境的演示模式。

没有要升的套餐，另有两个 Shopify 套餐做不到

安装本身没有需要升级的套餐。Shopify 介绍代码编辑器、模板编辑器、Custom Liquid 分区和应用嵌入块时，没有给其中任何一个附上套餐条件，Basic 套餐页面描述的是一个由你通过内置模板编辑器自行调整的在线商店。有两个套餐被排除在外，理由更根本。Lite 套餐不包含在线商店销售渠道，也就没有店面可以承载小部件。Starter 套餐把你限制在 Spotlight 主题上，并写着其他主题和自定义选项不提供，却没说代码编辑器进不进得去，所以 Starter 记成未核实（它也不再接受新店铺）。

三个小部件各归各的层

加载器是全站的，提示也是全站的，所以两者都该待在布局文件里。另外两个跟页面绑定，该待在分区里。这个分法第一次就做对，能省掉你一个下午。

1. 你的店铺在两个主机名上应答，所以控制台里要有两条

   打开 BootSignal 控制台，把店面域名加进去，再把 .myshopify.com 域名也加进去。小部件是拿 location.hostname 去对你 site id 名下登记的域名，而一家 Shopify 店铺两边都在应答。登记完给你的是 site id，也是你唯一要带进 Shopify 的值。

2. 进代码编辑器之前，先给主题留一份退路

   Shopify 后台打开 在线商店（Online Store），用主题旁边的 "..." 菜单选 编辑代码（Edit code）。手机上是 菜单图标 > 销售渠道（Sales channels）> 在线商店 > 管理模板（Manage themes）> 横向菜单图标 > 编辑代码。动任何东西之前先复制主题，因为一次主题更新就可能把代码改动带走。

3. 加载器和提示一起粘进 theme.liquid

   在文件树里展开 布局（Layout），打开 theme.liquid。两行都放在闭合的 </body> 标签之前，然后 保存（Save）。这里全站布局才是正确的归宿：你希望提示出现在商品页、分类页和购物车上，而且一个加载器就能带动你以后加的每个小部件。defer 原样留着，Shopify 的 Theme Check 把阻塞解析的脚本列为拖慢店面的原因。

   代码复制

   <script src="https://bootsignal.com/bootsignal.js"
           data-site-id="YOUR_SITE_ID" data-lang="zh-cn" defer></script>
   <div data-bootsignal="social-proof-toast"></div>

4. 把用户评价墙放到该放评价的地方

   这一个是页面内容的一块，所以它进分区。不需要代码编辑器的路线是：在线商店 > 自定义，用顶栏中间的下拉菜单换模板，再 Add section（新增一个分区）> Custom Liquid，粘进去。评价墙默认只显示四星以上的评价，网格最多九张卡片，两个都是可以改的属性。

   代码复制

   <div data-bootsignal="testimonials" data-min-stars="4" data-max="9"></div>

5. 实时访客计数放在真的有人的页面上

   这个徽章是按页面算的，所以它要一个 data-thread-id 把页面彼此分开。在商品的主分区文件里，或者放进那个分区的一个 Custom Liquid 区块里，把它绑到商品 handle 上。thread id 里不能有冒号和斜杠，而 handle 从来不带这两个字符。

   代码复制

   <div data-bootsignal="live-visitors" data-thread-id="{{ product.handle }}"></div>

粘进 Custom Liquid 之前有三件事值得先知道。内容不能超过 50kb，小部件的代码段离这个数很远。没闭合的 HTML 标签保存时会被替你补上，粘得潦草的话结构会被悄悄挪动，所以代码段要写完整。它还用不了 {% javascript %} 和 {% stylesheet %} 标签，所以放进去的东西必须是普通 HTML 加一个 <script src>，不能带 Liquid 味道。Custom Liquid 是 Shopify Theme Store 的上架要求，不是平台层面的保证：自建主题或者老主题可以干脆没有它，那样下面的事情就全在代码编辑器里发生。

每个小部件能主张什么，不能主张什么

店铺确实还冷清的时候

这正是那些造假生成器被卖出去的场景，而且它是一个真实的场景。上周才开张的店铺没有东西可以重放。答案不是编造动态，而是先跑那个第一天输出就有用的小部件，同时开始攒另外两个需要的材料。

1. 先在商品页上装评分与评价。它是收集者：用户评价墙和提示读的都是它存下的东西，它不上线，别的就一直空着。
2. 给已经买过的人发一封邮件，附上商品页链接，请他们打个分。服务过的买家是最快的正当评价来源，而这一步正是造假生成器存在的意义所在，它们要替你跳过它。
3. 在同时有人的地方用实时访客计数，比如上新、促销，或者你正在投放的商品。它陈述的是此刻的事实，所以不需要历史也是真的。
4. 冷清的页面就把徽章撤掉。写着一个人在看是准确的，同时也没有用，而挑选在哪里展示它并不算不诚实。
5. 等有了评价再加用户评价墙，然后把提示一直开着。店铺冷清时它保持空白，动态来了它自己开始出现。

如果动态其实发生在你的博客上，Shopify 评论小部件指南讲的是文章分区那一套安装，而文章下的每一条评论，都会变成提示可以在商品页上重放的东西。

促销把流量翻到四倍时它要多少钱

一份订阅就够：每个已注册域名每月 $20 或每年 $200，目录里的全部小部件都在内，价格里没有一项跟流量、浏览量或曝光挂钩。这一点在 Shopify 上比在一个介绍型网站上更要紧，因为你的流量本来就是有季节的。促销那一周会话翻四倍的店铺，付的钱和前一周一样，那个整月提示都空着的店铺付的也一样。

目录是 38 个付费小部件加 33 个免费浏览器工具，你订阅之后发布的小部件也算在里面，这也是这一页上第二个、第三个挂载元素不额外收钱的原因。多的域名在控制台里单独买，开着不止一家店的话就用得上。完整数字在价格页，带价的横向对比在对比区。

你不会注意到的那种失效

每一套诚实的社会认同安装都有一个弱点，值得点破。Shopify 说得很明白：如果你对主题代码所做的改动与主题更新不兼容，更新后的副本里你做的全部代码改动都会被删掉。你的加载器和挂载元素就是代码改动。这件事发生在评论区上，你立刻会发现，页面少了一块；发生在一个只在有真实动态时才出现的提示上，它看起来和一个正常的冷清周没有分别。

所以这个检查得是刻意做的，不能靠眼睛。任何一次主题更新、换主题或者购买主题之后，做这四件事：

1. 随便打开一个店面页面，在网页源码里搜 bootsignal.js。找不到，说明加载器跟着更新走了，全部小部件是掉线，不是冷清。
2. 用普通浏览器标签页打开一个带实时访客计数的商品页。只要小部件在跑，这个徽章就会画出来，所以在没有别的动态的店铺上，它是最快的活着的证据。
3. 哪一段没了就照原位置粘回去：加载器和提示回 theme.liquid，跟页面绑定的挂载元素回各自的分区。
4. 数据不用担心。评论、评分和评价存在 BootSignal 这边，按 site id 和 thread id 归档，粘回去历史原样回来。

把这四行记到你记录主题定制项的地方，跟其他会被主题更新弄坏的东西放在一起。然后去读一读评价墙上正在展示的那些话。有真实动态可展示的店铺，是有顾客在跟它说话，而小部件是这件事里最不有趣的部分。