论坛上的 CSS 代码：用到你的 Shopify 店铺之前，先做这四步

第一个问怎样在一个单独页面上让邮件订阅表单居中，第二个问为什么切换国家后价格还是显示英镑（GBP）。

两个问题当天都有了答案，解决办法却截然不同。邮件表单靠在那个 section 里贴几行 CSS 就居中了，货币的问题则一行代码都不用写。

这两个回答正好对应修改界面细节的头两步：先看现有设置，再把代码贴到范围最小的位置。论坛上其他帖子补上了剩下两步：先在主题副本上测试，销售数据变好了才保留改动。

1. 找代码之前，先看设置

在货币那个帖子里，店主已经在页眉加了国家选择器，可选哪个国家都显示 GBP。回答者解释说选择器本身没问题，因为货币单位取自 Settings > Markets，而不是主题，如果每个国家都设成 GBP，那哪里都会显示 GBP。这位回答者还提醒，店铺要用 Shopify Payments 才能用多种货币销售。

另一位用 Dawn 主题的店主想把尺码按钮改成带边框的方块，和 Add to cart 按钮一样。有人回复说，大部分效果不用代码就能实现，在 Theme settings > Variant pills 里调 Border thickness、Border opacity 和 Corner radius 就行。只有想让各个方块一样大时，才需要加 CSS。

自己加的代码可能在主题更新后失效，Enterprise 主题那个帖子里贴代码的人就特意提醒过。

2. 先在主题副本上测试，因为演示店铺不是你的店铺

设置满足不了需求时，论坛上的代码往往是最快的办法，前提是先在主题副本（Duplicate）上试。从9月底到10月中旬，Shopify Community 上至少有三个人这样提醒过：Enterprise 帖子里贴代码的人、Royce 主题帖子里的一位回答者，还有一篇调整颜色对比度的教程的作者。

这个提醒不是没来由的。在一个 Dawn 主题的帖子里，店主想在 collection 页面上把价格放到产品名称旁边。第一段代码是在 Dawn 的演示店铺上测的，还附了一句说明：真实店铺的 markup（HTML 结构）可能不一样。店主贴上去后回复说没用。

回答者照着真实页面重写了第二版，另一个人又发了第三版。截至10月26日，店主仍没有在帖子里确认问题已经解决。

问题更复杂时，副本还能帮你找出原因。 Royce 上的购物车抽屉（cart drawer）打开后是空的，回答者建议另装一份没改过任何地方的全新 Royce；如果这份也出错，你就可以把检查结果拿给主题开发者。Enterprise 帖子里贴代码的人还提醒，Shopify Support 不处理论坛代码引起的问题。

3. 贴到范围最小的位置，再在两种屏幕尺寸上检查

代码贴在哪里，决定了它会影响多大范围。 在邮件表单居中的帖子里，同一个需求有两种做法：贴到 Email signup section 的 Custom CSS，或者贴到 theme.liquid 文件。店主选了第一种，说这样似乎已经解决了问题。

下表总结了这些帖子里出现的三个粘贴位置：

贴完之后，电脑和手机上都要看一遍效果，因为有些代码只针对一种屏幕尺寸。比如调整 Enterprise 产品页顺序的那段代码，只在手机尺寸上生效。

4. 顾客买得更多才保留改动，页面像参考图不算数

如果只是想让页面更整洁，比如让表单居中，确认没有东西坏掉就够了。但改动一旦涉及顾客挑选和购买产品的地方，就还要多一步：衡量效果。

在 Enterprise 帖子里，店主想在手机上把产品名称、评价和价格移到产品图片上方，和一张参考图一样。另一位成员建议先在一个产品模板上试新顺序，并让价格、变体选项和 Add to cart 按钮挨在一起。

这位成员建议在流量相当的情况下，比较两种布局的加购率（add-to-cart rate）和每访客收入（revenue per visitor）。按这位成员的说法，这样衡量“会告诉你挪位置有没有帮买家拿定主意，而不只是页面是不是更像参考图”。

在自己的店铺上衡量很重要，因为同一个改动可能得出相反的结果。

Visually 是一款测试工具，其 CEO Anya Geimanson 在一篇推广这款工具的帖子里提到，一个 Shopify 品牌在手机版 collection 页面上隐藏了颜色选择框，转化率（conversion rate）因此提升了 5.9%。

在同一篇帖子里，Geimanson 写道：“我见过这个测试在一些品牌上胜出，在另一些品牌上落败。”

你选的指标也可能改变结论。 Daniel Budai 通过 Budai Media 为电商客户做测试，曾分享过一个产品页测试，包含三项改动：

• 重新设计页面顶部，让产品信息排得更清爽
• 在主要产品信息正下方加上合身度（fit）、退换货、免运费和安全支付的说明
• 把较长的产品描述收进一个折叠区块

这比一段 CSS 的改动大，但判断结果的方法同样适用。按 Budai 自己公布的某位客户的数据，转化率几乎没动，只提升了 1.21%，平均订单价值（AOV）却提升了 7.61%，每访客收入提升了 13.06%。

Budai 写道，如果只用转化率来评判，这次测试“看起来只是一次小胜，实际上却是一次明确的胜利”。

所以，改产品页时，决定保留还是放弃之前，要把每访客收入和转化率放在一起看。

看你改的是哪里，再选对应的步骤

回到10月25日那家艺术画店：一件事只需要打开对的设置页面，另一件事只需要在一个 section 里贴几行 CSS。两件事都不涉及顾客怎么挑选产品，所以都用不着衡量这一步。

第四步是留给靠近购买按钮的改动的，比如把产品名称和价格移到图片上方，或者隐藏颜色选择框。这类改动，就让你自己店铺的加购率和每访客收入来拍板，因为其他品牌的结果不一定会在你的店里重现。