Shopify 珠宝独立站，怎么让顾客配成一套首饰？

同样是卖首饰的独立站，如果你卖的是像上一篇 CODESTAL 案例 那样的男士手工做旧银饰，核心是靠「无彩色粗野主义 + 外露克重」把单件作品卖出雕塑感；但如果你做的是女性轻奢首饰、DIY 串珠（Charms）、生辰石项链、刻字纪念币或水晶疗愈手链，案例里单颗吊坠的示例价多在 £40–£80。除了让人买一颗，还可以通过**「多件叠戴（Stacking）与情感定制」**帮顾客选出一条基础链和几颗适配吊坠。

设计师 AMAKA JANE 发布的 Luxury Personalized Jewelry Store Website Design（品牌：ASTRID & MIYU） 案例（Behance 公开设计稿，项目标注 Shopify），展示的正是这套「轻奢情感定制 + 组合选购」的页面做法。它的核心标语只有一句话：

"Curate your stack — Jewellery this personal could only be chosen by you."（定制你的专属叠戴——如此私人的首饰，只能由你亲手挑选。）

下面我们拆解 Astrid & Miyu 案例 的四套核心设计与导购机制，并给出在 Shopify Online Store 2.0 中实现「故事引线热点图 + 刻字属性录入 + 一键成套加购」的完整代码。

出处校注　配图均来自 AMAKA JANE 的 Behance 原项目，按段落裁取。品牌英国站的搭配页可核对三种吊坠与起价；案例的促销条和评价数是图中快照。品牌焊接服务页旧说明与现行质保政策存在差异，当前政策列两年质保，英国符合条件的期外重焊费用为 £30。公开资料支持页面和购买路径分析，实际成交价、转化和投放回报需由订单数据验证。

一、拆解 Astrid & Miyu 的四套核心设计与导购手法

1. 视觉基调：柔雾轻奢色板（Soft Luxury Palette）+ 衬线斜体情绪标题

为了承载「闺蜜礼物、母亲生日、新家纪念、星座生辰」这类充满温度的主题，案例完全避开了冰冷的黑白工业风，采用了一套低饱和、高明度的暖调色板：

• 主视觉底色（Dusty Slate Blue-Gray）：柔和的雾霾蓝灰（#8AA0AE），衬托 18k 黄金与 9k 实金的暖色金属光泽。
• 内容容器底色（Warm Sand & Soft Sage）：暖沙米色（#E8DEC9）、浅米白（#FAF7F2）与柔和鼠尾草绿渐变，让多图并排时页面依然透气柔和。
• 文字与主按钮色（Deep Charcoal）：深炭黑（#1A1A1A），保证价格、导航和 SHOP NOW 按钮清晰醒目。
• 字体混排：大标题采用优雅的高对比衬线体配合斜体强调（如 "Curate your stack"、"TURN THE CHARM ON"），而导航栏、商品卡双徽章、价格与筛选器则使用利落的几何无衬线体。

2. 先解决「能不能挂上去」的兼容性顾虑：Clip / Click / Story 三分法导购

DIY 串珠和叠戴首饰有一个常见的选购难题：买家分不清「哪个吊坠能挂在哪根链子上」。Astrid & Miyu 没有一上来就直接让买家翻产品列表，而是先用一组 3 列结构化对比卡，把三种扣具机制、材质与起售价一次性讲明白：

迁移到 Shopify 独立站的思路：
只要你的品类存在「配件与主体搭配」（比如表带配表壳、吊坠配项链、磁吸配件配手机壳、镜头滤镜配转接环），都应该在集合页首屏放一组这样的**「物理接口/尺寸兼容卡」**，先帮买家选定接口体系，再进入单品挑选。

3. 用「情感故事引线图（Annotated Story Chain）」把单品变成整套连带购买

如果只放一张戴着 5 个吊坠的模特图，买家只会觉得好看，不知道自己该怎么配。该案例在 CURATED BY YOU 章节用了一个非常高明的视觉转化手法——在项链/手链实拍图上拉出纤细的指示引线，把每一颗吊坠翻译成一句具体的个人记忆：

• Sagittarius（射手座吊坠） → "My Mum’s Zodiac"（妈妈的星座）
• Tanzanite（坦桑石） → "My Mum’s Birthstone"（妈妈的生辰石）
• Pavé Heart（密镶爱心） → "My Family"（我的家人）
• Ruby & Cancer（红宝石与巨蟹座） → "My Grandma’s Birthstone & Zodiac"（外婆的生辰石与星座）
• Key（钥匙吊坠） → "Our First Home"（我们的第一个家）
• O Initial（字母 O） → "My Partner’s Initial"（伴侣的名字首字母）
• Number（原图示例为数字 1） → "New Beginnings"（新的开始）

配合案例图顶部的促销横幅 "SAVE 20% WITH STACKING SETS. SHOP NOW"（叠戴套装立省 20%），这套引线图直接给了买家一个「凑满 3–4 颗吊坠」的情感理由，让顾客知道一件单品还能跟哪些吊坠搭配。案例图展示了叠戴套装促销，成交金额和转化需要订单数据验证。

4. 商品卡片「双胶囊徽章」与 O2O 体验页的七段吸顶导航

在单品卡片和线下焊接服务专题页（PERMANENT JEWELLERY）上，案例做了两处极佳的信息分层：

1. 商品卡片顶部的「双胶囊徽章（Dual Badges）」：
   示例商品卡顶部并排显示两枚胶囊标签——第一枚标明「物理扣具类型」，第二枚标明「定制能力或情感寓意」：
   • Pavé Spinning Coin Clip Charm in Gold（£65，18k 镀金再生银，5★ 4条评价）→ 徽章：CLIP CHARM + ENGRAVABLE（可刻字）
   • Pearl Clip Charm in Gold（£40，18k 镀金再生银，5★ 47条评价）→ 徽章：CLIP CHARM + WISDOM（象征智慧）
   • A Initial Click Charm in Solid Gold（£80，9k 实金，5★ 2条评价）→ 徽章：CLICK CHARM + CHOOSE YOUR INITIAL（可选字母）

2. 复杂服务页的 7 锚点吸顶子导航（Sticky Sub-Nav）：
   针对需要解释流程与价格的「永久焊接首饰（Permanent Jewellery）」页面，设计了横向吸顶的 7 个锚点标签：THE EXPERIENCE（体验流程）| CHAINS PRICES（链条价格：戒指 £35 起、手链 £80/£95 起、脚链 £220 起）| PERSONALISE YOUR CHAIN（选链与加吊坠：包含 Angel、Astrid、Carnaby、Chelsea、Mayfair、Soho 等 13 种链型）| OUR STORES（门店预约：2 人 9 折、3 人及以上 85 折）| CLASP CHAINS（免费加装活扣选项）| WARRANTY/RE-WELDING（质保与重焊入口。品牌现行英国政策列两年质保，符合条件的期外重焊收费 £30）| FAQS。

二、在 Shopify 中如何开发实现这套风格？

很多独立站卖家一看到「刻字、选字母、多件凑套打 8 折」，会先考虑装定制插件。只需采集定制文本并把多件商品一起加购时，在 Shopify Online Store 2.0 中，利用原生 Line Item Properties（订单行属性）、Metafields（元字段） 和 AJAX Cart API（/cart/add.js），就可以实现本文的基础流程。定制计价和优惠需要另行配置。

1. 用 Shopify 原生 Line Item Properties 记录刻字与首字母

在 Shopify 商品表单（{% form 'product', product %}）内，任何命名格式为 properties[属性名] 的输入框，都会直接跟随该商品进入购物车、结账页和后台订单详情，仅记录定制文字时，无需为每种文字创建商品变体：

{%- comment -%}
  当商品带有 Engravable（可刻字）元字段时，在加购按钮上方渲染刻字输入框
{%- endcomment -%}
{%- if product.metafields.custom.is_engravable.value == true -%}
  <div class="am-engraving-field">
    <label for="EngravingText-{{ section.id }}">
      定制刻字内容（最多 8 个字符，留空则不刻字）
    </label>
    <input
      id="EngravingText-{{ section.id }}"
      type="text"
      name="properties[Engraving]"
      maxlength="8"
      placeholder="例如：A & M 或 222"
    >
  </div>
{%- endif -%}

2. 完整 Shopify Section 示例：Astrid & Miyu 故事引线热点图 + 叠戴套装一键加购

将下面这段完整代码保存为 sections/astrid-charm-stack-builder.liquid。它把原案中最具代表性的三个转化模块合成为一个可在测试主题中配置的 Shopify Section 示例：

1. 柔雾轻奢视觉（#FAF7F2 暖米底色、#E8DEC9 暖沙色卡片、#8AA0AE 雾霾蓝灰点缀 + 高对比衬线斜体标题）；
2. 左侧「故事引线热点大图（Annotated Story Chain）」：图上带编号热点（如 1. My Mum's Birthstone、2. Our First Home、3. Engravable Coin），点击热点自动高亮右侧对应的单品卡；
3. 右侧「双徽章单品清单 + 刻字输入 + 整套一键加购（Stacking Set Add All）」：买家可以勾选想要的几颗吊坠、直接输入刻字内容，底部实时汇总总价，并通过 Shopify /cart/add.js 接口把整串搭配一次性加入购物车。

实施校注　下面保留作者的完整示例。订单行属性负责记录定制文字；需要收费的刻字应由实际收费商品或变体承接。示例中的手填英镑价和 8 折是前端展示逻辑。发布到店铺前，改用真实变体价格与当前市场货币，在后台配置实际优惠，并用购物车和结账页核对折扣。没有绑定或缺货的变体要禁选，提交失败要提示买家。参考 商品表单属性、Cart API 和 Shopify 金额折扣。

{%- comment -%}
  文件：sections/astrid-charm-stack-builder.liquid
  设计参考：Luxury Personalized Jewelry Store Website Design - ASTRID & MIYU (by AMAKA JANE)
  功能：柔雾轻奢风「Curate Your Stack」故事引线热点图 + 双胶囊徽章单品卡 + 刻字录入与整套一键加购
{%- 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=Cormorant+Garamond:ital,wght@0,500;0,600;1,500&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">

<style>
  .am-sec-{{ section.id }} {
    --am-bg-cream: #FAF7F2;
    --am-bg-sand: #EFE8DA;
    --am-slate-blue: #8AA0AE;
    --am-sage: #D8E2DC;
    --am-ink: #1A1A1A;
    --am-muted: #6E6A63;
    --am-border: #E2D9C8;
    --am-font-serif: 'Cormorant Garamond', Georgia, serif;
    --am-font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;

    background-color: var(--am-bg-cream);
    color: var(--am-ink);
    font-family: var(--am-font-sans);
    padding: {{ section.settings.padding_top }}px 0 {{ section.settings.padding_bottom }}px;
  }

  .am-container {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 24px;
  }

  /* 顶部柔雾轻奢标题区 */
  .am-header {
    text-align: center;
    max-width: 680px;
    margin: 0 auto 48px;
  }
  .am-eyebrow {
    display: inline-block;
    background-color: var(--am-bg-sand);
    color: var(--am-ink);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 999px;
    margin-bottom: 14px;
  }
  .am-title {
    font-family: var(--am-font-serif);
    font-size: clamp(2.25rem, 4.2vw, 3.5rem);
    font-weight: 500;
    line-height: 1.08;
    margin: 0 0 12px;
    color: var(--am-ink);
  }
  .am-title em {
    font-style: italic;
    font-weight: 500;
  }
  .am-subtitle {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--am-muted);
    margin: 0;
  }

  /* 3 列扣具机制科普条：CLIP / CLICK / STORY CHARMS */
  .am-mechanism-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 48px;
  }
  @media screen and (max-width: 768px) {
    .am-mechanism-strip {
      grid-template-columns: 1fr;
    }
  }
  .am-mech-card {
    background-color: var(--am-bg-sand);
    border: 1px solid var(--am-border);
    border-radius: 14px;
    padding: 20px 22px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
  }
  .am-mech-title {
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 6px;
  }
  .am-mech-desc {
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--am-muted);
    margin: 0;
  }
  .am-mech-price {
    background-color: #FFFFFF;
    color: var(--am-ink);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
    white-space: nowrap;
  }

  /* 主体双栏：左侧故事引线热点图 + 右侧叠戴配置清单 */
  .am-stack-layout {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 36px;
    align-items: start;
  }
  @media screen and (max-width: 960px) {
    .am-stack-layout {
      grid-template-columns: 1fr;
    }
  }

  /* 左侧故事热点画布 */
  .am-look-canvas {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    background-color: var(--am-slate-blue);
    aspect-ratio: 4 / 5;
  }
  .am-look-canvas img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .am-look-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px;
    text-align: center;
    color: #FFFFFF;
    background: linear-gradient(160deg, #8AA0AE 0%, #6E8594 100%);
  }
  .am-look-placeholder h3 {
    font-family: var(--am-font-serif);
    font-size: 2rem;
    font-style: italic;
    margin: 0 0 8px;
  }

  /* 图上情感故事锚点（Story Pin） */
  .am-story-pin {
    position: absolute;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.94);
    color: var(--am-ink);
    border: 1px solid var(--am-ink);
    padding: 5px 12px 5px 6px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    transition: transform 0.2s ease, background-color 0.2s ease;
  }
  .am-story-pin:hover,
  .am-story-pin.is-active {
    background: var(--am-ink);
    color: #FFFFFF;
    transform: translate(-50%, -50%) scale(1.06);
  }
  .am-pin-num {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--am-bg-sand);
    color: var(--am-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6875rem;
    font-weight: 700;
  }

  /* 右侧双徽章单品卡片网格 */
  .am-charm-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }
  @media screen and (max-width: 600px) {
    .am-charm-list {
      grid-template-columns: 1fr;
    }
  }
  .am-charm-card {
    background: #FFFFFF;
    border: 1.5px solid var(--am-border);
    border-radius: 16px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }
  .am-charm-card.is-highlighted {
    border-color: var(--am-ink);
    box-shadow: 0 8px 24px rgba(26, 26, 26, 0.08);
  }

  /* 原案标志性：双胶囊徽章（扣具机制 + 寓意/可刻字） */
  .am-badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
  }
  .am-badge-mech {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 4px 9px;
    border-radius: 999px;
    background-color: var(--am-bg-sand);
    color: var(--am-ink);
  }
  .am-badge-meaning {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 4px 9px;
    border-radius: 999px;
    background-color: var(--am-sage);
    color: var(--am-ink);
  }

  .am-story-quote {
    font-family: var(--am-font-serif);
    font-style: italic;
    font-size: 1.0625rem;
    color: var(--am-muted);
    margin: 0 0 6px;
  }
  .am-charm-title {
    font-size: 0.9375rem;
    font-weight: 600;
    margin: 0 0 4px;
    color: var(--am-ink);
  }
  .am-charm-metal {
    font-size: 0.75rem;
    color: var(--am-muted);
    margin: 0 0 12px;
  }

  /* 行内刻字或首字母定制输入框 */
  .am-custom-input {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--am-border);
    background: var(--am-bg-cream);
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 0.75rem;
    margin-bottom: 12px;
    color: var(--am-ink);
  }

  .am-card-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 12px;
    border-top: 1px solid var(--am-border);
  }
  .am-price {
    font-size: 0.9375rem;
    font-weight: 700;
  }
  .am-check-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
  }

  /* 底部套装汇总与一键加购栏 */
  .am-bundle-bar {
    margin-top: 24px;
    background: var(--am-bg-sand);
    border: 1px solid var(--am-border);
    border-radius: 16px;
    padding: 20px 24px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
  }
  .am-bundle-btn {
    background-color: var(--am-ink);
    color: #FFFFFF;
    border: none;
    border-radius: 999px;
    padding: 14px 28px;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: opacity 0.2s ease;
  }
  .am-bundle-btn:hover {
    opacity: 0.88;
  }
</style>

<section class="am-sec-{{ section.id }}" data-section-id="{{ section.id }}">
  <div class="am-container">
    <div class="am-header">
      <span class="am-eyebrow">{{ section.settings.promo_pill }}</span>
      <h2 class="am-title">
        {{ section.settings.heading_normal }} <em>{{ section.settings.heading_italic }}</em>
      </h2>
      <p class="am-subtitle">{{ section.settings.subtitle }}</p>
    </div>

    {%- comment -%} 顶部 3 列扣具兼容科普条 {%- endcomment -%}
    <div class="am-mechanism-strip">
      <div class="am-mech-card">
        <div>
          <h3 class="am-mech-title">01 · CLIP CHARMS</h3>
          <p class="am-mech-desc">18k 镀金或镀铑纯银活扣设计，可直接夹在任意粗链环、搭扣或耳圈上。</p>
        </div>
        <span class="am-mech-price">From £40</span>
      </div>
      <div class="am-mech-card">
        <div>
          <h3 class="am-mech-title">02 · CLICK CHARMS</h3>
          <p class="am-mech-desc">9k 实心黄金内卡扣结构，专为生辰石串珠链与 Story Strands 叠戴打造。</p>
        </div>
        <span class="am-mech-price">From £80</span>
      </div>
      <div class="am-mech-card">
        <div>
          <h3 class="am-mech-title">03 · STORY CHARMS</h3>
          <p class="am-mech-desc">9k 实心黄金闭环定制串珠，适配门店无扣焊接手链（Permanent Jewellery）。</p>
        </div>
        <span class="am-mech-price">From £40</span>
      </div>
    </div>

    <div class="am-stack-layout">
      {%- comment -%} 左侧：带情感引线热点的主视觉图 {%- endcomment -%}
      <div class="am-look-canvas">
        {%- if section.settings.look_image != blank -%}
          <img
            src="{{ section.settings.look_image | image_url: width: 1000 }}"
            alt="{{ section.settings.heading_normal | escape }}"
            width="1000"
            height="1250"
            loading="lazy"
          >
        {%- else -%}
          <div class="am-look-placeholder">
            <h3>“Curated by You”</h3>
            <p style="font-size:0.875rem;opacity:0.9;">点击图上情感故事标签，定位右侧对应串珠单品</p>
          </div>
        {%- endif -%}

        {%- for block in section.blocks -%}
          <button
            type="button"
            class="am-story-pin {% if forloop.first %}is-active{% endif %}"
            style="top: {{ block.settings.pin_top }}%; left: {{ block.settings.pin_left }}%;"
            data-target-index="{{ forloop.index0 }}"
          >
            <span class="am-pin-num">{{ forloop.index }}</span>
            <span>{{ block.settings.story_label }}</span>
          </button>
        {%- endfor -%}
      </div>

      {%- comment -%} 右侧：双胶囊徽章卡片与一键成套加购 {%- endcomment -%}
      <div>
        <div class="am-charm-list">
          {%- for block in section.blocks -%}
            {%- assign product = block.settings.product -%}
            {%- assign variant = product.selected_or_first_available_variant -%}
            <article
              class="am-charm-card {% if forloop.first %}is-highlighted{% endif %}"
              data-card-index="{{ forloop.index0 }}"
              data-variant-id="{{ variant.id }}"
              data-price="{{ block.settings.price_num }}"
              {{ block.shopify_attributes }}
            >
              <div>
                <div class="am-badge-row">
                  <span class="am-badge-mech">{{ block.settings.mech_badge }}</span>
                  <span class="am-badge-meaning">{{ block.settings.meaning_badge }}</span>
                </div>

                <p class="am-story-quote">“{{ block.settings.story_label }}”</p>
                <h3 class="am-charm-title">
                  {{ block.settings.custom_title | default: product.title }}
                </h3>
                <p class="am-charm-metal">{{ block.settings.metal_spec }}</p>

                {%- if block.settings.enable_custom_text -%}
                  <input
                    type="text"
                    class="am-custom-input js-am-prop"
                    maxlength="8"
                    placeholder="{{ block.settings.custom_placeholder }}"
                    aria-label="{{ block.settings.custom_placeholder }}"
                  >
                {%- endif -%}
              </div>

              <div class="am-card-bottom">
                <span class="am-price">£{{ block.settings.price_num }}</span>
                <label class="am-check-label">
                  <input type="checkbox" class="js-am-select" checked>
                  <span>加入叠戴串组</span>
                </label>
              </div>
            </article>
          {%- endfor -%}
        </div>

        <div class="am-bundle-bar">
          <div>
            <div style="font-size:0.75rem;text-transform:uppercase;letter-spacing:0.08em;color:var(--am-muted);">
              YOUR CURATED STACK
            </div>
            <div style="font-size:1.125rem;font-weight:700;" id="AmStackSummary-{{ section.id }}">
              已选全部串珠 · 组合立享套装优惠
            </div>
          </div>
          <button type="button" class="am-bundle-btn" id="AmAddStackBtn-{{ section.id }}">
            ADD CURATED STACK TO BAG
          </button>
        </div>
      </div>
    </div>
  </div>
</section>

<script>
  (function() {
    var sec = document.querySelector('.am-sec-{{ section.id }}');
    if (!sec) return;

    var pins = sec.querySelectorAll('.am-story-pin');
    var cards = sec.querySelectorAll('.am-charm-card');
    var checkboxes = sec.querySelectorAll('.js-am-select');
    var summaryEl = sec.querySelector('#AmStackSummary-{{ section.id }}');
    var addBtn = sec.querySelector('#AmAddStackBtn-{{ section.id }}');

    /* 点击左侧故事锚点高亮对应串珠卡片 */
    pins.forEach(function(pin) {
      pin.addEventListener('click', function() {
        var idx = pin.getAttribute('data-target-index');
        pins.forEach(function(p) { p.classList.toggle('is-active', p === pin); });
        cards.forEach(function(c) {
          c.classList.toggle('is-highlighted', c.getAttribute('data-card-index') === idx);
        });
      });
    });

    /* 实时计算已勾选串珠件数与总价（满 3 件自动计算 8 折 Stacking 提示） */
    function updateSummary() {
      var count = 0;
      var total = 0;
      cards.forEach(function(card) {
        var cb = card.querySelector('.js-am-select');
        if (cb && cb.checked) {
          count += 1;
          total += parseFloat(card.getAttribute('data-price') || '0');
        }
      });
      if (count >= 3) {
        var discounted = (total * 0.8).toFixed(0);
        summaryEl.textContent = '已选 ' + count + ' 件串珠 · 叠戴 8 折后 £' + discounted + ' (原价 £' + total.toFixed(0) + ')';
      } else {
        summaryEl.textContent = '已选 ' + count + ' 件串珠 · 合计 £' + total.toFixed(0) + ' (满 3 件立享 8 折)';
      }
    }

    checkboxes.forEach(function(cb) {
      cb.addEventListener('change', updateSummary);
    });
    updateSummary();

    /* 通过 Shopify AJAX Cart API 一次性提交整套串珠与各自的刻字 Line Item Properties */
    if (addBtn) {
      addBtn.addEventListener('click', function() {
        var items = [];
        cards.forEach(function(card) {
          var cb = card.querySelector('.js-am-select');
          var variantId = card.getAttribute('data-variant-id');
          var propInput = card.querySelector('.js-am-prop');
          if (cb && cb.checked && variantId) {
            var itemObj = { id: Number(variantId), quantity: 1, properties: {} };
            if (propInput && propInput.value.trim() !== '') {
              itemObj.properties['Personalisation'] = propInput.value.trim();
            }
            items.push(itemObj);
          }
        });

        if (items.length === 0) {
          addBtn.textContent = '请先在商品后台绑定对应单品变体';
          return;
        }

        fetch(window.Shopify.routes.root + 'cart/add.js', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ items: items })
        }).then(function(res) {
          if (res.ok) {
            window.location.href = window.Shopify.routes.root + 'cart';
          }
        });
      });
    }
  })();
</script>

{% schema %}
{
  "name": "Astrid 轻奢串珠叠戴定制墙",
  "tag": "section",
  "settings": [
    {
      "type": "text",
      "id": "promo_pill",
      "label": "顶部优惠胶囊文案",
      "default": "SAVE 20% WITH STACKING SETS · 满 3 件享叠戴 8 折"
    },
    {
      "type": "text",
      "id": "heading_normal",
      "label": "主标题正体部分",
      "default": "Curate"
    },
    {
      "type": "text",
      "id": "heading_italic",
      "label": "主标题斜体强调部分",
      "default": "your stack"
    },
    {
      "type": "textarea",
      "id": "subtitle",
      "label": "副标题说明",
      "default": "Your initial, a healing gemstone, their favourite colour, or your mum's zodiac sign — jewellery this personal could only be chosen by you."
    },
    {
      "type": "image_picker",
      "id": "look_image",
      "label": "左侧叠戴模特/实拍大图"
    },
    {
      "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": "charm_node",
      "name": "故事吊坠单品节点",
      "settings": [
        {
          "type": "product",
          "id": "product",
          "label": "关联 Shopify 吊坠商品"
        },
        {
          "type": "text",
          "id": "story_label",
          "label": "情感故事引线标签",
          "default": "My Mum's Birthstone"
        },
        {
          "type": "text",
          "id": "custom_title",
          "label": "商品显示名称",
          "default": "Pavé Spinning Coin Clip Charm in Gold"
        },
        {
          "type": "text",
          "id": "mech_badge",
          "label": "徽章 1：扣具机制",
          "default": "CLIP CHARM"
        },
        {
          "type": "text",
          "id": "meaning_badge",
          "label": "徽章 2：定制能力或寓意",
          "default": "ENGRAVABLE"
        },
        {
          "type": "text",
          "id": "metal_spec",
          "label": "材质说明",
          "default": "18k Gold Plated Recycled Sterling Silver"
        },
        {
          "type": "text",
          "id": "price_num",
          "label": "单价数字（英镑 £）",
          "default": "65"
        },
        {
          "type": "checkbox",
          "id": "enable_custom_text",
          "label": "开启刻字/首字母输入框",
          "default": true
        },
        {
          "type": "text",
          "id": "custom_placeholder",
          "label": "输入框提示语",
          "default": "输入刻字或首字母 (如: A & M)"
        },
        {
          "type": "range",
          "id": "pin_top",
          "min": 10,
          "max": 90,
          "step": 2,
          "unit": "%",
          "label": "热点在左图纵向位置 (Top %)",
          "default": 32
        },
        {
          "type": "range",
          "id": "pin_left",
          "min": 10,
          "max": 90,
          "step": 2,
          "unit": "%",
          "label": "热点在左图横向位置 (Left %)",
          "default": 44
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Astrid 轻奢串珠叠戴定制墙",
      "blocks": [
        {
          "type": "charm_node",
          "settings": {
            "story_label": "Our First Home",
            "custom_title": "Pavé Spinning Coin Clip Charm in Gold",
            "mech_badge": "CLIP CHARM",
            "meaning_badge": "ENGRAVABLE",
            "metal_spec": "18k Gold Plated Recycled Sterling Silver · 5★ (4)",
            "price_num": "65",
            "enable_custom_text": true,
            "custom_placeholder": "输入纪念日或刻字 (最多8字符)",
            "pin_top": 28,
            "pin_left": 38
          }
        },
        {
          "type": "charm_node",
          "settings": {
            "story_label": "My Partner's Initial",
            "custom_title": "A Initial Click Charm in Solid Gold",
            "mech_badge": "CLICK CHARM",
            "meaning_badge": "CHOOSE YOUR INITIAL",
            "metal_spec": "9k Solid Yellow Gold · 5★ (2)",
            "price_num": "80",
            "enable_custom_text": true,
            "custom_placeholder": "输入首字母 (A-Z)",
            "pin_top": 46,
            "pin_left": 56
          }
        },
        {
          "type": "charm_node",
          "settings": {
            "story_label": "Wisdom & Milestone",
            "custom_title": "Pearl Clip Charm in Gold",
            "mech_badge": "CLIP CHARM",
            "meaning_badge": "WISDOM",
            "metal_spec": "18k Gold Plated Recycled Sterling Silver · 5★ (47)",
            "price_num": "40",
            "enable_custom_text": false,
            "pin_top": 64,
            "pin_left": 34
          }
        },
        {
          "type": "charm_node",
          "settings": {
            "story_label": "My Mum's Birthstone",
            "custom_title": "Tanzanite Story Charm in Solid Gold",
            "mech_badge": "STORY CHARM",
            "meaning_badge": "DECEMBER BIRTHSTONE",
            "metal_spec": "9k Solid Gold & Natural Tanzanite",
            "price_num": "55",
            "enable_custom_text": false,
            "pin_top": 76,
            "pin_left": 62
          }
        }
      ]
    }
  ]
}
{% endschema %}

三、同样做珠宝首饰 Shopify 独立站：CODESTAL 与 Astrid & Miyu 怎么选？

把你刚才接连看的这两套珠宝案例放在一起对比，刚好代表了珠宝配饰独立站两种不同的导购重心：

至此，我们一共拆解了 5 套极具代表性的 Behance 独立站设计：

1. NM Art & Design（画廊静奢 + 现货/询盘双轨 + 室内设计师 PRO 选品单）
2. Volenta（暗黑 + 电光青柠绿单信号色 + 12 列 Bento 硬核数据矩阵）
3. Born Agency（暗房炭黑 + 相机取景框 HUD + CAROUSEL / GALLERY 双视图型录）
4. CODESTAL（100% 无彩色粗野主义 + 档案编号与精确克重外露）
5. ASTRID & MIYU（柔雾轻奢 + Clip/Click/Story 扣具兼容分流 + 情感引线成套叠戴加购）