技能概述
Commerce Landing 技能生成電商產品落地頁，包含：Hero 區域（產品大圖 + 標題 + 價格 + CTA）、功能亮點（3-4 個特色卡片）、用戶評價（星級評分 + 評論）、底部行動號召。單一 HTML 文件，零外部依賴，響應式適配桌面和移動端。
觸發關鍵字
- commerce landing、product page、電商落地頁、產品頁面
- shop landing、購買頁面、e-commerce page
什麼時候用
- 單品電商落地頁
- 新產品發布頁面
- 促銷活動專屬頁面
- 產品众筹頁面
使用方法
實際場景
場景一：新產品發布
你剛推出一款智能水杯，需要一個專注的落地頁來展示產品特點、收集預購訂單。Hero 區域展示產品渲染圖，下方用 3 個卡片說明核心賣點（溫度提醒 / 飲水記錄 / 材質安全），最後用醒目 CTA 引導用戶下單。
場景二：限時促銷活動
黑色星期五促銷，需要一個臨時落地頁展示折扣信息。在 Hero 區域加上倒計時組件和原價/折後價對比，營造緊迫感。
核心結構
<!-- Hero 區域 -->
<section class="hero">
<div class="product-image">
<img src="product.jpg" alt="產品名稱" />
</div>
<div class="product-info">
<h1>智能溫控水杯 Pro</h1>
<p class="price"><span class="original">$89</span> <span class="sale">$59</span></p>
<p class="description">316 不鏽鋼 · 12 小時保溫 · APP 智能提醒</p>
<a href="#buy" class="cta-btn">立即購買 →</a>
</div>
</section>
<!-- 功能亮點 -->
<section class="features">
<div class="feature-card">
<span class="icon">🌡️</span>
<h3>精準控溫</h3>
<p>設定目標溫度，水溫偏差 ≤1°C</p>
</div>
<div class="feature-card">
<span class="icon">💧</span>
<h3>飲水記錄</h3>
<p>自動記錄每日飲水量，生成週報</p>
</div>
<div class="feature-card">
<span class="icon">🔔</span>
<h3>智能提醒</h3>
<p>每 30 分鐘提醒你喝水</p>
</div>
</section>
<!-- 用戶評價 -->
<section class="reviews">
<div class="review-card">
<div class="stars">★★★★★</div>
<p>"用了一個月，每天喝水量從 800ml 提升到 2000ml"</p>
<span class="reviewer">— 張先生</span>
</div>
</section>
樣式要點
:root {
--primary: #2563eb;
--text: #1e293b;
--bg: #f8fafc;
--card-bg: #ffffff;
}
.hero { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
@media (max-width: 768px) {
.hero { grid-template-columns: 1fr; }
.features { grid-template-columns: 1fr; }
}
使用場景示例
場景一：新產品發布
推出一款智能水杯，用落地頁展示產品特點、收集預購訂單。Hero 區域展示產品渲染圖，下方 3 個卡片說明核心賣點，最後 CTA 引導下單。
場景二：限時促銷活動
黑色星期五促銷，臨時落地頁展示折扣信息。Hero 區域加倒計時組件和原價/折後價對比，營造緊迫感。
場景三：品牌旗艦產品頁
為品牌旗艦產品創建專屬頁面，包含產品故事、功能亮點、用戶評價和購買入口，提升品牌高端形象。