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.
{%- 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 }} > {...
