{"id":10972,"date":"2026-11-10T15:56:26","date_gmt":"2026-11-10T07:56:26","guid":{"rendered":"https:\/\/www.weswoo.com\/?p=10972"},"modified":"2026-11-10T15:56:26","modified_gmt":"2026-11-10T07:56:26","slug":"astrid-miyu-shopify-charm-stack","status":"publish","type":"post","link":"https:\/\/www.weswoo.com\/en\/astrid-miyu-shopify-charm-stack\/","title":{"rendered":"How to guide shoppers from one charm to a full stack on Shopify"},"content":{"rendered":"

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.<\/p>\n

This walkthrough refers to AMAKA JANE\u2019s public Astrid & Miyu design project<\/a> and to the brand\u2019s live UK charm page<\/a>. The screenshots are excerpts from the design project. They show the shopping interface and example offers, while sales and conversion would require order data.<\/p>\n

Start with a finished stack<\/h2>\n

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.<\/p>\n

\"The
The slate-blue hero shows a finished charm stack before asking shoppers to choose individual pieces \u00b7 AMAKA JANE \/ Behance<\/a><\/figcaption><\/figure>\n

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.<\/p>\n

Let shoppers check the fitting first<\/h2>\n

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.<\/p>\n

\n\n\n\n\n\n\n\n
Route<\/th>\nHow it attaches<\/th>\nWhat to show next<\/th>\n<\/tr>\n<\/thead>\n
Clip, from \u00a340<\/td>\nA detachable clip fits an eligible link, clasp, or hoop. The brand lists plated sterling silver options.<\/td>\nLinks to compatible necklaces, bracelets, or earrings.<\/td>\n<\/tr>\n
Click, from \u00a380<\/td>\nA 9k solid gold charm closes around a compatible bead or cord.<\/td>\nStory Strands and compatible birthstone beaded pieces.<\/td>\n<\/tr>\n
Story, from \u00a340<\/td>\nThe brand fits 9k gold charms to a made-to-order Story Chain or as part of its welding service.<\/td>\nA bespoke builder or the relevant in-store service.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\"The
The original three cards compare fittings, supported chains, prices, and next actions \u00b7 AMAKA JANE \/ Behance<\/a><\/figcaption><\/figure>\n

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.<\/p>\n

Show why the next charm belongs<\/h2>\n

Under \u201cCurated by you,\u201d fine lines connect the jewelry to short descriptions. The Sagittarius charm stands for a mother\u2019s 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.<\/p>\n

\"The
The original Curated by you image ties specific charms to family, milestones, and initials \u00b7 AMAKA JANE \/ Behance<\/a><\/figcaption><\/figure>\n

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.<\/p>\n

The cards serve two separate decisions. \u201cClip Charm\u201d tells the shopper what fits. \u201cEngravable,\u201d \u201cWisdom,\u201d or \u201cChoose Your Initial\u201d 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<\/a> lists two years for welded jewelry, with a \u00a330 charge for eligible UK repairs outside that period. Link to the current policy when adapting a service page.<\/p>\n

\"The
The original product cards show fitting and personalization in separate badges \u00b7 AMAKA JANE \/ Behance<\/a><\/figcaption><\/figure>\n
\"The
The original welded jewelry page puts the appointment button above the service navigation \u00b7 AMAKA JANE \/ Behance<\/a><\/figcaption><\/figure>\n

Implement the handoff to the cart in Shopify<\/h2>\n

Store the personalization on the right item<\/h3>\n

Place the engraving input inside the Shopify product form<\/a>. An input named properties[Engraving]<\/code> 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.<\/p>\n

For an ordinary product form, the original sample checks the boolean metafield custom.is_engravable<\/code> and then renders an input limited to eight characters. Also validate the shop\u2019s 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.<\/p>\n

Send the actual variants as a group<\/h3>\n

Use the Shopify Ajax Cart API<\/a> 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\u2019s available selections have already been checked.<\/p>\n

const items = selections.map(({ variantId, engraving }) => ({\n  id: variantId,\n  quantity: 1,\n  ...(engraving && { properties: { Personalisation: engraving } }),\n}));\n\nconst response = await fetch(window.Shopify.routes.root + 'cart\/add.js', {\n  method: 'POST',\n  headers: { 'Content-Type': 'application\/json' },\n  body: JSON.stringify({ items }),\n});\n\nif (!response.ok) throw new Error('The selected items could not be added');\n<\/code><\/pre>\n
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<\/a>, 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.<\/p>\n
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.<\/p>\n
When to use this pattern<\/h2>\n
CODESTAL\u2019s 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.<\/p>\n
Original Shopify Section example<\/h2>\n
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.<\/p>\n
{%- comment -%}\n  \u6587\u4ef6\uff1asections\/astrid-charm-stack-builder.liquid\n  \u8bbe\u8ba1\u53c2\u8003\uff1aLuxury Personalized Jewelry Store Website Design - ASTRID & MIYU (by AMAKA JANE)\n  \u529f\u80fd\uff1a\u67d4\u96fe\u8f7b\u5962\u98ce\u300cCurate Your Stack\u300d\u6545\u4e8b\u5f15\u7ebf\u70ed\u70b9\u56fe + \u53cc\u80f6\u56ca\u5fbd\u7ae0\u5355\u54c1\u5361 + \u523b\u5b57\u5f55\u5165\u4e0e\u6574\u5957\u4e00\u952e\u52a0\u8d2d\n{%- endcomment -%}\n\n<link rel="preconnect" href="https:\/\/fonts.googleapis.com">\n<link rel="preconnect" href="https:\/\/fonts.gstatic.com" crossorigin>\n<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">\n\n<style>\n  .am-sec-{{ section.id }} {\n    --am-bg-cream: #FAF7F2;\n    --am-bg-sand: #EFE8DA;\n    --am-slate-blue: #8AA0AE;\n    --am-sage: #D8E2DC;\n    --am-ink: #1A1A1A;\n    --am-muted: #6E6A63;\n    --am-border: #E2D9C8;\n    --am-font-serif: 'Cormorant Garamond', Georgia, serif;\n    --am-font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;\n\n    background-color: var(--am-bg-cream);\n    color: var(--am-ink);\n    font-family: var(--am-font-sans);\n    padding: {{ section.settings.padding_top }}px 0 {{ section.settings.padding_bottom }}px;\n  }\n\n  .am-container {\n    max-width: 1320px;\n    margin: 0 auto;\n    padding: 0 24px;\n  }\n\n  \/* \u9876\u90e8\u67d4\u96fe\u8f7b\u5962\u6807\u9898\u533a *\/\n  .am-header {\n    text-align: center;\n    max-width: 680px;\n    margin: 0 auto 48px;\n  }\n  .am-eyebrow {\n    display: inline-block;\n    background-color: var(--am-bg-sand);\n    color: var(--am-ink);\n    font-size: 0.75rem;\n    font-weight: 600;\n    letter-spacing: 0.12em;\n    text-transform: uppercase;\n    padding: 6px 14px;\n    border-radius: 999px;\n    margin-bottom: 14px;\n  }\n  .am-title {\n    font-family: var(--am-font-serif);\n    font-size: clamp(2.25rem, 4.2vw, 3.5rem);\n    font-weight: 500;\n    line-height: 1.08;\n    margin: 0 0 12px;\n    color: var(--am-ink);\n  }\n  .am-title em {\n    font-style: italic;\n    font-weight: 500;\n  }\n  .am-subtitle {\n    font-size: 0.9375rem;\n    line-height: 1.6;\n    color: var(--am-muted);\n    margin: 0;\n  }\n\n  \/* 3 \u5217\u6263\u5177\u673a\u5236\u79d1\u666e\u6761\uff1aCLIP \/ CLICK \/ STORY CHARMS *\/\n  .am-mechanism-strip {\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    gap: 16px;\n    margin-bottom: 48px;\n  }\n  @media screen and (max-width: 768px) {\n    .am-mechanism-strip {\n      grid-template-columns: 1fr;\n    }\n  }\n  .am-mech-card {\n    background-color: var(--am-bg-sand);\n    border: 1px solid var(--am-border);\n    border-radius: 14px;\n    padding: 20px 22px;\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    gap: 12px;\n  }\n  .am-mech-title {\n    font-size: 0.875rem;\n    font-weight: 700;\n    letter-spacing: 0.08em;\n    text-transform: uppercase;\n    margin: 0 0 6px;\n  }\n  .am-mech-desc {\n    font-size: 0.8125rem;\n    line-height: 1.45;\n    color: var(--am-muted);\n    margin: 0;\n  }\n  .am-mech-price {\n    background-color: #FFFFFF;\n    color: var(--am-ink);\n    font-size: 0.75rem;\n    font-weight: 700;\n    padding: 4px 10px;\n    border-radius: 999px;\n    white-space: nowrap;\n  }\n\n  \/* \u4e3b\u4f53\u53cc\u680f\uff1a\u5de6\u4fa7\u6545\u4e8b\u5f15\u7ebf\u70ed\u70b9\u56fe + \u53f3\u4fa7\u53e0\u6234\u914d\u7f6e\u6e05\u5355 *\/\n  .am-stack-layout {\n    display: grid;\n    grid-template-columns: 5fr 7fr;\n    gap: 36px;\n    align-items: start;\n  }\n  @media screen and (max-width: 960px) {\n    .am-stack-layout {\n      grid-template-columns: 1fr;\n    }\n  }\n\n  \/* \u5de6\u4fa7\u6545\u4e8b\u70ed\u70b9\u753b\u5e03 *\/\n  .am-look-canvas {\n    position: relative;\n    border-radius: 20px;\n    overflow: hidden;\n    background-color: var(--am-slate-blue);\n    aspect-ratio: 4 \/ 5;\n  }\n  .am-look-canvas img {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n  .am-look-placeholder {\n    width: 100%;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 32px;\n    text-align: center;\n    color: #FFFFFF;\n    background: linear-gradient(160deg, #8AA0AE 0%, #6E8594 100%);\n  }\n  .am-look-placeholder h3 {\n    font-family: var(--am-font-serif);\n    font-size: 2rem;\n    font-style: italic;\n    margin: 0 0 8px;\n  }\n\n  \/* \u56fe\u4e0a\u60c5\u611f\u6545\u4e8b\u951a\u70b9\uff08Story Pin\uff09 *\/\n  .am-story-pin {\n    position: absolute;\n    transform: translate(-50%, -50%);\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    background: rgba(255, 255, 255, 0.94);\n    color: var(--am-ink);\n    border: 1px solid var(--am-ink);\n    padding: 5px 12px 5px 6px;\n    border-radius: 999px;\n    font-size: 0.75rem;\n    font-weight: 600;\n    cursor: pointer;\n    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);\n    transition: transform 0.2s ease, background-color 0.2s ease;\n  }\n  .am-story-pin:hover,\n  .am-story-pin.is-active {\n    background: var(--am-ink);\n    color: #FFFFFF;\n    transform: translate(-50%, -50%) scale(1.06);\n  }\n  .am-pin-num {\n    width: 20px;\n    height: 20px;\n    border-radius: 50%;\n    background: var(--am-bg-sand);\n    color: var(--am-ink);\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 0.6875rem;\n    font-weight: 700;\n  }\n\n  \/* \u53f3\u4fa7\u53cc\u5fbd\u7ae0\u5355\u54c1\u5361\u7247\u7f51\u683c *\/\n  .am-charm-list {\n    display: grid;\n    grid-template-columns: repeat(2, 1fr);\n    gap: 18px;\n  }\n  @media screen and (max-width: 600px) {\n    .am-charm-list {\n      grid-template-columns: 1fr;\n    }\n  }\n  .am-charm-card {\n    background: #FFFFFF;\n    border: 1.5px solid var(--am-border);\n    border-radius: 16px;\n    padding: 18px;\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    transition: border-color 0.2s ease, box-shadow 0.2s ease;\n  }\n  .am-charm-card.is-highlighted {\n    border-color: var(--am-ink);\n    box-shadow: 0 8px 24px rgba(26, 26, 26, 0.08);\n  }\n\n  \/* \u539f\u6848\u6807\u5fd7\u6027\uff1a\u53cc\u80f6\u56ca\u5fbd\u7ae0\uff08\u6263\u5177\u673a\u5236 + \u5bd3\u610f\/\u53ef\u523b\u5b57\uff09 *\/\n  .am-badge-row {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 6px;\n    margin-bottom: 12px;\n  }\n  .am-badge-mech {\n    font-size: 0.6875rem;\n    font-weight: 700;\n    letter-spacing: 0.06em;\n    text-transform: uppercase;\n    padding: 4px 9px;\n    border-radius: 999px;\n    background-color: var(--am-bg-sand);\n    color: var(--am-ink);\n  }\n  .am-badge-meaning {\n    font-size: 0.6875rem;\n    font-weight: 600;\n    letter-spacing: 0.06em;\n    text-transform: uppercase;\n    padding: 4px 9px;\n    border-radius: 999px;\n    background-color: var(--am-sage);\n    color: var(--am-ink);\n  }\n\n  .am-story-quote {\n    font-family: var(--am-font-serif);\n    font-style: italic;\n    font-size: 1.0625rem;\n    color: var(--am-muted);\n    margin: 0 0 6px;\n  }\n  .am-charm-title {\n    font-size: 0.9375rem;\n    font-weight: 600;\n    margin: 0 0 4px;\n    color: var(--am-ink);\n  }\n  .am-charm-metal {\n    font-size: 0.75rem;\n    color: var(--am-muted);\n    margin: 0 0 12px;\n  }\n\n  \/* \u884c\u5185\u523b\u5b57\u6216\u9996\u5b57\u6bcd\u5b9a\u5236\u8f93\u5165\u6846 *\/\n  .am-custom-input {\n    width: 100%;\n    box-sizing: border-box;\n    border: 1px solid var(--am-border);\n    background: var(--am-bg-cream);\n    border-radius: 8px;\n    padding: 8px 10px;\n    font-size: 0.75rem;\n    margin-bottom: 12px;\n    color: var(--am-ink);\n  }\n\n  .am-card-bottom {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding-top: 12px;\n    border-top: 1px solid var(--am-border);\n  }\n  .am-price {\n    font-size: 0.9375rem;\n    font-weight: 700;\n  }\n  .am-check-label {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 0.75rem;\n    font-weight: 600;\n    cursor: pointer;\n  }\n\n  \/* \u5e95\u90e8\u5957\u88c5\u6c47\u603b\u4e0e\u4e00\u952e\u52a0\u8d2d\u680f *\/\n  .am-bundle-bar {\n    margin-top: 24px;\n    background: var(--am-bg-sand);\n    border: 1px solid var(--am-border);\n    border-radius: 16px;\n    padding: 20px 24px;\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: space-between;\n    align-items: center;\n    gap: 16px;\n  }\n  .am-bundle-btn {\n    background-color: var(--am-ink);\n    color: #FFFFFF;\n    border: none;\n    border-radius: 999px;\n    padding: 14px 28px;\n    font-size: 0.875rem;\n    font-weight: 600;\n    letter-spacing: 0.06em;\n    text-transform: uppercase;\n    cursor: pointer;\n    transition: opacity 0.2s ease;\n  }\n  .am-bundle-btn:hover {\n    opacity: 0.88;\n  }\n<\/style>\n\n<section class="am-sec-{{ section.id }}" data-section-id="{{ section.id }}">\n  <div class="am-container">\n    <div class="am-header">\n      <span class="am-eyebrow">{{ section.settings.promo_pill }}<\/span>\n      <h2 class="am-title">\n        {{ section.settings.heading_normal }} <em>{{ section.settings.heading_italic }}<\/em>\n      <\/h2>\n      <p class="am-subtitle">{{ section.settings.subtitle }}<\/p>\n    <\/div>\n\n    {%- comment -%} \u9876\u90e8 3 \u5217\u6263\u5177\u517c\u5bb9\u79d1\u666e\u6761 {%- endcomment -%}\n    <div class="am-mechanism-strip">\n      <div class="am-mech-card">\n        <div>\n          <h3 class="am-mech-title">01 \u00b7 CLIP CHARMS<\/h3>\n          <p class="am-mech-desc">18k \u9540\u91d1\u6216\u9540\u94d1\u7eaf\u94f6\u6d3b\u6263\u8bbe\u8ba1\uff0c\u53ef\u76f4\u63a5\u5939\u5728\u4efb\u610f\u7c97\u94fe\u73af\u3001\u642d\u6263\u6216\u8033\u5708\u4e0a\u3002<\/p>\n        <\/div>\n        <span class="am-mech-price">From \u00a340<\/span>\n      <\/div>\n      <div class="am-mech-card">\n        <div>\n          <h3 class="am-mech-title">02 \u00b7 CLICK CHARMS<\/h3>\n          <p class="am-mech-desc">9k \u5b9e\u5fc3\u9ec4\u91d1\u5185\u5361\u6263\u7ed3\u6784\uff0c\u4e13\u4e3a\u751f\u8fb0\u77f3\u4e32\u73e0\u94fe\u4e0e Story Strands \u53e0\u6234\u6253\u9020\u3002<\/p>\n        <\/div>\n        <span class="am-mech-price">From \u00a380<\/span>\n      <\/div>\n      <div class="am-mech-card">\n        <div>\n          <h3 class="am-mech-title">03 \u00b7 STORY CHARMS<\/h3>\n          <p class="am-mech-desc">9k \u5b9e\u5fc3\u9ec4\u91d1\u95ed\u73af\u5b9a\u5236\u4e32\u73e0\uff0c\u9002\u914d\u95e8\u5e97\u65e0\u6263\u710a\u63a5\u624b\u94fe\uff08Permanent Jewellery\uff09\u3002<\/p>\n        <\/div>\n        <span class="am-mech-price">From \u00a340<\/span>\n      <\/div>\n    <\/div>\n\n    <div class="am-stack-layout">\n      {%- comment -%} \u5de6\u4fa7\uff1a\u5e26\u60c5\u611f\u5f15\u7ebf\u70ed\u70b9\u7684\u4e3b\u89c6\u89c9\u56fe {%- endcomment -%}\n      <div class="am-look-canvas">\n        {%- if section.settings.look_image != blank -%}\n          <img\n            src="{{ section.settings.look_image | image_url: width: 1000 }}"\n            alt="{{ section.settings.heading_normal | escape }}"\n            width="1000"\n            height="1250"\n            loading="lazy"\n          >\n        {%- else -%}\n          <div class="am-look-placeholder">\n            <h3>\u201cCurated by You\u201d<\/h3>\n            <p style="font-size:0.875rem;opacity:0.9;">\u70b9\u51fb\u56fe\u4e0a\u60c5\u611f\u6545\u4e8b\u6807\u7b7e\uff0c\u5b9a\u4f4d\u53f3\u4fa7\u5bf9\u5e94\u4e32\u73e0\u5355\u54c1<\/p>\n          <\/div>\n        {%- endif -%}\n\n        {%- for block in section.blocks -%}\n          <button\n            type="button"\n            class="am-story-pin {% if forloop.first %}is-active{% endif %}"\n            style="top: {{ block.settings.pin_top }}%; left: {{ block.settings.pin_left }}%;"\n            data-target-index="{{ forloop.index0 }}"\n          >\n            <span class="am-pin-num">{{ forloop.index }}<\/span>\n            <span>{{ block.settings.story_label }}<\/span>\n          <\/button>\n        {%- endfor -%}\n      <\/div>\n\n      {%- comment -%} \u53f3\u4fa7\uff1a\u53cc\u80f6\u56ca\u5fbd\u7ae0\u5361\u7247\u4e0e\u4e00\u952e\u6210\u5957\u52a0\u8d2d {%- endcomment -%}\n      <div>\n        <div class="am-charm-list">\n          {%- for block in section.blocks -%}\n            {%- assign product = block.settings.product -%}\n            {%- assign variant = product.selected_or_first_available_variant -%}\n            <article\n              class="am-charm-card {% if forloop.first %}is-highlighted{% endif %}"\n              data-card-index="{{ forloop.index0 }}"\n              data-variant-id="{{ variant.id }}"\n              data-price="{{ block.settings.price_num }}"\n              {{ block.shopify_attributes }}\n            >\n              <div>\n                <div class="am-badge-row">\n                  <span class="am-badge-mech">{{ block.settings.mech_badge }}<\/span>\n                  <span class="am-badge-meaning">{{ block.settings.meaning_badge }}<\/span>\n                <\/div>\n\n                <p class="am-story-quote">\u201c{{ block.settings.story_label }}\u201d<\/p>\n                <h3 class="am-charm-title">\n                  {{ block.settings.custom_title | default: product.title }}\n                <\/h3>\n                <p class="am-charm-metal">{{ block.settings.metal_spec }}<\/p>\n\n                {%- if block.settings.enable_custom_text -%}\n                  <input\n                    type="text"\n                    class="am-custom-input js-am-prop"\n                    maxlength="8"\n                    placeholder="{{ block.settings.custom_placeholder }}"\n                    aria-label="{{ block.settings.custom_placeholder }}"\n                  >\n                {%- endif -%}\n              <\/div>\n\n              <div class="am-card-bottom">\n                <span class="am-price">\u00a3{{ block.settings.price_num }}<\/span>\n                <label class="am-check-label">\n                  <input type="checkbox" class="js-am-select" checked>\n                  <span>\u52a0\u5165\u53e0\u6234\u4e32\u7ec4<\/span>\n                <\/label>\n              <\/div>\n            <\/article>\n          {%- endfor -%}\n        <\/div>\n\n        <div class="am-bundle-bar">\n          <div>\n            <div style="font-size:0.75rem;text-transform:uppercase;letter-spacing:0.08em;color:var(--am-muted);">\n              YOUR CURATED STACK\n            <\/div>\n            <div style="font-size:1.125rem;font-weight:700;" id="AmStackSummary-{{ section.id }}">\n              \u5df2\u9009\u5168\u90e8\u4e32\u73e0 \u00b7 \u7ec4\u5408\u7acb\u4eab\u5957\u88c5\u4f18\u60e0\n            <\/div>\n          <\/div>\n          <button type="button" class="am-bundle-btn" id="AmAddStackBtn-{{ section.id }}">\n            ADD CURATED STACK TO BAG\n          <\/button>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n<script>\n  (function() {\n    var sec = document.querySelector('.am-sec-{{ section.id }}');\n    if (!sec) return;\n\n    var pins = sec.querySelectorAll('.am-story-pin');\n    var cards = sec.querySelectorAll('.am-charm-card');\n    var checkboxes = sec.querySelectorAll('.js-am-select');\n    var summaryEl = sec.querySelector('#AmStackSummary-{{ section.id }}');\n    var addBtn = sec.querySelector('#AmAddStackBtn-{{ section.id }}');\n\n    \/* \u70b9\u51fb\u5de6\u4fa7\u6545\u4e8b\u951a\u70b9\u9ad8\u4eae\u5bf9\u5e94\u4e32\u73e0\u5361\u7247 *\/\n    pins.forEach(function(pin) {\n      pin.addEventListener('click', function() {\n        var idx = pin.getAttribute('data-target-index');\n        pins.forEach(function(p) { p.classList.toggle('is-active', p === pin); });\n        cards.forEach(function(c) {\n          c.classList.toggle('is-highlighted', c.getAttribute('data-card-index') === idx);\n        });\n      });\n    });\n\n    \/* \u5b9e\u65f6\u8ba1\u7b97\u5df2\u52fe\u9009\u4e32\u73e0\u4ef6\u6570\u4e0e\u603b\u4ef7\uff08\u6ee1 3 \u4ef6\u81ea\u52a8\u8ba1\u7b97 8 \u6298 Stacking \u63d0\u793a\uff09 *\/\n    function updateSummary() {\n      var count = 0;\n      var total = 0;\n      cards.forEach(function(card) {\n        var cb = card.querySelector('.js-am-select');\n        if (cb && cb.checked) {\n          count += 1;\n          total += parseFloat(card.getAttribute('data-price') || '0');\n        }\n      });\n      if (count >= 3) {\n        var discounted = (total * 0.8).toFixed(0);\n        summaryEl.textContent = '\u5df2\u9009 ' + count + ' \u4ef6\u4e32\u73e0 \u00b7 \u53e0\u6234 8 \u6298\u540e \u00a3' + discounted + ' (\u539f\u4ef7 \u00a3' + total.toFixed(0) + ')';\n      } else {\n        summaryEl.textContent = '\u5df2\u9009 ' + count + ' \u4ef6\u4e32\u73e0 \u00b7 \u5408\u8ba1 \u00a3' + total.toFixed(0) + ' (\u6ee1 3 \u4ef6\u7acb\u4eab 8 \u6298)';\n      }\n    }\n\n    checkboxes.forEach(function(cb) {\n      cb.addEventListener('change', updateSummary);\n    });\n    updateSummary();\n\n    \/* \u901a\u8fc7 Shopify AJAX Cart API \u4e00\u6b21\u6027\u63d0\u4ea4\u6574\u5957\u4e32\u73e0\u4e0e\u5404\u81ea\u7684\u523b\u5b57 Line Item Properties *\/\n    if (addBtn) {\n      addBtn.addEventListener('click', function() {\n        var items = [];\n        cards.forEach(function(card) {\n          var cb = card.querySelector('.js-am-select');\n          var variantId = card.getAttribute('data-variant-id');\n          var propInput = card.querySelector('.js-am-prop');\n          if (cb && cb.checked && variantId) {\n            var itemObj = { id: Number(variantId), quantity: 1, properties: {} };\n            if (propInput && propInput.value.trim() !== '') {\n              itemObj.properties['Personalisation'] = propInput.value.trim();\n            }\n            items.push(itemObj);\n          }\n        });\n\n        if (items.length === 0) {\n          addBtn.textContent = '\u8bf7\u5148\u5728\u5546\u54c1\u540e\u53f0\u7ed1\u5b9a\u5bf9\u5e94\u5355\u54c1\u53d8\u4f53';\n          return;\n        }\n\n        fetch(window.Shopify.routes.root + 'cart\/add.js', {\n          method: 'POST',\n          headers: { 'Content-Type': 'application\/json' },\n          body: JSON.stringify({ items: items })\n        }).then(function(res) {\n          if (res.ok) {\n            window.location.href = window.Shopify.routes.root + 'cart';\n          }\n        });\n      });\n    }\n  })();\n<\/script>\n\n{% schema %}\n{\n  "name": "Astrid \u8f7b\u5962\u4e32\u73e0\u53e0\u6234\u5b9a\u5236\u5899",\n  "tag": "section",\n  "settings": [\n    {\n      "type": "text",\n      "id": "promo_pill",\n      "label": "\u9876\u90e8\u4f18\u60e0\u80f6\u56ca\u6587\u6848",\n      "default": "SAVE 20% WITH STACKING SETS \u00b7 \u6ee1 3 \u4ef6\u4eab\u53e0\u6234 8 \u6298"\n    },\n    {\n      "type": "text",\n      "id": "heading_normal",\n      "label": "\u4e3b\u6807\u9898\u6b63\u4f53\u90e8\u5206",\n      "default": "Curate"\n    },\n    {\n      "type": "text",\n      "id": "heading_italic",\n      "label": "\u4e3b\u6807\u9898\u659c\u4f53\u5f3a\u8c03\u90e8\u5206",\n      "default": "your stack"\n    },\n    {\n      "type": "textarea",\n      "id": "subtitle",\n      "label": "\u526f\u6807\u9898\u8bf4\u660e",\n      "default": "Your initial, a healing gemstone, their favourite colour, or your mum's zodiac sign \u2014 jewellery this personal could only be chosen by you."\n    },\n    {\n      "type": "image_picker",\n      "id": "look_image",\n      "label": "\u5de6\u4fa7\u53e0\u6234\u6a21\u7279\/\u5b9e\u62cd\u5927\u56fe"\n    },\n    {\n      "type": "range",\n      "id": "padding_top",\n      "min": 24,\n      "max": 120,\n      "step": 4,\n      "unit": "px",\n      "label": "\u9876\u90e8\u5185\u8fb9\u8ddd",\n      "default": 64\n    },\n    {\n      "type": "range",\n      "id": "padding_bottom",\n      "min": 24,\n      "max": 120,\n      "step": 4,\n      "unit": "px",\n      "label": "\u5e95\u90e8\u5185\u8fb9\u8ddd",\n      "default": 64\n    }\n  ],\n  "blocks": [\n    {\n      "type": "charm_node",\n      "name": "\u6545\u4e8b\u540a\u5760\u5355\u54c1\u8282\u70b9",\n      "settings": [\n        {\n          "type": "product",\n          "id": "product",\n          "label": "\u5173\u8054 Shopify \u540a\u5760\u5546\u54c1"\n        },\n        {\n          "type": "text",\n          "id": "story_label",\n          "label": "\u60c5\u611f\u6545\u4e8b\u5f15\u7ebf\u6807\u7b7e",\n          "default": "My Mum's Birthstone"\n        },\n        {\n          "type": "text",\n          "id": "custom_title",\n          "label": "\u5546\u54c1\u663e\u793a\u540d\u79f0",\n          "default": "Pav\u00e9 Spinning Coin Clip Charm in Gold"\n        },\n        {\n          "type": "text",\n          "id": "mech_badge",\n          "label": "\u5fbd\u7ae0 1\uff1a\u6263\u5177\u673a\u5236",\n          "default": "CLIP CHARM"\n        },\n        {\n          "type": "text",\n          "id": "meaning_badge",\n          "label": "\u5fbd\u7ae0 2\uff1a\u5b9a\u5236\u80fd\u529b\u6216\u5bd3\u610f",\n          "default": "ENGRAVABLE"\n        },\n        {\n          "type": "text",\n          "id": "metal_spec",\n          "label": "\u6750\u8d28\u8bf4\u660e",\n          "default": "18k Gold Plated Recycled Sterling Silver"\n        },\n        {\n          "type": "text",\n          "id": "price_num",\n          "label": "\u5355\u4ef7\u6570\u5b57\uff08\u82f1\u9551 \u00a3\uff09",\n          "default": "65"\n        },\n        {\n          "type": "checkbox",\n          "id": "enable_custom_text",\n          "label": "\u5f00\u542f\u523b\u5b57\/\u9996\u5b57\u6bcd\u8f93\u5165\u6846",\n          "default": true\n        },\n        {\n          "type": "text",\n          "id": "custom_placeholder",\n          "label": "\u8f93\u5165\u6846\u63d0\u793a\u8bed",\n          "default": "\u8f93\u5165\u523b\u5b57\u6216\u9996\u5b57\u6bcd (\u5982: A & M)"\n        },\n        {\n          "type": "range",\n          "id": "pin_top",\n          "min": 10,\n          "max": 90,\n          "step": 2,\n          "unit": "%",\n          "label": "\u70ed\u70b9\u5728\u5de6\u56fe\u7eb5\u5411\u4f4d\u7f6e (Top %)",\n          "default": 32\n        },\n        {\n          "type": "range",\n          "id": "pin_left",\n          "min": 10,\n          "max": 90,\n          "step": 2,\n          "unit": "%",\n          "label": "\u70ed\u70b9\u5728\u5de6\u56fe\u6a2a\u5411\u4f4d\u7f6e (Left %)",\n          "default": 44\n        }\n      ]\n    }\n  ],\n  "presets": [\n    {\n      "name": "Astrid \u8f7b\u5962\u4e32\u73e0\u53e0\u6234\u5b9a\u5236\u5899",\n      "blocks": [\n        {\n          "type": "charm_node",\n          "settings": {\n            "story_label": "Our First Home",\n            "custom_title": "Pav\u00e9 Spinning Coin Clip Charm in Gold",\n            "mech_badge": "CLIP CHARM",\n            "meaning_badge": "ENGRAVABLE",\n            "metal_spec": "18k Gold Plated Recycled Sterling Silver \u00b7 5\u2605 (4)",\n            "price_num": "65",\n            "enable_custom_text": true,\n            "custom_placeholder": "\u8f93\u5165\u7eaa\u5ff5\u65e5\u6216\u523b\u5b57 (\u6700\u591a8\u5b57\u7b26)",\n            "pin_top": 28,\n            "pin_left": 38\n          }\n        },\n        {\n          "type": "charm_node",\n          "settings": {\n            "story_label": "My Partner's Initial",\n            "custom_title": "A Initial Click Charm in Solid Gold",\n            "mech_badge": "CLICK CHARM",\n            "meaning_badge": "CHOOSE YOUR INITIAL",\n            "metal_spec": "9k Solid Yellow Gold \u00b7 5\u2605 (2)",\n            "price_num": "80",\n            "enable_custom_text": true,\n            "custom_placeholder": "\u8f93\u5165\u9996\u5b57\u6bcd (A-Z)",\n            "pin_top": 46,\n            "pin_left": 56\n          }\n        },\n        {\n          "type": "charm_node",\n          "settings": {\n            "story_label": "Wisdom & Milestone",\n            "custom_title": "Pearl Clip Charm in Gold",\n            "mech_badge": "CLIP CHARM",\n            "meaning_badge": "WISDOM",\n            "metal_spec": "18k Gold Plated Recycled Sterling Silver \u00b7 5\u2605 (47)",\n            "price_num": "40",\n            "enable_custom_text": false,\n            "pin_top": 64,\n            "pin_left": 34\n          }\n        },\n        {\n          "type": "charm_node",\n          "settings": {\n            "story_label": "My Mum's Birthstone",\n            "custom_title": "Tanzanite Story Charm in Solid Gold",\n            "mech_badge": "STORY CHARM",\n            "meaning_badge": "DECEMBER BIRTHSTONE",\n            "metal_spec": "9k Solid Gold & Natural Tanzanite",\n            "price_num": "55",\n            "enable_custom_text": false,\n            "pin_top": 76,\n            "pin_left": 62\n          }\n        }\n      ]\n    }\n  ]\n}\n{% endschema %}\n<\/code><\/pre>","protected":false},"excerpt":{"rendered":"
An Astrid & Miyu design study on charm compatibility, storytelling, and adding the selected stack to a Shopify cart.<\/p>","protected":false},"author":1,"featured_media":10966,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[259,4],"class_list":["post-10972","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-shopify-dtc","tag-api","tag-shopify"],"yoast_head":"\nHow to guide shoppers from one charm to a full stack on Shopify<\/title>\n<meta name=\"description\" content=\"How to guide shoppers from one charm to a full stack on Shopify\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.weswoo.com\/en\/astrid-miyu-shopify-charm-stack\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to guide shoppers from one charm to a full stack on Shopify\" \/>\n<meta property=\"og:description\" content=\"WESWOO\u2014\u8de8\u5883\u7535\u5546\u72ec\u7acb\u7ad9\u4e13\u5bb6\uff0c\u63d0\u4f9bshopify liquid\u4e13\u4e1a\u5f00\u53d1\u65b9\u6848 - Shopify Plus\u5408\u4f5c\u4f19\u4f34 - \u897f\u897f\u6728\uff08\u5e7f\u5dde\uff09\u79d1\u6280\u6709\u9650\u8d23\u4efb\u516c\u53f8\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.weswoo.com\/en\/astrid-miyu-shopify-charm-stack\/\" \/>\n<meta property=\"og:site_name\" content=\"Shopify Plus & \u72ec\u7acb\u7ad9\u5f00\u53d1\uff5c\u8de8\u5883\u7535\u5546\u5b9a\u5236\u65b9\u6848 - WESWOO\" \/>\n<meta property=\"article:published_time\" content=\"2026-11-10T07:56:26+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.weswoo.com\/wp-content\/uploads\/2026\/11\/am-01-hero.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"656\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"weswoo\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"weswoo\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"19 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.weswoo.com\/en\/astrid-miyu-shopify-charm-stack\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.weswoo.com\/en\/astrid-miyu-shopify-charm-stack\/\"},\"author\":{\"name\":\"weswoo\",\"@id\":\"https:\/\/www.weswoo.com\/en\/#\/schema\/person\/bc9a01c6d3445dbdfb68e96ee00f9642\"},\"headline\":\"How to guide shoppers from one charm to a full stack on Shopify\",\"datePublished\":\"2026-11-10T07:56:26+00:00\",\"dateModified\":\"2026-11-10T07:56:26+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.weswoo.com\/en\/astrid-miyu-shopify-charm-stack\/\"},\"wordCount\":1165,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.weswoo.com\/en\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.weswoo.com\/en\/astrid-miyu-shopify-charm-stack\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.weswoo.com\/wp-content\/uploads\/2026\/11\/am-01-hero.jpg\",\"keywords\":[\"API\",\"Shopify\"],\"articleSection\":[\"Shopify\u72ec\u7acb\u7ad9\u6307\u5357\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.weswoo.com\/en\/astrid-miyu-shopify-charm-stack\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.weswoo.com\/en\/astrid-miyu-shopify-charm-stack\/\",\"url\":\"https:\/\/www.weswoo.com\/en\/astrid-miyu-shopify-charm-stack\/\",\"name\":\"How to guide shoppers from one charm to a full stack on Shopify\",\"isPartOf\":{\"@id\":\"https:\/\/www.weswoo.com\/en\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.weswoo.com\/en\/astrid-miyu-shopify-charm-stack\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.weswoo.com\/en\/astrid-miyu-shopify-charm-stack\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.weswoo.com\/wp-content\/uploads\/2026\/11\/am-01-hero.jpg\",\"datePublished\":\"2026-11-10T07:56:26+00:00\",\"dateModified\":\"2026-11-10T07:56:26+00:00\",\"description\":\"How to guide shoppers from one charm to a full stack on Shopify\",\"breadcrumb\":{\"@id\":\"https:\/\/www.weswoo.com\/en\/astrid-miyu-shopify-charm-stack\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.weswoo.com\/en\/astrid-miyu-shopify-charm-stack\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.weswoo.com\/en\/astrid-miyu-shopify-charm-stack\/#primaryimage\",\"url\":\"https:\/\/www.weswoo.com\/wp-content\/uploads\/2026\/11\/am-01-hero.jpg\",\"contentUrl\":\"https:\/\/www.weswoo.com\/wp-content\/uploads\/2026\/11\/am-01-hero.jpg\",\"width\":1280,\"height\":656,\"caption\":\"\u96fe\u84dd\u9996\u5c4f\u7528\u4e00\u6761\u5df2\u642d\u597d\u7684\u94fe\u5c55\u793a\u53e0\u6234\u6548\u679c \u00b7 AMAKA JANE \/ Behance\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.weswoo.com\/en\/astrid-miyu-shopify-charm-stack\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/www.weswoo.com\/cn\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to guide shoppers from one charm to a full stack on Shopify\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.weswoo.com\/en\/#website\",\"url\":\"https:\/\/www.weswoo.com\/en\/\",\"name\":\"WESWOO\",\"description\":\"WESWOO \u4e13\u6ce8 Shopify Plus \u4e0e\u72ec\u7acb\u7ad9\u5b9a\u5236\u5f00\u53d1\uff0c\u63d0\u4f9b\u9ad8\u6027\u80fd\u7535\u5546\u7f51\u7ad9\u5efa\u8bbe\u3001\u8de8\u5883\u8fd0\u8425\u652f\u6301\u3001B2B \u53ca\u591a\u6e20\u9053\u96c6\u6210\uff0c\u52a9\u529b\u54c1\u724c\u5168\u7403\u589e\u957f\u3002\",\"publisher\":{\"@id\":\"https:\/\/www.weswoo.com\/en\/#organization\"},\"alternateName\":\"WESWOO.COM\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.weswoo.com\/en\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.weswoo.com\/en\/#organization\",\"name\":\"WESWOO\",\"alternateName\":[\"WESWOO - Shopify Premier Partner\",\"\u897f\u897f\u6728\uff08\u6df1\u5733\uff09\u79d1\u6280\u6709\u9650\u8d23\u4efb\u516c\u53f8\",\"Xiximu (Shenzhen) Technology Co., Ltd.\"],\"url\":\"https:\/\/www.weswoo.com\/en\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.weswoo.com\/en\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.weswoo.com\/wp-content\/uploads\/2025\/08\/fulllogo.png\",\"contentUrl\":\"https:\/\/www.weswoo.com\/wp-content\/uploads\/2025\/08\/fulllogo.png\",\"width\":1280,\"height\":1024,\"caption\":\"WESWOO \u2014 Shopify cross-border ecommerce development specialist\"},\"image\":{\"@id\":\"https:\/\/www.weswoo.com\/en\/#\/schema\/logo\/image\/\"},\"description\":\"WESWOO is a Shopify Premier Partner providing Shopify theme and Shopify Plus development, B2B, Headless, data integration, and long-term technical support.\",\"email\":\"info@weswoo.com\",\"telephone\":\"+86 18688202145\",\"legalName\":\"\u897f\u897f\u6728\uff08\u6df1\u5733\uff09\u79d1\u6280\u6709\u9650\u8d23\u4efb\u516c\u53f8\",\"foundingDate\":\"2021-04-26\",\"numberOfEmployees\":{\"@type\":\"QuantitativeValue\",\"minValue\":\"11\",\"maxValue\":\"50\"},\"address\":[{\"@type\":\"PostalAddress\",\"streetAddress\":\"\u9999\u6e2f\u4e5d\u9f99\u65fa\u89d2\u5f25\u6566\u9053610\u53f7\u8377\u674e\u6d3b\u5546\u4e1a\u4e2d\u5fc318\u697c1805-06\u5ba4\",\"addressLocality\":\"\u9999\u6e2f\",\"addressCountry\":\"HK\"},{\"@type\":\"PostalAddress\",\"streetAddress\":\"\u6df1\u5733\u5e02\u5b9d\u5b89\u533a\u897f\u4e61\u8857\u9053\u5171\u4e50\u793e\u533a\u94c1\u4ed4\u8def60\u53f7\u594b\u6210\u667a\u8c37\u5927\u53a6B\u5ea72001A\",\"addressLocality\":\"\u6df1\u5733\u5e02\",\"addressRegion\":\"\u5e7f\u4e1c\u7701\",\"addressCountry\":\"CN\"}],\"sameAs\":[\"https:\/\/www.shopify.com\/partners\/directory\/partner\/10395\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.weswoo.com\/en\/#\/schema\/person\/bc9a01c6d3445dbdfb68e96ee00f9642\",\"name\":\"weswoo\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.weswoo.com\/en\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/60152bb1145c677a6b80dd2db1d761f279c3db9d602631e4f31f40a5ffd5ba44?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/60152bb1145c677a6b80dd2db1d761f279c3db9d602631e4f31f40a5ffd5ba44?s=96&d=mm&r=g\",\"caption\":\"weswoo\"},\"description\":\"WESWOO \u7f51\u7ad9\u5185\u5bb9\u53d1\u5e03\u8d26\u53f7\uff0c\u53d1\u5e03 Shopify \u72ec\u7acb\u7ad9\u5efa\u8bbe\u3001\u4e3b\u9898\u5f00\u53d1\u3001\u7cfb\u7edf\u96c6\u6210\u4e0e\u8de8\u5883\u8fd0\u8425\u76f8\u5173\u6587\u7ae0\u3002\",\"sameAs\":[\"https:\/\/weswoo.com\"],\"url\":\"https:\/\/www.weswoo.com\/en\/author\/weswoo\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to guide shoppers from one charm to a full stack on Shopify","description":"How to guide shoppers from one charm to a full stack on Shopify","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.weswoo.com\/en\/astrid-miyu-shopify-charm-stack\/","og_locale":"en_US","og_type":"article","og_title":"How to guide shoppers from one charm to a full stack on Shopify","og_description":"WESWOO\u2014\u8de8\u5883\u7535\u5546\u72ec\u7acb\u7ad9\u4e13\u5bb6\uff0c\u63d0\u4f9bshopify liquid\u4e13\u4e1a\u5f00\u53d1\u65b9\u6848 - Shopify Plus\u5408\u4f5c\u4f19\u4f34 - \u897f\u897f\u6728\uff08\u5e7f\u5dde\uff09\u79d1\u6280\u6709\u9650\u8d23\u4efb\u516c\u53f8","og_url":"https:\/\/www.weswoo.com\/en\/astrid-miyu-shopify-charm-stack\/","og_site_name":"Shopify Plus & \u72ec\u7acb\u7ad9\u5f00\u53d1\uff5c\u8de8\u5883\u7535\u5546\u5b9a\u5236\u65b9\u6848 - WESWOO","article_published_time":"2026-11-10T07:56:26+00:00","og_image":[{"width":1280,"height":656,"url":"https:\/\/www.weswoo.com\/wp-content\/uploads\/2026\/11\/am-01-hero.jpg","type":"image\/jpeg"}],"author":"weswoo","twitter_card":"summary_large_image","twitter_misc":{"Written by":"weswoo","Est. reading time":"19 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.weswoo.com\/en\/astrid-miyu-shopify-charm-stack\/#article","isPartOf":{"@id":"https:\/\/www.weswoo.com\/en\/astrid-miyu-shopify-charm-stack\/"},"author":{"name":"weswoo","@id":"https:\/\/www.weswoo.com\/en\/#\/schema\/person\/bc9a01c6d3445dbdfb68e96ee00f9642"},"headline":"How to guide shoppers from one charm to a full stack on Shopify","datePublished":"2026-11-10T07:56:26+00:00","dateModified":"2026-11-10T07:56:26+00:00","mainEntityOfPage":{"@id":"https:\/\/www.weswoo.com\/en\/astrid-miyu-shopify-charm-stack\/"},"wordCount":1165,"commentCount":0,"publisher":{"@id":"https:\/\/www.weswoo.com\/en\/#organization"},"image":{"@id":"https:\/\/www.weswoo.com\/en\/astrid-miyu-shopify-charm-stack\/#primaryimage"},"thumbnailUrl":"https:\/\/www.weswoo.com\/wp-content\/uploads\/2026\/11\/am-01-hero.jpg","keywords":["API","Shopify"],"articleSection":["Shopify\u72ec\u7acb\u7ad9\u6307\u5357"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.weswoo.com\/en\/astrid-miyu-shopify-charm-stack\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.weswoo.com\/en\/astrid-miyu-shopify-charm-stack\/","url":"https:\/\/www.weswoo.com\/en\/astrid-miyu-shopify-charm-stack\/","name":"How to guide shoppers from one charm to a full stack on Shopify","isPartOf":{"@id":"https:\/\/www.weswoo.com\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.weswoo.com\/en\/astrid-miyu-shopify-charm-stack\/#primaryimage"},"image":{"@id":"https:\/\/www.weswoo.com\/en\/astrid-miyu-shopify-charm-stack\/#primaryimage"},"thumbnailUrl":"https:\/\/www.weswoo.com\/wp-content\/uploads\/2026\/11\/am-01-hero.jpg","datePublished":"2026-11-10T07:56:26+00:00","dateModified":"2026-11-10T07:56:26+00:00","description":"How to guide shoppers from one charm to a full stack on Shopify","breadcrumb":{"@id":"https:\/\/www.weswoo.com\/en\/astrid-miyu-shopify-charm-stack\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.weswoo.com\/en\/astrid-miyu-shopify-charm-stack\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.weswoo.com\/en\/astrid-miyu-shopify-charm-stack\/#primaryimage","url":"https:\/\/www.weswoo.com\/wp-content\/uploads\/2026\/11\/am-01-hero.jpg","contentUrl":"https:\/\/www.weswoo.com\/wp-content\/uploads\/2026\/11\/am-01-hero.jpg","width":1280,"height":656,"caption":"\u96fe\u84dd\u9996\u5c4f\u7528\u4e00\u6761\u5df2\u642d\u597d\u7684\u94fe\u5c55\u793a\u53e0\u6234\u6548\u679c \u00b7 AMAKA JANE \/ Behance"},{"@type":"BreadcrumbList","@id":"https:\/\/www.weswoo.com\/en\/astrid-miyu-shopify-charm-stack\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/www.weswoo.com\/cn\/"},{"@type":"ListItem","position":2,"name":"How to guide shoppers from one charm to a full stack on Shopify"}]},{"@type":"WebSite","@id":"https:\/\/www.weswoo.com\/en\/#website","url":"https:\/\/www.weswoo.com\/en\/","name":"WESWOO","description":"WESWOO specializes in Shopify Plus and standalone custom development, providing high-performance e-commerce website development, cross-border operations support, B2B and multi-channel integration to help brands grow globally.","publisher":{"@id":"https:\/\/www.weswoo.com\/en\/#organization"},"alternateName":"WESWOO.COM","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.weswoo.com\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.weswoo.com\/en\/#organization","name":"WESWOO","alternateName":["WESWOO - Shopify Premier Partner","\u897f\u897f\u6728\uff08\u6df1\u5733\uff09\u79d1\u6280\u6709\u9650\u8d23\u4efb\u516c\u53f8","Xiximu (Shenzhen) Technology Co., Ltd."],"url":"https:\/\/www.weswoo.com\/en\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.weswoo.com\/en\/#\/schema\/logo\/image\/","url":"https:\/\/www.weswoo.com\/wp-content\/uploads\/2025\/08\/fulllogo.png","contentUrl":"https:\/\/www.weswoo.com\/wp-content\/uploads\/2025\/08\/fulllogo.png","width":1280,"height":1024,"caption":"WESWOO \u2014 Shopify cross-border ecommerce development specialist"},"image":{"@id":"https:\/\/www.weswoo.com\/en\/#\/schema\/logo\/image\/"},"description":"WESWOO is a Shopify Premier Partner providing Shopify theme and Shopify Plus development, B2B, Headless, data integration, and long-term technical support.","email":"info@weswoo.com","telephone":"+86 18688202145","legalName":"\u897f\u897f\u6728\uff08\u6df1\u5733\uff09\u79d1\u6280\u6709\u9650\u8d23\u4efb\u516c\u53f8","foundingDate":"2021-04-26","numberOfEmployees":{"@type":"QuantitativeValue","minValue":"11","maxValue":"50"},"address":[{"@type":"PostalAddress","streetAddress":"\u9999\u6e2f\u4e5d\u9f99\u65fa\u89d2\u5f25\u6566\u9053610\u53f7\u8377\u674e\u6d3b\u5546\u4e1a\u4e2d\u5fc318\u697c1805-06\u5ba4","addressLocality":"\u9999\u6e2f","addressCountry":"HK"},{"@type":"PostalAddress","streetAddress":"\u6df1\u5733\u5e02\u5b9d\u5b89\u533a\u897f\u4e61\u8857\u9053\u5171\u4e50\u793e\u533a\u94c1\u4ed4\u8def60\u53f7\u594b\u6210\u667a\u8c37\u5927\u53a6B\u5ea72001A","addressLocality":"\u6df1\u5733\u5e02","addressRegion":"\u5e7f\u4e1c\u7701","addressCountry":"CN"}],"sameAs":["https:\/\/www.shopify.com\/partners\/directory\/partner\/10395"]},{"@type":"Person","@id":"https:\/\/www.weswoo.com\/en\/#\/schema\/person\/bc9a01c6d3445dbdfb68e96ee00f9642","name":"weswoo","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.weswoo.com\/en\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/60152bb1145c677a6b80dd2db1d761f279c3db9d602631e4f31f40a5ffd5ba44?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/60152bb1145c677a6b80dd2db1d761f279c3db9d602631e4f31f40a5ffd5ba44?s=96&d=mm&r=g","caption":"weswoo"},"description":"WESWOO \u7f51\u7ad9\u5185\u5bb9\u53d1\u5e03\u8d26\u53f7\uff0c\u53d1\u5e03 Shopify \u72ec\u7acb\u7ad9\u5efa\u8bbe\u3001\u4e3b\u9898\u5f00\u53d1\u3001\u7cfb\u7edf\u96c6\u6210\u4e0e\u8de8\u5883\u8fd0\u8425\u76f8\u5173\u6587\u7ae0\u3002","sameAs":["https:\/\/weswoo.com"],"url":"https:\/\/www.weswoo.com\/en\/author\/weswoo\/"}]}},"_links":{"self":[{"href":"https:\/\/www.weswoo.com\/en\/wp-json\/wp\/v2\/posts\/10972","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.weswoo.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.weswoo.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.weswoo.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.weswoo.com\/en\/wp-json\/wp\/v2\/comments?post=10972"}],"version-history":[{"count":0,"href":"https:\/\/www.weswoo.com\/en\/wp-json\/wp\/v2\/posts\/10972\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.weswoo.com\/en\/wp-json\/wp\/v2\/media\/10966"}],"wp:attachment":[{"href":"https:\/\/www.weswoo.com\/en\/wp-json\/wp\/v2\/media?parent=10972"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.weswoo.com\/en\/wp-json\/wp\/v2\/categories?post=10972"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.weswoo.com\/en\/wp-json\/wp\/v2\/tags?post=10972"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}