Shopify 独立站银饰商品页怎样讲清材质和克重？

做手工银饰、男士首饰、设计师腕表、钛金属EDC工具或手工皮具的 Shopify free-standing station时，如果页面满是促销标签，商品卡只写「纯银耳环 $89」，买家很难看懂材质和佩戴时的分量。

这类商品页需要呈现材质分量、手工锻打痕迹与品牌气质。

设计师 Yana Potapova 发布的 Heritage: Men’s Jewelry Brand Identity（品牌名：CODESTAL） 案例，提供了一套专门针对男士珠宝与重质感配饰的独立站范本。

CODESTAL 的品牌设定是一家源自西班牙的男士手工银饰品牌（主打 925 纯银氧化做旧工艺 Oxidized Finish 与锆石镶嵌）。

原案首屏用「记住自己的根，把它传给下一代」讲品牌故事。黑白界面把注意力留给锻造金属的凹痕、氧化层与质感。

下面我们从 Shopify 独立站设计与开发的角度，拆解 CODESTAL 案例 是如何通过零彩色色板、克重与档案编号外露、一级保养导航与透明购物袋来呈现材质和选购信息，并附 Shopify Online Store 2.0 的完整 Section 示例。

一、拆解 CODESTAL 的四套核心设计手法

1. 用无彩色色板衬出银饰质感

从 CODESTAL 案例可以看到，界面采用四种无彩色，产品摄影保留原有色彩。

• 纯黑（#000000）：首屏暗部背景、主购买按钮（ADD TO BAG、COMPLETE PURCHASE）底色。
• 深炭灰（#1A1A1A）：暗色叙事区块（如品牌历史页 OUR COMPANY / HUMAN IDENTITY）与底部 Footer。
• 中深板岩灰（#383838）：次级文字、工业分割线、未激活的筛选标签与表格边框。
• 纯白（#FFFFFF）：商品列表与弹窗的干净画布底色、暗底上的高反差标题文字。

为什么手工银饰/金属配饰独立站要用「无彩色」？
925 做旧纯银（Oxidized Silver）本身的魅力在于深灰色的硫化物氧化层与银白色锤纹高光之间的微妙反差。

如果页面上出现高饱和的红、绿、蓝按钮或金色星星评分，人眼对金属冷暖灰度对比的感知就会被破坏。

全站采用 #000000–#383838–#FFFFFF 无彩色架构，像一座暗色展柜，让微距摄影里的锻打痕迹和金属高光更突出。

2. 把「档案货号 + 精确克重（g）」外露到商品卡、弹窗与购物袋

普通饰品站只在详情页最底部的折叠栏里提一句重量，甚至干脆不写。CODESTAL 在商品卡标货号，在**精选商品、快购弹窗和购物袋（\ YOUR BAG \）**展示克重。

斜杠式锻造档案编号（Item Number）：每件饰品都有一组类似工业零件的斜杠编码——例如：

• Forged Metal Silver Earrings：UGS28\36\2023\1
• Hand-forged Silver Earrings：UG52/40/243/1
• Silver Earrings ‘Boldness’：CODE048

精确到小数点后两位的克重（Weight in Grams）：

原案用 4.10 g、6.58 g 或 1.50 g 一类具体数字呈现分量。

从 Shopify conversion rate角度看，为什么这两项数据这么管用？

• 解决「线上摸不到分量」的痛点：男士买银饰最怕收到手发现是轻飘飘的空心薄片；同时买耳环/耳骨夹（Ear Cuff）又担心太重坠耳垂。直接把 4.10 g 标在价格旁边，能给买家一个直观的佩戴体感参考。
• 用工业编码强化「孤品/收藏感」：把普通的 Shopify variant.sku 设计成 UGS28\36\2023\1（系列\工坊号\年份\批次）并外露展示，配合工业感斜杠标题（如 \ YOUR BAG \），呼应原案代际传承的叙事。22 350 ₴ 是设计稿里的价格示例。

3. 全局导航与材质叙事：把 PRODUCT CARE（氧化保养）提成一级菜单

观察 CODESTAL 的顶部全局导航栏（Global Header），它的结构非常讲究：

• 左侧：COLLECTION +、OUR STORY、PRODUCT CARE
• 中间：CODESTAL 粗体无衬线 Logo
• 右侧：RETURNS & REFUNDS、SHIPPING、账户、心愿单、购物袋图标

为什么把 PRODUCT CARE、RETURNS & REFUNDS 和 SHIPPING 放进顶部一级导航？
做旧银饰和手工皮具在网上卖，售后最大的纠纷来源就是买家不懂材质特性——比如把「手工锻打的不规则锤痕」当成瑕疵，或者把纯银佩戴后的「自然氧化包浆（Patina）」当成掉色。
CODESTAL 的品牌故事围绕代际传承展开。页面也把 PRODUCT CARE（保养说明）和退换货、物流政策直接摆在顶部导航最显眼的位置，并在商品详情框里并排设置 Specifications（规格） 与 Warranty（质保） 两个切换标签，在下单前就把材质预期管理得明明白白。

4. 网格规范与 \ YOUR BAG \ 透明结算体验

设计师在案例中明确给出了两套响应式栅格参数与购物袋交互细节：

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

Shopify 可以从商品变体读取货号（SKU）和重量（Weight）。需要按商品维护肌理、材质和保养说明时，可以把主题接到相应的商品元字段。

1. Shopify 后台字段映射表（原生字段 + 3 个轻量 Metafields）

2. 完整可复用的 Shopify Section：CODESTAL 粗野主义银饰陈列墙 + 规格/质保双标签弹窗

将下面这段完整代码保存为 sections/codestal-jewelry-showcase.liquid。它用主题组件演示了 CODESTAL 原案 的界面思路。

1. 严格的无彩色色板（#000000、#1A1A1A、#383838、#FFFFFF）+ Google Fonts Audiowide 标题字型（行高严格锁定 120%）；
2. 移动端友好的款式快筛栏（ALL / MINIMAL / TEXTURED / FASHION / EAR CUFF）；
3. 外露「斜杠货号 + 精确克重（g）+ 925 氧化银材质」的商品卡片；
4. 点击 SPECS + 打开规格与质保弹窗。示例购买按钮跳转商品页。

先在主题编辑器给区块选真实商品，清空或替换示例货号、克重，并核对变体重量单位。代码中的材质和质保读区块设置，接上表里的元字段后可按商品维护。购物袋明细要单独接入主题的 Cart Drawer，弹窗直接加购可接主题的商品表单。

{%- comment -%}
  文件：sections/codestal-jewelry-showcase.liquid
  设计参考：Heritage: Men's Jewelry Brand Identity - CODESTAL (by Yana Potapova)
  功能：无彩色粗野主义银饰陈列柜，支持肌理/款式筛选、货号与克重外露、以及 Specifications / Warranty 双标签快购弹窗
{%- 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=Audiowide&family=Inter:wght@300;400;600&display=swap" rel="stylesheet">

<style>
  .codestal-sec-{{ section.id }} {
    --c-black: #000000;
    --c-charcoal: #1A1A1A;
    --c-slate: #383838;
    --c-white: #FFFFFF;
    --c-border: #2B2B2B;
    --c-font-title: 'Audiowide', sans-serif;
    --c-font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

    background-color: var(--c-black);
    color: var(--c-white);
    font-family: var(--c-font-body);
    padding: {{ section.settings.padding_top }}px 0 {{ section.settings.padding_bottom }}px;
  }

  /* 遵循原案 1920px 桌面 60px 边距 / 375px 手机 20px 边距规范 */
  .codestal-container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 60px;
  }
  @media screen and (max-width: 768px) {
    .codestal-container {
      padding: 0 20px;
    }
  }

  /* 顶部宣言与斜杠副标题 */
  .codestal-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--c-slate);
    margin-bottom: 32px;
  }
  .codestal-slash-tag {
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.2;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-white);
    opacity: 0.75;
    margin-bottom: 12px;
  }
  .codestal-main-title {
    font-family: var(--c-font-title);
    font-size: clamp(2rem, 3.8vw, 4.25rem); /* 最大对应原案 68px */
    font-weight: 400;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--c-white);
    margin: 0;
    max-width: 820px;
  }
  .codestal-manifesto {
    max-width: 360px;
    font-size: 1rem; /* 原案 16px Light */
    font-weight: 300;
    line-height: 1.2;
    color: #CCCCCC;
    margin: 0;
  }

  /* 款式与肌理筛选条：MINIMAL / TEXTURED / FASHION / EAR CUFF */
  .codestal-filter-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 40px;
  }
  .codestal-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  .codestal-tab-btn {
    background: transparent;
    color: var(--c-white);
    border: 1px solid var(--c-slate);
    padding: 10px 20px;
    font-family: var(--c-font-body);
    font-size: 0.875rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  }
  .codestal-tab-btn.is-active,
  .codestal-tab-btn:hover {
    background: var(--c-white);
    color: var(--c-black);
    border-color: var(--c-white);
  }

  /* 12 列桌面网格 / 4 列移动网格（20px Gutter） */
  .codestal-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 20px;
  }
  .codestal-card {
    grid-column: span 4;
    background-color: var(--c-charcoal);
    border: 1px solid var(--c-border);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: border-color 0.25s ease;
  }
  .codestal-card:hover {
    border-color: var(--c-white);
  }
  .codestal-card[hidden] {
    display: none !important;
  }
  @media screen and (max-width: 1024px) {
    .codestal-card {
      grid-column: span 6;
    }
  }
  @media screen and (max-width: 600px) {
    .codestal-grid {
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
    }
    .codestal-card {
      grid-column: span 4;
    }
  }

  /* 卡片顶部：系列名 + 档案货号 + 克重 */
  .codestal-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid var(--c-border);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    color: #B8B8B8;
    text-transform: uppercase;
  }
  .codestal-weight-badge {
    color: var(--c-white);
    font-weight: 600;
    border: 1px solid var(--c-slate);
    padding: 2px 8px;
  }

  /* 商品黑白高反差微距图 */
  .codestal-img-wrap {
    position: relative;
    aspect-ratio: 1 / 1;
    background-color: #111111;
    overflow: hidden;
  }
  .codestal-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: contrast(1.06);
    transition: transform 0.45s ease;
  }
  .codestal-card:hover .codestal-img-wrap img {
    transform: scale(1.04);
  }

  /* 卡片底部信息与双动作区 */
  .codestal-card-body {
    padding: 20px 18px;
  }
  .codestal-collection-tag {
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #999999;
    margin: 0 0 6px;
  }
  .codestal-prod-title {
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.2;
    color: var(--c-white);
    margin: 0 0 8px;
    text-transform: uppercase;
  }
  .codestal-finish-line {
    font-size: 0.875rem;
    font-weight: 300;
    color: #BBBBBB;
    margin: 0 0 18px;
  }
  .codestal-price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 16px;
    border-top: 1px solid var(--c-border);
    gap: 12px;
  }
  .codestal-price {
    font-family: var(--c-font-title);
    font-size: 1.25rem;
    color: var(--c-white);
  }
  .codestal-actions {
    display: flex;
    gap: 8px;
  }
  .codestal-btn-ghost {
    background: transparent;
    color: var(--c-white);
    border: 1px solid var(--c-slate);
    padding: 10px 14px;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
  }
  .codestal-btn-ghost:hover {
    border-color: var(--c-white);
  }
  .codestal-btn-solid {
    background: var(--c-white);
    color: var(--c-black);
    border: 1px solid var(--c-white);
    padding: 10px 16px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
  }
  .codestal-btn-solid:hover {
    background: #CCCCCC;
    border-color: #CCCCCC;
  }

  /* 原案同款：Specifications / Warranty 快速规格抽屉弹窗 */
  .codestal-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.82);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 999;
    padding: 20px;
  }
  .codestal-modal-backdrop.is-open {
    display: flex;
  }
  .codestal-modal {
    background: var(--c-charcoal);
    border: 1px solid var(--c-slate);
    max-width: 560px;
    width: 100%;
    padding: 32px;
    color: var(--c-white);
    position: relative;
  }
  .codestal-modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: transparent;
    border: 1px solid var(--c-slate);
    color: var(--c-white);
    width: 32px;
    height: 32px;
    cursor: pointer;
  }
  .codestal-modal-tabs {
    display: flex;
    gap: 16px;
    border-bottom: 1px solid var(--c-slate);
    margin: 20px 0 16px;
  }
  .codestal-modal-tab {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: #999999;
    padding: 8px 0;
    font-size: 0.8125rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
  }
  .codestal-modal-tab.is-active {
    color: var(--c-white);
    border-bottom-color: var(--c-white);
  }
  .codestal-spec-dl {
    display: grid;
    grid-template-columns: 140px 1fr;
    row-gap: 10px;
    font-size: 0.875rem;
    margin: 0 0 24px;
  }
  .codestal-spec-dl dt {
    color: #999999;
    font-weight: 300;
  }
  .codestal-spec-dl dd {
    margin: 0;
    color: var(--c-white);
  }
</style>

<section class="codestal-sec-{{ section.id }}" data-section-id="{{ section.id }}">
  <div class="codestal-container">
    <div class="codestal-header">
      <div>
        <div class="codestal-slash-tag">\ {{ section.settings.slash_subtitle }} \</div>
        <h2 class="codestal-main-title">{{ section.settings.heading }}</h2>
      </div>
      <p class="codestal-manifesto">{{ section.settings.manifesto }}</p>
    </div>

    <div class="codestal-filter-bar">
      <div class="codestal-tabs" role="tablist" aria-label="按肌理与款式筛选">
        <button type="button" class="codestal-tab-btn is-active" data-filter="all">ALL ARCHIVE</button>
        <button type="button" class="codestal-tab-btn" data-filter="textured">TEXTURED</button>
        <button type="button" class="codestal-tab-btn" data-filter="minimal">MINIMAL</button>
        <button type="button" class="codestal-tab-btn" data-filter="fashion">FASHION</button>
        <button type="button" class="codestal-tab-btn" data-filter="ear-cuff">EAR CUFF</button>
      </div>
    </div>

    <div class="codestal-grid">
      {%- for block in section.blocks -%}
        {%- assign product = block.settings.product -%}
        {%- assign variant = product.selected_or_first_available_variant -%}
        {%- assign item_code = block.settings.item_code | default: variant.sku | default: 'UGS28\36\2023\1' -%}
        {%- assign item_weight = block.settings.weight_grams | default: variant.weight_in_unit | default: '4.10' -%}
        {%- assign item_title = block.settings.custom_title | default: product.title | default: 'FORGED METAL SILVER EARRINGS' -%}
        {%- assign item_price = product.price | money | default: block.settings.fallback_price -%}

        <article
          class="codestal-card"
          data-category="{{ block.settings.style_tag }}"
          {{ block.shopify_attributes }}
        >
          <div>
            <div class="codestal-card-meta">
              <span>ITEM: {{ item_code }}</span>
              <span class="codestal-weight-badge">WEIGHT: {{ item_weight }} g</span>
            </div>

            <div class="codestal-img-wrap">
              {%- if block.settings.custom_image != blank -%}
                <img
                  src="{{ block.settings.custom_image | image_url: width: 900 }}"
                  alt="{{ item_title | escape }}"
                  width="900"
                  height="900"
                  loading="lazy"
                >
              {%- elsif product != blank and product.featured_image != blank -%}
                <img
                  src="{{ product.featured_image | image_url: width: 900 }}"
                  alt="{{ item_title | escape }}"
                  width="900"
                  height="900"
                  loading="lazy"
                >
              {%- endif -%}
            </div>
          </div>

          <div class="codestal-card-body">
            <p class="codestal-collection-tag">\ {{ block.settings.collection_line }} \</p>
            <h3 class="codestal-prod-title">{{ item_title }}</h3>
            <p class="codestal-finish-line">{{ block.settings.material_spec }}</p>

            <div class="codestal-price-row">
              <span class="codestal-price">{{ item_price }}</span>
              <div class="codestal-actions">
                <button
                  type="button"
                  class="codestal-btn-ghost js-codestal-open-spec"
                  data-title="{{ item_title | escape }}"
                  data-code="{{ item_code | escape }}"
                  data-weight="{{ item_weight }} g"
                  data-material="{{ block.settings.material_spec | escape }}"
                  data-warranty="{{ block.settings.warranty_note | escape }}"
                  data-url="{{ product.url | default: '#' }}"
                >
                  SPECS +
                </button>
                <a href="{{ product.url | default: '#' }}" class="codestal-btn-solid">ADD TO BAG</a>
              </div>
            </div>
          </div>
        </article>
      {%- endfor -%}
    </div>
  </div>

  {%- comment -%} Specifications & Warranty 模态框 {%- endcomment -%}
  <div class="codestal-modal-backdrop" id="CodestalModal-{{ section.id }}" aria-hidden="true">
    <div class="codestal-modal" role="dialog" aria-modal="true">
      <button type="button" class="codestal-modal-close js-codestal-close" aria-label="Close">✕</button>
      <div class="codestal-slash-tag" id="ModalCode-{{ section.id }}">\ ITEM \</div>
      <h3 class="codestal-prod-title" id="ModalTitle-{{ section.id }}" style="font-family:var(--c-font-title);font-size:1.5rem;"></h3>

      <div class="codestal-modal-tabs">
        <button type="button" class="codestal-modal-tab is-active" data-modal-tab="specs">SPECIFICATIONS</button>
        <button type="button" class="codestal-modal-tab" data-modal-tab="warranty">WARRANTY & CARE</button>
      </div>

      <div id="ModalPaneSpecs-{{ section.id }}">
        <dl class="codestal-spec-dl">
          <dt>ARCHIVE NUMBER</dt>
          <dd id="ModalSpecCode-{{ section.id }}"></dd>
          <dt>EXACT WEIGHT</dt>
          <dd id="ModalSpecWeight-{{ section.id }}"></dd>
          <dt>MATERIAL & FINISH</dt>
          <dd id="ModalSpecMaterial-{{ section.id }}"></dd>
        </dl>
      </div>

      <div id="ModalPaneWarranty-{{ section.id }}" style="display:none;margin-bottom:24px;font-size:0.875rem;line-height:1.5;color:#CCCCCC;">
        <p id="ModalWarrantyText-{{ section.id }}"></p>
      </div>

      <a href="#" id="ModalBuyLink-{{ section.id }}" class="codestal-btn-solid" style="display:block;text-align:center;padding:14px;">
        ADD TO BAG
      </a>
    </div>
  </div>
</section>

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

    /* 顶部款式筛选 */
    var filterBtns = sec.querySelectorAll('[data-filter]');
    var cards = sec.querySelectorAll('.codestal-card');
    filterBtns.forEach(function(btn) {
      btn.addEventListener('click', function() {
        var cat = btn.getAttribute('data-filter');
        filterBtns.forEach(function(b) { b.classList.toggle('is-active', b === btn); });
        cards.forEach(function(card) {
          if (cat === 'all' || card.getAttribute('data-category') === cat) {
            card.removeAttribute('hidden');
          } else {
            card.setAttribute('hidden', 'hidden');
          }
        });
      });
    });

    /* Specifications / Warranty 弹窗控制 */
    var modal = sec.querySelector('#CodestalModal-{{ section.id }}');
    var openBtns = sec.querySelectorAll('.js-codestal-open-spec');
    var closeBtn = sec.querySelector('.js-codestal-close');
    var modalTabs = sec.querySelectorAll('[data-modal-tab]');
    var paneSpecs = sec.querySelector('#ModalPaneSpecs-{{ section.id }}');
    var paneWarranty = sec.querySelector('#ModalPaneWarranty-{{ section.id }}');

    openBtns.forEach(function(btn) {
      btn.addEventListener('click', function() {
        sec.querySelector('#ModalCode-{{ section.id }}').textContent = '\\ ' + btn.getAttribute('data-code') + ' \\';
        sec.querySelector('#ModalTitle-{{ section.id }}').textContent = btn.getAttribute('data-title');
        sec.querySelector('#ModalSpecCode-{{ section.id }}').textContent = btn.getAttribute('data-code');
        sec.querySelector('#ModalSpecWeight-{{ section.id }}').textContent = btn.getAttribute('data-weight');
        sec.querySelector('#ModalSpecMaterial-{{ section.id }}').textContent = btn.getAttribute('data-material');
        sec.querySelector('#ModalWarrantyText-{{ section.id }}').textContent = btn.getAttribute('data-warranty');
        sec.querySelector('#ModalBuyLink-{{ section.id }}').setAttribute('href', btn.getAttribute('data-url'));
        modal.classList.add('is-open');
      });
    });

    if (closeBtn) {
      closeBtn.addEventListener('click', function() { modal.classList.remove('is-open'); });
    }
    modal.addEventListener('click', function(e) {
      if (e.target === modal) modal.classList.remove('is-open');
    });

    modalTabs.forEach(function(tab) {
      tab.addEventListener('click', function() {
        var target = tab.getAttribute('data-modal-tab');
        modalTabs.forEach(function(t) { t.classList.toggle('is-active', t === tab); });
        paneSpecs.style.display = target === 'specs' ? 'block' : 'none';
        paneWarranty.style.display = target === 'warranty' ? 'block' : 'none';
      });
    });
  })();
</script>

{% schema %}
{
  "name": "CODESTAL 粗野主义银饰陈列柜",
  "tag": "section",
  "settings": [
    {
      "type": "text",
      "id": "slash_subtitle",
      "label": "顶部斜杠副标题",
      "default": "FORGED IN 925 STERLING SILVER"
    },
    {
      "type": "text",
      "id": "heading",
      "label": "Audiowide 主标题",
      "default": "REMEMBER YOUR ROOTS. PASS IT ON."
    },
    {
      "type": "textarea",
      "id": "manifesto",
      "label": "右侧品牌宣言",
      "default": "A manifesto of modern identity engraved in oxidized silver. Every dent and texture reflects manual forging traditions."
    },
    {
      "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": "jewelry_item",
      "name": "银饰单品卡片",
      "settings": [
        {
          "type": "product",
          "id": "product",
          "label": "关联 Shopify 商品"
        },
        {
          "type": "image_picker",
          "id": "custom_image",
          "label": "自定义微距主图（可选）"
        },
        {
          "type": "text",
          "id": "custom_title",
          "label": "自定义商品标题",
          "default": "SILVER EARRINGS 'BOLDNESS'"
        },
        {
          "type": "text",
          "id": "collection_line",
          "label": "所属系列名称",
          "default": "FORGED METAL"
        },
        {
          "type": "select",
          "id": "style_tag",
          "label": "筛选分类标签",
          "options": [
            { "value": "textured", "label": "Textured（锻打肌理）" },
            { "value": "minimal", "label": "Minimal（极简几何）" },
            { "value": "fashion", "label": "Fashion（镶石造型）" },
            { "value": "ear-cuff", "label": "Ear Cuff（耳骨夹）" }
          ],
          "default": "textured"
        },
        {
          "type": "text",
          "id": "item_code",
          "label": "斜杠档案货号（留空则读取 SKU）",
          "default": "UGS28\\36\\2023\\1"
        },
        {
          "type": "text",
          "id": "weight_grams",
          "label": "单件克重 (g)",
          "default": "4.10"
        },
        {
          "type": "text",
          "id": "material_spec",
          "label": "材质与表面处理说明",
          "default": "925 Silver Forged Metal — Oxidized Finish"
        },
        {
          "type": "textarea",
          "id": "warranty_note",
          "label": "质保与氧化包浆说明（弹窗展示）",
          "default": "Hand-forged in 925 sterling silver. Oxidized finish is designed to naturally evolve and develop a personal patina over time. Includes 2-year structural warranty."
        },
        {
          "type": "text",
          "id": "fallback_price",
          "label": "示例价格（未绑商品时显示）",
          "default": "$260"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "CODESTAL 粗野主义银饰陈列柜",
      "blocks": [
        {
          "type": "jewelry_item",
          "settings": {
            "custom_title": "FORGED METAL SILVER EARRINGS",
            "collection_line": "FORGED METAL",
            "style_tag": "textured",
            "item_code": "UGS28\\36\\2023\\1",
            "weight_grams": "4.10",
            "material_spec": "925 Silver Forged Metal — Oxidized Finish",
            "fallback_price": "22 350 ₴"
          }
        },
        {
          "type": "jewelry_item",
          "settings": {
            "custom_title": "SILVER EARRINGS 'BOLDNESS'",
            "collection_line": "NEW SCALE",
            "style_tag": "fashion",
            "item_code": "CODE048",
            "weight_grams": "6.58",
            "material_spec": "925 Sterling Silver — Hand-Forged Texture",
            "fallback_price": "36 960 ₴"
          }
        },
        {
          "type": "jewelry_item",
          "settings": {
            "custom_title": "SILVER HOOP EARRINGS",
            "collection_line": "FORGED METAL",
            "style_tag": "minimal",
            "item_code": "UG52/40/071",
            "weight_grams": "4.10",
            "material_spec": "925 Sterling Silver — Brushed Matte",
            "fallback_price": "8 350 ₴"
          }
        }
      ]
    }
  ]
}
{% endschema %}

三、四套 Behance 独立站设计风格总表：按品类对号入座

加上今天的 CODESTAL 男士银饰案例，我们已经拆解了四套非常典型的独立站视觉与转化范式。在启动新的 Shopify 项目时，可以直接按这张总表做风格定位：