A home battery, a professional coffee machine or a production tool comes with two prices: what the customer pays today, and what it costs to operate over time. A high-ticket Shopify product page needs to explain both.
Figmatica Studio designed and built CheckMyRate, a Webflow website for an Australian mortgage broker. Its useful lesson is a clear route from a visitor’s situation to a comparison and then to a conversation. The equipment calculator below is a Shopify teaching extension of that idea, rather than a copy of a feature proven to run on the original homepage.
1. Four design decisions worth borrowing
A calm palette with a clear action colour
The published design system uses white #FFFFFF, light blue #F2F4F7, navy #192131, dark navy #0C1018, pink #FC50AD and pale pink #FDE8F3. Onest provides the shared type family. White space and rounded containers help separate a decision from its supporting information; pink marks the next action.
For a Shopify store, put the action colour on the scenario choice and the main product link. Keep assumptions, units and qualifications as readable as the large result.
Turn a comparison into an explainable cost model
The live questionnaire includes fields for loan purpose, property value, loan amount, repayment type and the current rate. Its result structure compares a current rate and a market reference rate. These are lending-specific inputs, not equipment prices. A difference between 6.20% and 5.35% is 0.85 percentage points; it cannot establish a universal annual saving by itself.
For equipment, compare a baseline unit cost with the proposed unit cost. Add monthly usage, the initial purchase and installation cost, and annual maintenance not already counted in the unit cost.
| Shopify category | Baseline input | Proposed input | Worked example and its limits |
|---|---|---|---|
| Home energy storage | $0.42/kWh |
$0.08/kWh |
At 360 kWh/month, the operating difference is about $1,469/year. With $4,800 upfront and no other costs, simple payback is about 3.3 years. |
| Coffee equipment | $11/day for two purchased drinks |
$1.30/day for ingredients |
Over 365 days, the operating difference is about $3,541/year. A $1,500 machine gives about 5.1 months of simple payback before other costs. |
| Commercial packaging | $1.85/item |
$0.32/item |
At 300 items/day for 365 days, the consumables difference is $167,535/year. Equipment, labour, downtime and maintenance remain separate inputs. |
| Water-filter refills | $2.20/litre |
$0.12/litre |
At 2 litres/day, the operating difference is about $1,518/year. Bottle counts depend on their actual capacity. |
These are arithmetic examples. They do not establish a product’s performance or a customer’s realised return.
Use a scenario choice before asking for detail
The original service cards separate residential loans, refinancing and business needs. Its questionnaire starts with the visitor’s loan purpose. The sitemap gives the questionnaire an independent route alongside services, leadership and educational content.
In Shopify, a scenario block can bind the right product, unit, default usage and explanatory tip. Show that configuration before sending the visitor to the product page. A scenario selector is a routing interface; it does not, by itself, establish compatibility or approve financing.
Put evidence close to the decision
The case combines a review entry, lender logos, a named founder video and company information. The design artwork shows a 4.9/5 and 240 review example; the live homepage currently shows different review totals, so those artwork numbers should not become a Shopify store’s default claims.
Only show real reviews, applicable certifications and payment methods the store can offer. Shop Pay Installments has merchant, regional and customer eligibility requirements. A theme-side calculation does not create an interest-free financing offer.
2. A Shopify Section that keeps operating savings and payback separate
Save the complete implementation as sections/checkmyrate-roi-calculator.liquid.
- Set a single currency and a consistent unit for each scenario.
- Enter the baseline and proposed unit costs, monthly usage, upfront purchase and installation, and additional annual maintenance.
- Bind a real product for the scenario. The action opens that product; it does not add an arbitrary variant to the cart.
- Show the annual operating difference, the cumulative difference after upfront costs, and simple payback only when the proposed plan has an operating advantage.
- Draw both cumulative-cost lines to the same scale. With constant usage and unit costs, straight lines describe the model accurately. The proposed line starts at the upfront cost.
The included coffee scenario uses 60 units/month, a baseline cost of 6.20, a proposed cost of 1.35 and an upfront cost of 1,500. It gives an annual operating difference of 3,492, a five-year difference after upfront cost of 15,960 and simple payback of about 5.2 months. The first-year difference after upfront cost is 1,992. These amounts share the configured currency.
The model does not include financing, discounting, resale value, changing tariffs, degradation, downtime or taxes. Add them when they matter to the product. The review badge starts disabled, and the default footer makes no interest-free or return-policy promise.
Expand the full Section · 790 lines
{%- 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 %}3. Compare two approaches to rational buying
| Dimension | Volenta | CheckMyRate and the Shopify extension |
|---|---|---|
| Reader’s question | Can this team demonstrate expertise? | What situation am I in, what should I compare, and what comes next? |
| Visual hierarchy | Dark surfaces and a bright green accent | White and light blue, navy text and a pink action colour |
| Evidence format | Bento-style evidence blocks; artwork numbers do not prove business outcomes | Scenario routing and a rate comparison; equipment costs and payback are the teaching extension here |
| Trust | Named people and concrete capabilities | Reviews, a named founder, educational material and company disclosures |
| Shopify applications | Technical products and business equipment | Durable goods, energy equipment and repeat-use products with measurable operating costs |
Design and image credit: Figmatica Studio / CheckMyRate on Behance. Project context: Figmatica’s case study. The questionnaire image is a screenshot of the actual CheckMyRate site, without a submitted loan application.
WESWOO - 跨境独立站开发专家
助力中国品牌出海，我们为您提供专业的独立站搭建和Shopify Plus集成技术服务。精准的跨境电商解决方案，助力品牌在全球市场成功落地，轻松跨越国界。
- shopify独立站品牌化
- 海外UI视觉设计
- SNS多渠道品牌营销