在 Shopify 上卖家庭储能电源/阳台光伏、商用咖啡机、全屋净水系统、企业级打印设备，或者主打「比去门店买省 70%」的长期订阅耗材时，买家心里算的其实是一笔经济账：
「这台机器要卖 $2,400（或者这个方案每月要付 $99），跟我现在直接交电费、去买星巴克、或者租旧设备比，一年到底能帮我省多少钱？多久能回本？」
如果你的商品页只会摆一张冷冰冰的「售价 $2,400」，买家看到标价就会被劝退。
设计机构 Figmatica Studio（由 Mike Yemchura、Arsen Berezovsky、Ludvig Gorey 等团队成员操刀）为澳大利亚数字房贷经纪平台（创始人 Brandon Ngadino）设计的 CheckMyRate: Webflow Site for a Mortgage Broker 案例，核心值得借鉴的是「用清楚的比较和分步问卷，帮助访客判断自己属于哪种需求，再进入咨询」。原案是 Webflow 房贷经纪网站；下方的 Shopify 设备成本与回本计算器，是本文据此延伸的教学实现。
下面我们拆解 CheckMyRate 案例 的四套核心设计与转化手法，并给出将它的「双轨费率对比卡 + 动态折线图计算器 + 分场景选型漏斗」迁移到 Shopify Online Store 2.0 主题中的完整 Section 代码。
一、拆解 CheckMyRate 的四套核心设计与转化手法
1. 色彩与字体：用「深海蓝 + 高亮活力粉（#FC50AD）」打破金融与工具站的沉闷
涉及「算账、分期、参数对比」的网站，十有八九会做成死气沉沉的银行蓝或表格灰。CheckMyRate 在设计规范中给出了一套既稳重又极具亲和力的 6 色系统：
- 主画布与容器色：纯白（
#FFFFFF）配柔和的浅蓝灰容器底色（#F2F4F7），大圆角卡片加上充足的留白，消除复杂数字带来的压迫感。 - 主文字与深色页脚（Dark Navy & Midnight）：正文标题采用深海藏青（
#192131），底部 Footer 采用极深的午夜蓝黑（#0C1018），压住阵脚并承载严谨的监管牌照声明。 - 核心转化与差额高亮色（Accent Pink & Light Pink）：
- 高亮活力粉（
#FC50AD）：专门用于全站最核心的胶囊按钮（Check My Rate、New Loan Enquiry）、标题中的重点词高亮、以及需要强调的参考费率与结果文字；在本文的 Shopify 演示中，它也用来区分新方案的累计成本线； - 柔光浅粉底（
#FDE8F3）：可用于辅助底板与图标圆底。本文的 Shopify 演示以浅粉承载场景提示；原案博客中的专家卡则使用深色底板。 - 单一字体家族（
Onest— Regular / Medium / Semibold）：全站从超大号首屏标题、问卷字段到页脚的小字合规说明，统一使用人文几何无衬线体 Onest。它的数字字宽匀称、开口清晰，在手机小屏幕上读百分比（6.20%vs5.35%）和金额毫不费力。
2. 核心说服引擎：从问卷结果比较，延伸到 Shopify 成本看板
CheckMyRate 把「Check My Rate」做成独立的问卷入口。先收集贷款用途、房产价值、贷款金额、还款方式和当前费率，再给出当前费率与市场参考费率的比较。
这里要分清原案和迁移实现。 原案问卷中能核对到费率比较与月还款、总利息等结果字段；本文没有提交真实贷款申请，也不把展示值当作现行报价或客户已实现的收益。
- 左右并列的比较对象：问卷结果结构包含当前费率和市场参考费率，页面中有
6.20%与5.35%的展示值。两者相差 0.85 个百分点，不能只凭这一差额推出统一的年度省钱金额。 - 把比较变成可解释的金额：迁移到 Shopify 时，可以将两张卡改为「原方案单位成本」和「本店方案单位成本」。同时写清单位、月用量、购机安装投入与额外维护费。
- 用时间轴解释回本：下方教学组件绘制「原方案累计成本」和「新方案累计成本」，后者从初始投入开始。在固定单价与固定用量假设下，两条线应按同一尺度绘制；交点对应简单回本时间。
迁移到 Shopify 独立站的思路：
这套「基准成本 vs. 本店方案成本」的看板，适合高客单价生产力工具与节能/替代型商品。下面保留四类迁移方式；金额均为算术演示，不是相应商品的节省承诺：
| Shopify 独立站细分品类 | 「原方案基准」填什么 | 「本店方案」填什么 | 「运行差额与回本」怎么算 |
|---|---|---|---|
| 1. 家庭储能 / 阳台光伏电站 | 电网峰时电价：$0.42 / kWh |
光伏+储能自用电成本：$0.08 / kWh |
按每月 360 kWh 演示，年度运行差额约 $1,469；购机安装 $4,800、不计其他费用时，简单回本约 3.3 年 |
| 2. 家用/半商用半自动咖啡机 | 每天 2 杯精品咖啡馆外购：$11.00 / 天 |
本机意式萃取（含豆+奶）：$1.30 / 天 |
按 365 天演示，年度运行差额约 $3,541；设备投入 $1,500、不计其他费用时，简单回本约 5.1 个月 |
| 3. 商用餐饮设备 / 激光打包机 | 人工外包或旧设备单件耗材：$1.85 / 件 |
本机自动化批量耗材：$0.32 / 件 |
按每日 300 件、每年 365 天演示，年度耗材差额 $167,535；另扣设备、人工、停机与维护成本 |
| 4. 净水器 / 替芯订阅（Refill） | 购买瓶装矿泉水：$2.20 / 升 |
订阅 RO 滤芯折算水价：$0.12 / 升 |
按 2 升/天、365 天演示，年度运行差额约 $1,518；瓶数按实际容量另算 |
3. 把「复杂选型」拆成两步：分阶段场景卡 + 独立问卷漏斗（06 Questionnaire）
面对不同背景的客户（首次买房、老房转贷、个体户、商业贷款），CheckMyRate 没有让他们自己去翻条款，而是设计了双层分流：
- 首页场景对号入座（“Tailored Loan Solutions For Every Stage Of Life”）：用圆角灰底卡片按人群痛点切分（
Residential Home Loans、Refinancing、Commercial & Business、Self-Employed），每张卡片底部都配一个胶囊按钮直达对应流程。 - 独立的多步互动问卷页（Sitemap
06 Questionnaire）：点击全站随处可见的#FC50AD亮粉按钮（Check My Rate或New Loan Enquiry），进入无干扰的分步选择题漏斗——先选当前诉求、再填当前费率/预算区间，最后一步才收集联系方式或给出推荐方案。
迁移到 Shopify 独立站的思路：
当你的独立站有好几款功率、容量或配置不同的主机（比如 1kWh / 2kWh / 5kWh 储能组合，或者分期付款方案），在首页放一个 Check My Fit / 30 秒选型与分期试算 按钮，让买家先通过 2–3 个胶囊按钮选定使用场景（如「露营备电」「家庭停电应急」「房车离网」），先显示相应商品配置、单位成本、投入与简单回本时间，再进入商品页。分期金额与资格应由实际支付方案提供；例如 Shop Pay Installments有地区、商家及客户资格要求，不能把主题里的试算当成免息分期承诺。
4. 四维信任背书体系：评分徽章 + 合作机构墙 + 创始人视频 + 底部牌照声明
越是涉及大额资金或长期使用的产品，买家越看重「这家店背后是不是正规军」。CheckMyRate 在一个页面里把四层信任证据排得井井有条：
- 第一层（首屏顶部微徽章）：原案设计稿里的
★ 4.9/5 from over 240 reviews紧贴主标题上方。迁移时使用店铺真实评价，不能沿用案例里的数字。 - 第二层（合作品牌跑马灯）：展示澳洲四大行与主流金融机构 Logo（NAB、ANZ、Westpac、Macquarie、St. George 等）——在 Shopify 站里，这里对应权威媒体报道、UL/CE/TÜV 安全认证标志、或支持的金融分期机构（Shop Pay Installments、Klarna、Afterpay）。
- 第三层（创始人真人视频卡）：专门设置
A Message From Our Founder: Why CheckMyRate?区块，放创始人 Brandon Ngadino 的实拍视频封面与亮粉色圆形播放键，在博客文章中用深色专家贴士卡补充解释，并配创始人署名。 - 第四层（
#0C1018深色页脚合规披露）：在页脚清晰列出墨尔本实体办公地址、电话、邮箱，以及牌照披露字段；当前官网也保留了这些信息层级，例如（ABN 99 679 350 915 | ACN 679 350 915 | Credit Representative Number 568069 | Australian Credit Licence 387025）。
二、在 Shopify 中如何开发实现这套风格？
下面我们把 CheckMyRate 案例 中最核心的转化组件——「分场景选型胶囊 + 现状 vs. 优化后双轨成本卡 + 实时联动 SVG 省钱曲线图」——整理成一个面向 Shopify Online Store 2.0 主题的交互式 Section 教学示例。
完整 Shopify Section：成本对比、简单回本与分场景选型
将下面这段完整代码保存为 sections/checkmyrate-roi-calculator.liquid。它具备以下特性：
- 沿用原案色板与字体体系：内置 Google Fonts
Onest，严格使用#192131（深海藏青）、#FC50AD（高亮活力粉）、#FDE8F3（柔光浅粉）、#F2F4F7（浅蓝灰容器）与#0C1018（午夜蓝黑）； - 左侧三步互动输入（场景切换 + 用量滑块 + 周期滑块）：买家可以点击切换场景（如「日常家庭使用」「高频重度使用」「小型工作室/商用」），拖动滑块调整每月消耗量，下方以原案色板中的
#FDE8F3浅粉色承载场景提示； - 右侧实时计算「原方案单价 vs. 本店方案单价」+「年度运行成本差额」+「动态 SVG 累计成本对比图（Before 黑线 vs. After 亮粉线）」，底部配
#FC50AD胶囊主按钮跳转到对应商品；组件同时显示初始投入、年维护费和简单回本时间，未配置商品时不提供有效跳转。
展开完整代码 · 790 行
{%- comment -%}
文件：sections/checkmyrate-roi-calculator.liquid
设计参考：CheckMyRate: Webflow Site for a Mortgage Broker (by Figmatica Studio)
功能：Onest 字体 + 深海蓝/活力粉 (#FC50AD) 配色的交互式 ROI 省钱计算器、双轨费率对比卡与动态 SVG 双曲线图
{%- endcomment -%}
<link rel="preconnect" href="https://fonts.googleAPIs.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Onest:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
.cmr-sec-{{ section.id }} {
--cmr-white: #FFFFFF;
--cmr-light-pink: #FDE8F3;
--cmr-accent-pink: #FC50AD;
--cmr-accent-pink-hover: #E83E99;
--cmr-grey-bg: #F2F4F7;
--cmr-navy: #192131;
--cmr-dark-footer: #0C1018;
--cmr-muted: #5A6478;
--cmr-border: #E2E7F0;
--cmr-font: 'Onest', -apple-system, BlinkMacSystemFont, sans-serif;
background-color: var(--cmr-white);
color: var(--cmr-navy);
font-family: var(--cmr-font);
padding: {{ section.settings.padding_top }}px 0 {{ section.settings.padding_bottom }}px;
}
.cmr-container {
max-width: 1280px;
margin: 0 auto;
padding: 0 24px;
}
/* 顶部信任评分徽章与大标题 */
.cmr-header {
text-align: center;
max-width: 760px;
margin: 0 auto 48px;
}
.cmr-review-pill {
display: inline-flex;
align-items: center;
gap: 8px;
background-color: var(--cmr-light-pink);
color: var(--cmr-navy);
font-size: 0.8125rem;
font-weight: 600;
padding: 7px 16px;
border-radius: 999px;
margin-bottom: 16px;
}
.cmr-review-pill span {
color: var(--cmr-accent-pink);
}
.cmr-title {
font-size: clamp(2rem, 4vw, 3.25rem);
font-weight: 600;
line-height: 1.12;
letter-spacing: -0.02em;
margin: 0 0 14px;
color: var(--cmr-navy);
}
.cmr-title em {
font-style: normal;
color: var(--cmr-accent-pink);
}
.cmr-subtitle {
font-size: 1rem;
line-height: 1.55;
color: var(--cmr-muted);
margin: 0;
}
/* 双栏主体：左侧互动问卷滑块 + 右侧双轨对比与省钱曲线 */
.cmr-main-grid {
display: grid;
grid-template-columns: 5fr 7fr;
gap: 28px;
align-items: stretch;
}
@media screen and (max-width: 960px) {
.cmr-main-grid {
grid-template-columns: 1fr;
}
}
.cmr-panel-left {
background-color: var(--cmr-grey-bg);
border-radius: 24px;
padding: 32px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 24px;
}
.cmr-step-label {
font-size: 0.8125rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--cmr-muted);
margin: 0 0 10px;
}
/* 场景选择胶囊按钮（对应原案 Questionnaire 分流） */
.cmr-scenario-group {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.cmr-scenario-btn {
background-color: var(--cmr-white);
color: var(--cmr-navy);
border: 1.5px solid var(--cmr-border);
border-radius: 999px;
padding: 10px 18px;
font-family: var(--cmr-font);
font-size: 0.875rem;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
}
.cmr-scenario-btn.is-active,
.cmr-scenario-btn:hover {
background-color: var(--cmr-accent-pink);
color: var(--cmr-white);
border-color: var(--cmr-accent-pink);
}
/* 滑块控件 */
.cmr-slider-box {
background-color: var(--cmr-white);
border-radius: 16px;
padding: 18px 20px;
border: 1px solid var(--cmr-border);
}
.cmr-slider-head {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 10px;
font-size: 0.9375rem;
font-weight: 500;
}
.cmr-slider-val {
font-size: 1.25rem;
font-weight: 700;
color: var(--cmr-accent-pink);
}
.cmr-range {
width: 100%;
accent-color: var(--cmr-accent-pink);
cursor: pointer;
}
/* 原案标志性：柔光浅粉 (#FDE8F3) 创始人/专家贴士卡 */
.cmr-tip-card {
background-color: var(--cmr-light-pink);
border-radius: 18px;
padding: 20px 22px;
position: relative;
}
.cmr-tip-quote-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
background-color: var(--cmr-accent-pink);
color: var(--cmr-white);
font-weight: 700;
font-size: 0.875rem;
margin-bottom: 10px;
}
.cmr-tip-text {
font-size: 0.875rem;
line-height: 1.5;
color: var(--cmr-navy);
margin: 0 0 8px;
font-weight: 500;
}
.cmr-tip-author {
font-size: 0.75rem;
color: var(--cmr-muted);
font-weight: 600;
margin: 0;
}
/* 右侧结果看板：双轨费率对比 + 年度节省总额 + SVG 双折线图 */
.cmr-panel-right {
background-color: var(--cmr-grey-bg);
border-radius: 24px;
padding: 32px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 24px;
}
.cmr-rate-cards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
@media screen and (max-width: 600px) {
.cmr-rate-cards {
grid-template-columns: 1fr;
}
}
.cmr-rate-card {
background-color: var(--cmr-white);
border: 1.5px solid var(--cmr-border);
border-radius: 18px;
padding: 20px;
}
.cmr-rate-card--highlight {
background-color: var(--cmr-light-pink);
border-color: var(--cmr-accent-pink);
}
.cmr-rate-label {
font-size: 0.8125rem;
font-weight: 600;
color: var(--cmr-muted);
margin: 0 0 8px;
}
.cmr-rate-num {
font-size: clamp(1.75rem, 3vw, 2.5rem);
font-weight: 700;
line-height: 1.05;
color: var(--cmr-navy);
}
.cmr-rate-card--highlight .cmr-rate-num {
color: var(--cmr-accent-pink);
}
/* 年度节省大字横幅 + SVG 曲线容器 */
.cmr-chart-card {
background-color: var(--cmr-white);
border-radius: 20px;
padding: 24px;
border: 1px solid var(--cmr-border);
}
.cmr-savings-header {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-end;
gap: 12px;
margin-bottom: 18px;
}
.cmr-savings-big {
font-size: clamp(2rem, 3.6vw, 3rem);
font-weight: 700;
line-height: 1;
color: var(--cmr-accent-pink);
}
.cmr-legend {
display: flex;
gap: 16px;
font-size: 0.75rem;
font-weight: 600;
color: var(--cmr-muted);
}
.cmr-legend-dot {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
margin-right: 5px;
vertical-align: middle;
}
/* 底部深海午夜蓝 (#0C1018) 行动与保障条 */
.cmr-cta-footer {
background-color: var(--cmr-dark-footer);
color: var(--cmr-white);
border-radius: 18px;
padding: 20px 24px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 16px;
}
.cmr-btn-pink {
display: inline-flex;
align-items: center;
gap: 8px;
background-color: var(--cmr-accent-pink);
color: var(--cmr-white);
font-family: var(--cmr-font);
font-size: 0.9375rem;
font-weight: 600;
padding: 13px 26px;
border-radius: 999px;
text-decoration: none;
transition: background-color 0.2s ease, transform 0.2s ease;
}
.cmr-btn-pink:hover {
background-color: var(--cmr-accent-pink-hover);
transform: translateY(-1px);
}
</style>
<section class="cmr-sec-{{ section.id }}" data-section-id="{{ section.id }}">
<div class="cmr-container">
<div class="cmr-header">
{% if section.settings.show_review_badge and section.settings.review_rating != blank and section.settings.review_badge_text != blank %}
<div class="cmr-review-pill">
<span>★ {{ section.settings.review_rating | escape }}</span> {{ section.settings.review_badge_text | escape }}
</div>
{% endif %}
<h2 class="cmr-title">
{{ section.settings.heading_prefix | escape }} <em>{{ section.settings.heading_highlight | escape }}</em>
</h2>
<p class="cmr-subtitle">{{ section.settings.subtitle | escape }}</p>
</div>
<div class="cmr-main-grid">
{%- comment -%} 左栏：分场景问卷胶囊 + 交互滑块 + 浅粉专家贴士卡 {%- endcomment -%}
<div class="cmr-panel-left">
<div>
<p class="cmr-step-label">01 · 选择您的使用场景（Tailored Solutions）</p>
<div class="cmr-scenario-group" role="tablist">
{%- for block in section.blocks -%}
<button
type="button"
class="cmr-scenario-btn {% if forloop.first %}is-active{% endif %}"
data-old-cost="{{ block.settings.baseline_unit_cost | escape }}"
data-new-cost="{{ block.settings.optimized_unit_cost | escape }}"
data-upfront-cost="{{ block.settings.upfront_cost | escape }}"
data-annual-extra="{{ block.settings.annual_extra_cost | escape }}"
data-unit-name="{{ block.settings.unit_label | escape }}"
data-default-usage="{{ block.settings.default_monthly_units | escape }}"
data-tip="{{ block.settings.expert_tip | escape }}"
data-cta-text="{{ block.settings.cta_label | escape }}"
data-cta-url="{{ block.settings.product.url | default: block.settings.fallback_url | default: '#' | escape }}"
{{ block.shopify_attributes }}
>
{{ block.settings.scenario_name | escape }}
</button>
{%- endfor -%}
</div>
</div>
<div class="cmr-slider-box">
<div class="cmr-slider-head">
<span>02 · 每月平均消耗 / 用量</span>
<span class="cmr-slider-val" id="CmrUsageVal-{{ section.id }}">60 单位/月</span>
</div>
<input
type="range"
class="cmr-range"
id="CmrUsageSlider-{{ section.id }}"
min="10"
max="300"
step="5"
value="60"
aria-label="每月平均消耗量"
>
</div>
<div class="cmr-slider-box">
<div class="cmr-slider-head">
<span>03 · 测算累计周期（年）</span>
<span class="cmr-slider-val" id="CmrYearsVal-{{ section.id }}">5 年</span>
</div>
<input
type="range"
class="cmr-range"
id="CmrYearsSlider-{{ section.id }}"
min="1"
max="10"
step="1"
value="5"
aria-label="测算累计周期"
>
</div>
<div class="cmr-tip-card">
<div class="cmr-tip-quote-icon">“</div>
<p class="cmr-tip-text" id="CmrTipText-{{ section.id }}">
把日常高频支出从外部零售价切换到自持设备/订阅方案，回本时间需结合设备投入与实际用量计算。
</p>
<p class="cmr-tip-author">{{ section.settings.expert_name | escape }}</p>
</div>
</div>
{%- comment -%} 右栏：双轨单价对比 + 年度省钱大数字 + 动态 SVG 双曲线对比图 {%- endcomment -%}
<div class="cmr-panel-right">
<div class="cmr-rate-cards">
<div class="cmr-rate-card">
<p class="cmr-rate-label">当前传统方式单次成本 (Before)</p>
<div class="cmr-rate-num" id="CmrOldRate-{{ section.id }}">$6.20</div>
</div>
<div class="cmr-rate-card cmr-rate-card--highlight">
<p class="cmr-rate-label">采用本店方案折算成本 (After)</p>
<div class="cmr-rate-num" id="CmrNewRate-{{ section.id }}">$1.35</div>
</div>
</div>
<div class="cmr-chart-card" aria-live="polite">
<div class="cmr-savings-header">
<div>
<div style="font-size:0.8125rem;font-weight:600;color:var(--cmr-muted);margin-bottom:4px;">
年度运行成本差额（Operating Cost Difference）
</div>
<div class="cmr-savings-big" id="CmrAnnualSave-{{ section.id }}">
$3,492/Year
</div>
<div style="font-size:0.8125rem;color:var(--cmr-navy);font-weight:600;margin-top:4px;" id="CmrTotalSave-{{ section.id }}">
5 年扣除初始投入后的差额：—
</div>
<p id="CmrInvestment-{{ section.id }}" style="font-size:.8125rem;color:var(--cmr-muted);margin:8px 0 0;"></p>
<p id="CmrPayback-{{ section.id }}" aria-live="polite" style="font-size:.9375rem;font-weight:600;margin:8px 0 0;"></p>
</div>
<div class="cmr-legend">
<span><i class="cmr-legend-dot" style="background:#192131;"></i>原方案累计支出</span>
<span><i class="cmr-legend-dot" style="background:#FC50AD;"></i>新方案累计支出</span>
</div>
</div>
{%- comment -%} 动态 SVG 双曲线图（Before vs After） {%- endcomment -%}
<svg viewBox="0 0 520 170" width="100%" height="170" role="img" aria-label="原方案与新方案累计支出对比曲线">
<line x1="30" y1="145" x2="500" y2="145" stroke="#E2E7F0" stroke-width="1.5"/>
<line x1="30" y1="95" x2="500" y2="95" stroke="#E2E7F0" stroke-width="1" stroke-dasharray="4 4"/>
<line x1="30" y1="45" x2="500" y2="45" stroke="#E2E7F0" stroke-width="1" stroke-dasharray="4 4"/>
<text id="CmrChartScale-{{ section.id }}" x="30" y="12" font-size="11" fill="#5A6478"></text>
<text x="30" y="165" font-size="11" fill="#5A6478">0 年</text>
<text id="CmrChartYears-{{ section.id }}" x="470" y="165" font-size="11" fill="#5A6478"></text>
<path id="CmrPathBefore-{{ section.id }}" d="M30,145 Q260,105 500,25" fill="none" stroke="#192131" stroke-width="3" stroke-linecap="round"/>
<path id="CmrPathAfter-{{ section.id }}" d="M30,145 Q260,135 500,112" fill="none" stroke="#FC50AD" stroke-width="3.5" stroke-linecap="round"/>
<circle id="CmrDotBefore-{{ section.id }}" cx="500" cy="25" r="5" fill="#192131"/>
<circle id="CmrDotAfter-{{ section.id }}" cx="500" cy="112" r="6" fill="#FC50AD"/>
</svg>
</div>
<div class="cmr-cta-footer">
<div>
<div style="font-size:0.9375rem;font-weight:600;">按您的使用场景查看对应配置</div>
<div style="font-size:0.75rem;color:#A0AAB8;margin-top:2px;">
{{ section.settings.compliance_note | escape }}
</div>
</div>
<a href="#" class="cmr-btn-pink" id="CmrMainCta-{{ section.id }}">
<span id="CmrMainCtaText-{{ section.id }}">Check My Fit & Unlock Savings</span>
<span aria-hidden="true">→</span>
</a>
</div>
</div>
</div>
</div>
</section>
<script>
(function() {
var sec = document.querySelector('.cmr-sec-{{ section.id }}');
if (!sec) return;
var scenarioBtns = sec.querySelectorAll('.cmr-scenario-btn');
var usageSlider = sec.querySelector('#CmrUsageSlider-{{ section.id }}');
var yearsSlider = sec.querySelector('#CmrYearsSlider-{{ section.id }}');
var usageValEl = sec.querySelector('#CmrUsageVal-{{ section.id }}');
var yearsValEl = sec.querySelector('#CmrYearsVal-{{ section.id }}');
var oldRateEl = sec.querySelector('#CmrOldRate-{{ section.id }}');
var newRateEl = sec.querySelector('#CmrNewRate-{{ section.id }}');
var annualSaveEl = sec.querySelector('#CmrAnnualSave-{{ section.id }}');
var totalSaveEl = sec.querySelector('#CmrTotalSave-{{ section.id }}');
var tipTextEl = sec.querySelector('#CmrTipText-{{ section.id }}');
var mainCta = sec.querySelector('#CmrMainCta-{{ section.id }}');
var mainCtaText = sec.querySelector('#CmrMainCtaText-{{ section.id }}');
var beforePath = sec.querySelector('#CmrPathBefore-{{ section.id }}');
var beforeDot = sec.querySelector('#CmrDotBefore-{{ section.id }}');
var investmentEl = sec.querySelector('#CmrInvestment-{{ section.id }}');
var paybackEl = sec.querySelector('#CmrPayback-{{ section.id }}');
var scaleEl = sec.querySelector('#CmrChartScale-{{ section.id }}');
var chartYearsEl = sec.querySelector('#CmrChartYears-{{ section.id }}');
var currencyCode = {{ section.settings.currency_code | default: 'USD' | json }};
var currentUpfront = 0;
var currentAnnualExtra = 0;
var configured = false;
var afterPath = sec.querySelector('#CmrPathAfter-{{ section.id }}');
var afterDot = sec.querySelector('#CmrDotAfter-{{ section.id }}');
var currentOldCost = 6.20;
var currentNewCost = 1.35;
var currentUnitName = '杯';
// Same currency and constant monthly usage. No discounting, resale or financing model.
function calculateCashflow(oldCost, newCost, units, years, upfront, annualExtra) {
var values = [oldCost, newCost, units, years, upfront, annualExtra];
if (values.some(function(value) { return !Number.isFinite(value) || value < 0; }) || years === 0) return null;
var monthlyBefore = oldCost * units;
var monthlyAfter = newCost * units + annualExtra / 12;
var monthlyDifference = monthlyBefore - monthlyAfter;
var beforeTotal = monthlyBefore * 12 * years;
var afterTotal = upfront + monthlyAfter * 12 * years;
return {
annualDifference: monthlyDifference * 12,
beforeTotal: beforeTotal,
afterTotal: afterTotal,
netDifference: beforeTotal - afterTotal,
paybackMonths: monthlyDifference > 0 ? upfront / monthlyDifference : null
};
}
function money(value, digits) {
try {
return new Intl.NumberFormat('en-US', { style: 'currency', currency: currencyCode, maximumFractionDigits: digits }).format(value);
} catch (error) {
return 'USD ' + value.toFixed(digits);
}
}
function updateCalculation() {
var units = Number(usageSlider.value);
var years = Number(yearsSlider.value);
var result = configured ? calculateCashflow(currentOldCost, currentNewCost, units, years, currentUpfront, currentAnnualExtra) : null;
if (!result) {
annualSaveEl.textContent = '请先配置有效的场景成本';
totalSaveEl.textContent = '各项成本须使用同一币种与计量单位';
paybackEl.textContent = '暂不能测算回本';
mainCta.removeAttribute('href');
mainCta.setAttribute('aria-disabled', 'true');
return;
}
var targetUrl = mainCta.getAttribute('data-target-url');
if (targetUrl && targetUrl !== '#') {
mainCta.setAttribute('href', targetUrl);
mainCta.removeAttribute('aria-disabled');
} else {
mainCta.removeAttribute('href');
mainCta.setAttribute('aria-disabled', 'true');
}
usageValEl.textContent = units + ' ' + currentUnitName + '/月';
yearsValEl.textContent = years + ' 年';
oldRateEl.textContent = money(currentOldCost, 2) + ' / ' + currentUnitName;
newRateEl.textContent = money(currentNewCost, 2) + ' / ' + currentUnitName;
annualSaveEl.textContent = money(result.annualDifference, 0) + '/Year';
totalSaveEl.textContent = years + ' 年扣除初始投入后的差额：' + money(result.netDifference, 0);
investmentEl.textContent = '初始投入 ' + money(currentUpfront, 0) + '；额外年维护费 ' + money(currentAnnualExtra, 0);
paybackEl.textContent = result.paybackMonths === null ? '当前假设下，新方案没有运行成本优势，无法简单回本。'
: currentUpfront === 0 ? '无初始投入；请按实际购机与安装成本填写后再判断回本。'
: '简单回本约 ' + result.paybackMonths.toFixed(1) + ' 个月' + (result.paybackMonths > years * 12 ? '（超过当前测算周期）' : '');
// Constant unit costs produce straight cumulative-cost lines; both share one scale.
var maxCost = Math.max(result.beforeTotal, result.afterTotal, currentUpfront, 1) * 1.1;
function y(cost) { return (145 - 120 * cost / maxCost).toFixed(2); }
beforePath.setAttribute('d', 'M30,145 L500,' + y(result.beforeTotal));
afterPath.setAttribute('d', 'M30,' + y(currentUpfront) + ' L500,' + y(result.afterTotal));
beforeDot.setAttribute('cy', y(result.beforeTotal));
afterDot.setAttribute('cy', y(result.afterTotal));
scaleEl.textContent = '累计支出；上界 ' + money(maxCost, 0);
chartYearsEl.textContent = years + ' 年';
}
scenarioBtns.forEach(function(btn) {
btn.addEventListener('click', function() {
scenarioBtns.forEach(function(b) { b.classList.toggle('is-active', b === btn); });
configured = true;
currentOldCost = Number(btn.getAttribute('data-old-cost'));
currentUpfront = Number(btn.getAttribute('data-upfront-cost'));
currentAnnualExtra = Number(btn.getAttribute('data-annual-extra'));
currentNewCost = Number(btn.getAttribute('data-new-cost'));
currentUnitName = btn.getAttribute('data-unit-name') || '单位';
var defUsage = btn.getAttribute('data-default-usage') || '60';
usageSlider.value = String(Math.max(Number(usageSlider.min), Math.min(Number(usageSlider.max), Number(defUsage))));
tipTextEl.textContent = btn.getAttribute('data-tip') || '';
mainCtaText.textContent = btn.getAttribute('data-cta-text') || 'Check My Fit';
mainCta.setAttribute('data-target-url', btn.getAttribute('data-cta-url') || '#');
updateCalculation();
});
});
usageSlider.addEventListener('input', updateCalculation);
yearsSlider.addEventListener('input', updateCalculation);
if (scenarioBtns.length > 0) {
scenarioBtns[0].click();
} else {
updateCalculation();
}
})();
</script>
{% schema %}
{
"name": "CheckMyRate 省钱计算器",
"tag": "section",
"settings": [
{
"type": "checkbox",
"id": "show_review_badge",
"label": "显示已核验的真实评分",
"default": false
},
{
"type": "text",
"id": "review_rating",
"label": "真实评分（例如4.9/5），无数据时留空"
},
{
"type": "text",
"id": "currency_code",
"label": "测算币种ISO代码（所有成本须同币种）",
"default": "USD"
},
{
"type": "text",
"id": "review_badge_text",
"label": "已核验评分对应的说明，未取得真实评价时留空"
},
{
"type": "text",
"id": "heading_prefix",
"label": "主标题前段",
"default": "Small Changes."
},
{
"type": "text",
"id": "heading_highlight",
"label": "主标题粉色高亮部分",
"default": "Significant Impact."
},
{
"type": "textarea",
"id": "subtitle",
"label": "副标题说明",
"default": "按实际用量、单位成本、设备投入与维护费，对比运行差额和简单回本时间。"
},
{
"type": "text",
"id": "expert_name",
"label": "浅粉贴士卡署名",
"default": "— Product Advisory Team · Savings Audit"
},
{
"type": "text",
"id": "compliance_note",
"label": "底部深色条说明小字",
"default": "示例测算基于固定用量与单价，未计融资、折现和残值；分期与售后以实际政策为准。"
},
{
"type": "range",
"id": "padding_top",
"min": 24,
"max": 120,
"step": 4,
"unit": "px",
"label": "顶部内边距",
"default": 64
},
{
"type": "range",
"id": "padding_bottom",
"min": 24,
"max": 120,
"step": 4,
"unit": "px",
"label": "底部内边距",
"default": 64
}
],
"blocks": [
{
"type": "scenario",
"name": "选型场景卡",
"settings": [
{
"type": "text",
"id": "scenario_name",
"label": "场景按钮名称",
"default": "家庭日常自用 (Home)"
},
{
"type": "product",
"id": "product",
"label": "关联推荐商品"
},
{
"type": "text",
"id": "unit_label",
"label": "计量单位名称（如：杯、度kWh、件）",
"default": "杯"
},
{
"type": "text",
"id": "baseline_unit_cost",
"label": "原方案单次成本 ($)",
"default": "6.20"
},
{
"type": "text",
"id": "optimized_unit_cost",
"label": "本店方案折算单次成本 ($)",
"default": "1.35"
},
{
"type": "number",
"id": "default_monthly_units",
"label": "该场景默认月消耗量",
"default": 60
},
{
"type": "textarea",
"id": "expert_tip",
"label": "该场景专属贴士文案",
"default": "请填写实际成本与用量。年度运行差额不等于扣除购机投入后的净差额。"
},
{
"type": "text",
"id": "cta_label",
"label": "右侧底部主按钮文案",
"default": "查看对应商品配置"
},
{
"type": "url",
"id": "fallback_url",
"label": "备用跳转链接"
},
{
"type": "text",
"id": "upfront_cost",
"label": "购机、安装等初始投入（同一币种）",
"default": "1500"
},
{
"type": "text",
"id": "annual_extra_cost",
"label": "每年额外维护费（不重复计入单位成本）",
"default": "0"
}
]
}
],
"presets": [
{
"name": "CheckMyRate 省钱计算器",
"blocks": [
{
"type": "scenario",
"settings": {
"scenario_name": "家庭日常萃取 (Home)",
"unit_label": "杯",
"baseline_unit_cost": "6.20",
"optimized_unit_cost": "1.35",
"default_monthly_units": 60,
"expert_tip": "按每月60杯、原单价6.20和新单价1.35演示，年度运行差额为3,492；还需扣除设备投入。",
"cta_label": "解锁家庭版省钱套装",
"upfront_cost": "1500",
"annual_extra_cost": "0"
}
},
{
"type": "scenario",
"settings": {
"scenario_name": "家庭储能削峰 (Solar Storage)",
"unit_label": "度(kWh)",
"baseline_unit_cost": "0.48",
"optimized_unit_cost": "0.09",
"default_monthly_units": 280,
"expert_tip": "储能演示须计入安装投入与维护费。实际单价应结合当地电价、效率、衰减和设备寿命。",
"cta_label": "查看家庭储能推荐配置",
"upfront_cost": "4800",
"annual_extra_cost": "120"
}
},
{
"type": "scenario",
"settings": {
"scenario_name": "工作室与小型商用 (Studio/Pro)",
"unit_label": "件",
"baseline_unit_cost": "4.50",
"optimized_unit_cost": "0.85",
"default_monthly_units": 180,
"expert_tip": "商用演示的单位成本之外，还需填写投入与维护费，人工、停机与税费按业务另计。",
"cta_label": "获取商用版批量方案",
"upfront_cost": "6000",
"annual_extra_cost": "300"
}
}
]
}
]
}
{% endschema %}三、两个同样卖「理性回报」的案例对比：Volenta 暗黑风 vs. CheckMyRate 暖白亮粉风
如果你做的是偏功能、偏投资回报（ROI）的 Shopify 独立站，可以把今天看的 CheckMyRate 和前面看过的 Volenta 对照着选：
| 对比维度 | Volenta（暗黑 B2B Bento 风） | CheckMyRate（暖白 + 活力粉计算器漏斗风） |
|---|---|---|
| 目标受众心理 | 面向硬核极客、工程师、企业技术采购——追求专业酷感与硬指标压迫感 | 面向大众家庭主理人、中小店主、理性消费者——追求零门槛算清账单、亲切可信 |
| 色板架构 | 哑光黑（#0B0D0C）+ 深森林绿（#182920）+ 电光青柠绿（#C6FF33） |
纯白（#FFFFFF）+ 浅蓝灰容器（#F2F4F7）+ 深海藏青（#192131）+ 活力亮粉（#FC50AD） |
| 核心说服模型 | 静态 Bento 证据矩阵：直接摆出 +63%、4X、25% Time Saving 等画面中的证据数字（不据此认定真实业务成效） |
互动式「Before vs. After」省钱计算器：借鉴问卷与比较的组织方式；本文扩展为设备的运行差额、投入、简单回本与累计成本图 |
| 信任兜底方式 | 客户高管实名语录胶囊卡 + 团队技能架构图 | ★ 4.9/5 (240+ reviews) + 创始人真人视频卡 + #0C1018 深色页脚完整牌照/认证披露 |
| 最适配的 Shopify 品类 | 激光雕刻机、工业 3D 打印机、电竞外设、B2B 企业硬件 | 家庭储能/阳台光伏、高客单价家电（咖啡机/净水器/热泵）、耗材订阅站、支持分期/以旧换新的耐用消费品 |
案例与配图：Figmatica Studio 的 CheckMyRate 案例；制作说明见机构官网。本文代码为按设计思路编写的教学实现。
WESWOO - 跨境独立站开发专家
助力中国品牌出海，我们为您提供专业的独立站搭建和Shopify Plus集成技术服务。精准的跨境电商解决方案，助力品牌在全球市场成功落地，轻松跨越国界。
- shopify独立站品牌化
- 海外UI视觉设计
- SNS多渠道品牌营销