How to guide shoppers from one charm to a full stack on Shopify

A shopper sees a charm she loves, but still has to work out which chain it fits, which other charms go with it, and whether the engraving belongs to this piece or another one in the order. Astrid & Miyu gives each of those decisions a place on its shopping journey. Here is how a Shopify jewelry store can adopt the same sequence.

This walkthrough refers to AMAKA JANE’s public Astrid & Miyu design project and to the brand’s live UK charm page. The screenshots are excerpts from the design project. They show the shopping interface and example offers, while sales and conversion would require order data.

Start with a finished stack

The opening shows a finished necklace against a slate-blue background. Before the shopper sees individual prices or filters, she can see the kind of combination the page will help her build. The muted blue and warm sand let the gold carry the color. Serif italics work for the editorial headline, while the price, labels, and navigation stay in a restrained sans serif.

For a Shopify collection, use that first image to establish what a complete stack looks like. Keep the next action close by: choose a chain or choose a charm type. A shopper who came in for a particular birthstone can still reach the products without reading the full story.

Let shoppers check the fitting first

A charm that looks right may still be wrong for the chain. On the UK page, three routes explain that choice before the shopper enters a large collection. Starting prices below are the amounts displayed on that page at the time of review.

Use a product metafield for the fitting family if every variant of a product shares the same fitting. Use a variant-level field when the compatibility changes with the variant. Give each collection route a name the customer recognizes from the label on the card. Check a known compatible and a known incompatible chain against each route before using the data in filters.

Show why the next charm belongs

Under “Curated by you,” fine lines connect the jewelry to short descriptions. The Sagittarius charm stands for a mother’s zodiac sign; the tanzanite represents her birthstone. A key marks a first home. The annotated image gives the reader a reason to choose a second charm and makes its position in the stack visible.

A Shopify section can pair an editorial image with a list of the exact variants shown. Each hotspot should point to the corresponding product card, and the card should still make sense on a phone where the shopper taps it on its own. In the supplied example, the hotspot highlights a card. A store implementation should also check that people can get to the corresponding card with a keyboard, see which card is selected, and reach the variant even when the image is below the fold.

The cards serve two separate decisions. “Clip Charm” tells the shopper what fits. “Engravable,” “Wisdom,” or “Choose Your Initial” tells her what is special about that piece. For welded jewelry, the project gives booking, chains, stores, clasps, warranty, and questions their own navigation. The UK current warranty policy lists two years for welded jewelry, with a £30 charge for eligible UK repairs outside that period. Link to the current policy when adapting a service page.

Implement the handoff to the cart in Shopify

Store the personalization on the right item

Place the engraving input inside the Shopify product form. An input named properties[Engraving] associates the text with that line. Choose a separate variant when the initial is a stocked SKU with its own availability or price. If engraving costs extra, represent the charge with a priced variant or another actual chargeable item. An order-line property carries text.

For an ordinary product form, the original sample checks the boolean metafield custom.is_engravable and then renders an input limited to eight characters. Also validate the shop’s actual character rules and check how the store prints the value on an order or fulfillment document. The storefront input limit is one layer of that check.

Send the actual variants as a group

Use the Shopify Ajax Cart API with the active locale URL. Map each chosen product to a real variant ID, quantity, and its own properties. Include the chain as a separate line if the promise is to add the full stack. The following excerpt assumes the shopper’s available selections have already been checked.

const items = selections.map(({ variantId, engraving }) => ({
  id: variantId,
  quantity: 1,
  ...(engraving && { properties: { Personalisation: engraving } }),
}));

const response = await fetch(window.Shopify.routes.root + 'cart/add.js', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ items }),
});

if (!response.ok) throw new Error('The selected items could not be added');

Price each card from the selected variant in the current market. The original sample uses a handwritten pound price and calculates a display estimate when three charms are checked. Configure the actual discount in Shopify, and show the amount the cart or checkout calculates. A discount for three eligible charms and a discount on a specific bundle are different rules; test which products count toward the offer.

For a store-level test, start with one charm, then a chain and three charms, then try one unavailable variant. Check the cart lines, their properties, localized price, the discount applied, and the message a shopper sees if a selection cannot be added. Try two copies of the same variant with different engravings and verify each property stays on the intended line.

When to use this pattern

CODESTAL’s silver jewelry case emphasizes the identity and weight of an individual piece. A charm stack asks the shopper to build a group of compatible pieces. Start with fitting and product facts when customers ask whether something will fit. Add annotated stories when they understand the fittings but need help imagining a finished combination. Put the stock, personalization, and discount rules behind those paths before treating the section as a live store feature.

Original Shopify Section example

The supplied Liquid, CSS, JavaScript, and schema are reproduced below for reference. The sample needs store-specific product bindings, actual variant prices, availability and error handling, and a configured discount before deployment. No live checkout result is assumed.

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