Project portfolio Browse selected work

Shopify Plus Upgrade Monthly Fee Reduction + Up to $4800 Development Fee Credit - Exclusive WesWoo Offer

Article

Shopify珠宝独立站,如何兼顾杂志感与跨境下单?

Topics: , , ,

很多小众设计师品牌、独立首饰工作室或香氛买手店在做跨境出海 Shopify free-standing station时,都会碰到一个两难问题:

  • 如果页面做得太像时尚杂志:满屏胶片感模特图、字体随性,海外买家虽然觉得好看,但付款前心里没底——不知道实物到底长什么样、尺码准不准、从海外发货要多久、到了本国海关会不会被突然收一笔高额关税;
  • 如果页面做得太像标准电商:白底抠图配大红促销字,又把品牌原本粗糙、先锋的手工基因(Raw & Authentic Identity)毁得一干二净。

设计师 Yulia Shevy 为格鲁吉亚珠宝品牌做的 Le Chic Radical website redesign 概念改版案例,给出了一个兼顾品牌调性与购买秩序的方案。画面里能看到从 $150 耳饰到 $1,250 吊坠的示例价格,也能看到首饰与香水两类商品。

作者在项目说明中标注:这是独立概念设计,未经品牌参与或审批。本文把它作为设计参考,不把画面中的售价、运费或业务效果视为品牌的现行承诺。

改版的两个核心动作,可以概括为:

视觉对冲。 中性灰底棚拍图与带方括号的微距图各司其职。再用 Martian Mono 等宽字体整理编号、价格和分类信息,为品牌粗犷、感性的杂志底色增加秩序。

跨境信任。 重整购买流程,让国际物流选项与税费说明在付款前被看见。

下面我们拆解 Le Chic Radical 改版案例 的四套核心设计语言,并给出在 Shopify Online Store 2.0 主题中落地的完整代码。

一、拆解 Le Chic Radical 的四套核心改版手法

1. 色板与字体对冲:暖羊皮纸米色(#F4F1EA)+ Urbanist / Martian Mono 混排

Shopify珠宝独立站,如何兼顾杂志感与跨境下单?
原案字体色板:Urbanist、Martian Mono、暖米色与深炭黑 · Yulia Shevy / Behance

和 CODESTAL 的纯黑工业风、Astrid & Miyu 的雾霾蓝柔雾风都不同,Le Chic Radical 选了一套极简但自带档案袋温度的三色系统:

  • 主画布底色(Warm Cream):暖羊皮纸米色(#F4F1EA),温润且不刺眼,非常适合承载天然巴洛克珍珠、手工纯银与玻璃香水瓶。

  • 主文字与按钮色(Dark Charcoal):深炭黑(#252525),加上降低透明度的同色系浅灰线条(rgba(37, 37, 37, 0.16)),全站没有任何多余的装饰色。

  • 卡片与弹窗亮底(Pure White):纯白(#FFFFFF),用于突出重点购买区与尺码选择器。
    字体搭档:感性标题与理性参数

  • 主标题与商品名(Urbanist — Semi Bold / Medium):现代几何无衬线体,承载诸如 "WE CREATE JEWELRY FOR THOSE WHO SEE BEAUTY IN HUMAN AND NATURE" 的大段宣言;

  • 全局元数据与控件(Martian Mono — Regular / Light):所有带数字、编号、分类计数、价格、尺码(16, 17, 18, 20)和按钮的文字,采用等宽字体,并广泛使用方括号包裹——如 [ Since 2018 ]、[ New drop ] SS 2026、[ Product page ]、Art. 56728282930、Low in stock。

为什么这套字体组合对独立设计师品牌特别有效?

很多独立工作室的商品是手工做的,如果连网页排版也松散随性,买家也更难快速核对发货与售后信息。用 Martian Mono 等宽字体把货号、库存、价格和分类数量对齐成「实验室档案」一样的精密网格,能在保留艺术调性的同时,让履约信息更容易扫读。

2. 商品图片的双图规范:「灰底棚拍主图 + 方括号微距特写(Bracket-Framed Close-up)」

Shopify珠宝独立站,如何兼顾杂志感与跨境下单?
原案目录局部:商品轮廓、编号价格与微距细节各有位置 · Yulia Shevy / Behance

很多视觉向品牌最容易犯的错,是商品列表页全放模特远景图,买家连戒指长什么样都看不清。设计师在这次改版中专门制定了双图互补规范:

  1. 第一张图(Grey-Background Studio Shot):统一使用柔和的中性浅灰底棚拍图(如 Loop Earrings $150、Crystal Flower Ring $425、Pierced Heart Pendant $1,250),让每件首饰的真实比例和轮廓在网格里一目了然。
  2. 第二张图 / 特写图(Bracket-Framed Close-up Macro):落地到 Shopify 时,可以通过悬停或切换副图展示佩戴在锁骨/手指上的微距特写,并在画面四周加上标志性的细线方括号取景框 [ ],放大天然珍珠的纹理与纯银手工抛光细节。
  3. 非对称混排商品墙(Asymmetrical Editorial Grid):在 1440px(左右边距 100px,列间距 20px)的 12 列网格中,每排 3–4 张标准商品卡之间,会穿插一张占 2 列宽度的季度型录卡(如 [ New drop ] SS 2026 或 [ Collection ] INNER SPARKLE),打破纯货架的枯燥感。

3. 带方括号计数器的分类导航与跑马灯(Marquee)

Shopify珠宝独立站,如何兼顾杂志感与跨境下单?
原案目录页:灰底商品图、佩戴特写与系列大片穿插 · Yulia Shevy / Behance

在首页与目录页([ Browse by category ] THE CATALOG),案例没有使用干瘪的下拉菜单,而是把每个品类的展示数量放进了等宽方括号里:

  • [47] RINGS(戒指)
  • [27] EARRINGS(耳饰)
  • [12] NECKLACES(项链)
  • [25] BRACELETS(手链)
  • [16] PERFUMES(香水)

这些计数来自设计画面;下方示例组件按当前 Section 中配置的商品卡计数。

同时在首屏下方配了一条克制的黑白细线跑马灯(Marquee Ticker):

Most wanted [ LCR essentials ] Most wanted [ LCR essentials ]

商品详情页把价格、尺码与 Low in stock 放在购买区内。下方再用四组信息入口收拢跨国买家要核对的内容:

  • DETAILS:材质、表面处理与产地。
  • SIZE GUIDE:尺码对照与测量方式。
  • DELIVERY & RETURNS:物流、退换条件与费用。
  • CARE GUIDE:日常保养。

原稿 Section 中的 SPIRAL RING、货号与 €135 为演示文本。接入店铺时,应以关联商品的真实资料为准。

Shopify珠宝独立站,如何兼顾杂志感与跨境下单?
原案商品页局部:价格、尺码、低库存标记与四组详情入口 · Yulia Shevy / Behance

4. 付款前的跨境信息:物流时效、运费与税费说明

这是 Le Chic Radical 改版案例 值得跨境出海卖家借鉴的信息组织方式。

买家选好一件首饰,还需要判断能否及时送到、配送成本是多少、进口时是否另外付费。原案把这几类信息放在结账页的同一条阅读路径上。下表中的时效、运费与法国税费文字均来自概念界面,适合用来研究层级与位置。

跨境履约设计项 原案的具体呈现方式 解决的跨境独立站核心痛点
1. 三档国际物流时效与运费并列对比 • DHL Express(3–5 个工作日):$24
• FedEx(2–3 个工作日):$38
• Georgian Post 标准邮政(10–18 个工作日):$9
把不同配送方式的预计时间与费用放在一起,买家可以比较送礼时间与预算;实际时效仍取决于目的地、清关和承运商
2. 在配送选择下方放目的地税费说明 法国示例界面在运费下方放一段海关说明,并标出费用承担方及收取环节;原图仍能看到当时的 €150 文字 让买家在付款前知道是否另付进口税费、由谁收取。具体内容需要跟随当前政策及店铺实际设置更新
3. 尺码与低库存信号同屏 尺码选择器(16, 17, 18, 20)紧贴 Low in stock 标签与 SIZE GUIDE 抽屉 手工银饰改圈麻烦,在点 Add to cart 前引导核对店铺的尺码对照,降低跨国换尺码的高昂往返运费

从原案迁移到真实店铺时,要更新税费文字。 原图中的 €150 不能直接当作今天的欧盟免税承诺。美国也不能继续套用“$800 以下一般免税”。

截至 2026 年 11 月 11 日,欧盟低价包裹规则已变化;美国 CBP也已说明低额免税待遇暂停。英国需要区分 VAT 与关税,加拿大要区分邮政、快递及发运地,澳大利亚的低价进口商品也可能在销售环节征收 GST。

设计上应写清配送方式、预计时效、运费、税费是否已收及可能的到付环节。组件里的提示由商户维护,最终收费结合商品归类、原产地、目的地及实际结账结果确认。

Shopify珠宝独立站,如何兼顾杂志感与跨境下单?
原案结账页:三档物流、费用与税费说明同屏;图中数值属于概念稿 · Yulia Shevy / Behance

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

在 Shopify Online Store 2.0 主题中还原 Le Chic Radical 的质感,核心是做好三件事:

  1. 引入免费的 Google Fonts Urbanist 与 Martian Mono,确立 #F4F1EA(暖米色)与 #252525(深炭黑)的色彩骨架;
  2. 在商品卡片上实现**「主图灰底棚拍 + 悬停切换方括号微距特写图(product.images[1])」**;
  3. 在商品页或目录页内置一个**「跨境物流与税费说明组件(Shipping & Customs Information)」**,在商品页提前呈现配送信息。选择国家时切换商户维护的说明,不在前端写死免税额度。

完整 Shopify Section:等宽目录、双图卡片与跨境物流说明

将下面这段完整代码保存为 sections/lcr-editorial-catalog-and-duty.liquid。它在一个 Section 内演示四项设计做法:

  • Most wanted [ LCR essentials ] 等宽跑马灯 + 带 [数量] 计数器的品类切换栏;
  • 支持「主图棚拍 ↔ 悬停切换带 [ ] 方括号微距副图」的商品卡片,优先读取商品变体 SKU;Low in stock 标签由商户手动勾选,需核对真实库存;
  • 穿插在商品网格中的跨列季度型录卡([ New drop ] SS 2026);
  • 底部内嵌物流方式与税费说明:DHL、FedEx、邮政的时效和费用由商户配置,国家选择器切换对应市场的说明文字。

接入范围。 这是主题展示组件,不会替代 Shopify 结账的运费、关税或税金计算。真实收税方式在 Shopify Markets 的关税与税金设置中配置,并补齐相关商品资料。

分类数量统计本 Section 配置的商品卡;低库存标签是人工维护;已关联商品时名称、SKU 和价格读取商品数据,未关联时使用演示文本。手机端还需让顾客在商品详情图库查看第二张图,不能只依赖悬停。

展开完整代码 · 872 行
{%- comment -%}
  文件:sections/lcr-editorial-catalog-and-duty.liquid
  设计参考:Le Chic Radical website redesign (by Yulia Shevy)
  功能:暖米色等宽技术感目录页,含 [计数] 分类筛选、双图悬停方括号微距框、Art.货号与低库存提示、以及商户维护的跨境物流与税费说明
{%- 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=Martian+Mono:wght@300;400;500&family=Urbanist:wght@500;600;700&display=swap" rel="stylesheet">

<style>
  .lcr-sec-{{ section.id }} {
    --lcr-cream: #F4F1EA;
    --lcr-charcoal: #252525;
    --lcr-white: #FFFFFF;
    --lcr-muted: rgba(37, 37, 37, 0.58);
    --lcr-line: rgba(37, 37, 37, 0.15);
    --lcr-font-sans: 'Urbanist', -apple-system, BlinkMacSystemFont, sans-serif;
    --lcr-font-mono: 'Martian Mono', monospace;

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

  /* 顶部等宽字体跑马灯 */
  .lcr-marquee {
    overflow: hidden;
    white-space: nowrap;
    border-top: 1px solid var(--lcr-line);
    border-bottom: 1px solid var(--lcr-line);
    padding: 10px 0;
    margin-bottom: 48px;
    font-family: var(--lcr-font-mono);
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .lcr-marquee-track {
    display: inline-block;
    animation: lcrScroll-{{ section.id }} 26s linear infinite;
  }
  .lcr-marquee-track span {
    margin: 0 28px;
  }
  @keyframes lcrScroll-{{ section.id }} {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }

  /* 遵循原案 1440px 桌面容器与 20px Gutter */
  .lcr-container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 60px;
  }
  @media screen and (max-width: 900px) {
    .lcr-container {
      padding: 0 20px;
    }
  }

  /* 章节头部:[ Browse by category ] THE CATALOG */
  .lcr-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    margin-bottom: 32px;
  }
  .lcr-mono-tag {
    font-family: var(--lcr-font-mono);
    font-size: 0.75rem;
    font-weight: 300;
    color: var(--lcr-muted);
    margin-bottom: 10px;
    text-transform: uppercase;
  }
  .lcr-title {
    font-family: var(--lcr-font-sans);
    font-size: clamp(2rem, 3.6vw, 3.25rem);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -0.02em;
    margin: 0;
    text-transform: uppercase;
  }
  .lcr-subcopy {
    max-width: 400px;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--lcr-muted);
    margin: 0;
  }

  /* 带 [Count] 计数器的等宽分类切换栏 */
  .lcr-cat-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 18px 0;
    border-top: 1px solid var(--lcr-line);
    border-bottom: 1px solid var(--lcr-line);
    margin-bottom: 36px;
  }
  .lcr-cat-btn {
    background: transparent;
    color: var(--lcr-charcoal);
    border: 1px solid var(--lcr-line);
    padding: 9px 16px;
    font-family: var(--lcr-font-mono);
    font-size: 0.75rem;
    font-weight: 400;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s ease;
  }
  .lcr-cat-btn.is-active,
  .lcr-cat-btn:hover {
    background: var(--lcr-charcoal);
    color: var(--lcr-white);
    border-color: var(--lcr-charcoal);
  }
  .lcr-cat-btn .lcr-count {
    opacity: 0.65;
    margin-right: 4px;
  }

  /* 12 列非对称商品与型录混排网格 */
  .lcr-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 20px;
    margin-bottom: 56px;
  }
  .lcr-card {
    grid-column: span 3;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .lcr-card--editorial {
    grid-column: span 6;
    background-color: var(--lcr-charcoal);
    color: var(--lcr-white);
    padding: 28px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 380px;
  }
  .lcr-card[hidden] {
    display: none !important;
  }
  @media screen and (max-width: 1024px) {
    .lcr-card { grid-column: span 6; }
    .lcr-card--editorial { grid-column: span 12; }
  }
  @media screen and (max-width: 600px) {
    .lcr-card, .lcr-card--editorial { grid-column: span 12; }
  }

  /* 商品图片容器:中性灰底棚拍主图 + 悬停切换带 [ ] 方括号微距特写图 */
  .lcr-img-stage {
    position: relative;
    aspect-ratio: 4 / 5;
    background-color: #E7E4DD;
    overflow: hidden;
    margin-bottom: 14px;
  }
  .lcr-img-primary,
  .lcr-img-macro {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 0.35s ease, transform 0.45s ease;
  }
  .lcr-img-macro {
    position: absolute;
    inset: 0;
    opacity: 0;
  }
  .lcr-card:hover .lcr-img-macro {
    opacity: 1;
    transform: scale(1.03);
  }

  /* 原案招牌:微距特写图上的四角方括号框线 (Bracket-Framed Close-up) */
  .lcr-bracket-frame {
    position: absolute;
    inset: 14px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  .lcr-card:hover .lcr-bracket-frame {
    opacity: 1;
  }
  .lcr-bracket-frame::before,
  .lcr-bracket-frame::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 10px;
    border-top: 1.5px solid var(--lcr-charcoal);
    border-bottom: 1.5px solid var(--lcr-charcoal);
  }
  .lcr-bracket-frame::before {
    left: 0;
    border-left: 1.5px solid var(--lcr-charcoal);
  }
  .lcr-bracket-frame::after {
    right: 0;
    border-right: 1.5px solid var(--lcr-charcoal);
  }

  /* 顶部货号与低库存角标 */
  .lcr-card-top-badges {
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--lcr-font-mono);
    font-size: 0.6875rem;
    z-index: 2;
  }
  .lcr-art-num {
    color: var(--lcr-muted);
    background: rgba(244, 241, 234, 0.85);
    padding: 3px 7px;
  }
  .lcr-stock-low {
    background: var(--lcr-charcoal);
    color: var(--lcr-white);
    padding: 3px 8px;
  }

  /* 商品名、价格与尺码快捷行 */
  .lcr-card-info {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 6px;
  }
  .lcr-prod-name {
    font-family: var(--lcr-font-sans);
    font-size: 1.0625rem;
    font-weight: 600;
    text-transform: uppercase;
    margin: 0;
    color: var(--lcr-charcoal);
    text-decoration: none;
  }
  .lcr-prod-price {
    font-family: var(--lcr-font-mono);
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--lcr-charcoal);
  }
  .lcr-size-row {
    font-family: var(--lcr-font-mono);
    font-size: 0.6875rem;
    color: var(--lcr-muted);
    display: flex;
    justify-content: space-between;
    padding-top: 8px;
    border-top: 1px solid var(--lcr-line);
  }

  /* 跨境物流与税费说明模块 */
  .lcr-duty-box {
    background-color: var(--lcr-white);
    border: 1px solid var(--lcr-charcoal);
    padding: 28px 32px;
  }
  .lcr-duty-grid {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 32px;
    align-items: start;
  }
  @media screen and (max-width: 900px) {
    .lcr-duty-grid {
      grid-template-columns: 1fr;
    }
  }
  .lcr-country-select {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--lcr-charcoal);
    background-color: var(--lcr-cream);
    font-family: var(--lcr-font-mono);
    font-size: 0.8125rem;
    color: var(--lcr-charcoal);
    margin: 10px 0 14px;
  }
  .lcr-duty-notice {
    background-color: var(--lcr-cream);
    border-left: 3px solid var(--lcr-charcoal);
    padding: 12px 16px;
    font-family: var(--lcr-font-mono);
    font-size: 0.75rem;
    line-height: 1.55;
    color: var(--lcr-charcoal);
    white-space: pre-line;
  }
  .lcr-carrier-wrap { min-width: 0; overflow-x: auto; }
  .lcr-carrier-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--lcr-font-mono);
    font-size: 0.75rem;
  }
  .lcr-carrier-table th,
  .lcr-carrier-table td {
    text-align: left;
    padding: 12px 10px;
    border-bottom: 1px solid var(--lcr-line);
  }
  .lcr-carrier-table th {
    color: var(--lcr-muted);
    font-weight: 400;
    text-transform: uppercase;
  }
</style>

<section class="lcr-sec-{{ section.id }}" data-section-id="{{ section.id }}">
  {%- comment -%} 1. 顶部等宽字体跑马灯 {%- endcomment -%}
  <div class="lcr-marquee" aria-hidden="true">
    <div class="lcr-marquee-track">
      <span>Most wanted [ LCR essentials ]</span>
      <span>[ Since 2018 · Tbilisi Studio ]</span>
      <span>Wear who you are [ Handcrafted Sterling Silver &amp; Natural Pearls ]</span>
      <span>Most wanted [ LCR essentials ]</span>
      <span>[ Since 2018 · Tbilisi Studio ]</span>
      <span>Wear who you are [ Handcrafted Sterling Silver &amp; Natural Pearls ]</span>
    </div>
  </div>

  <div class="lcr-container">
    <div class="lcr-header">
      <div>
        <div class="lcr-mono-tag">{{ section.settings.bracket_eyebrow }}</div>
        <h2 class="lcr-title">{{ section.settings.heading }}</h2>
      </div>
      <p class="lcr-subcopy">{{ section.settings.subcopy }}</p>
    </div>

    {%- comment -%} 2. 带 [数量] 计数器的分类导航栏 {%- endcomment -%}
    <div class="lcr-cat-bar" role="tablist" aria-label="按首饰品类筛选">
      <button type="button" class="lcr-cat-btn is-active" data-lcr-cat="all">
        <span class="lcr-count">[ALL]</span> CATALOG
      </button>
      {%- assign category_keys = 'rings,earrings,necklaces,bracelets,perfumes' | split: ',' -%}
      {%- for category_key in category_keys -%}
        {%- assign display_count = 0 -%}
        {%- for item in section.blocks -%}
          {%- if item.type == 'product_card' and item.settings.category_key == category_key -%}
            {%- assign display_count = display_count | plus: 1 -%}
          {%- endif -%}
        {%- endfor -%}
        <button type="button" class="lcr-cat-btn" data-lcr-cat="{{ category_key }}">
          <span class="lcr-count">[{{ display_count }}]</span> {{ category_key | upcase }}
        </button>
      {%- endfor -%}
      <!-- Original concept counts are replaced by the cards configured in this Section. -->
    </div>

    {%- comment -%} 3. 商品卡片(灰底棚拍 + 悬停方括号微距图)与跨列型录卡混排 {%- endcomment -%}
    <div class="lcr-grid">
      {%- for block in section.blocks -%}
        {%- case block.type -%}
          {%- when 'product_card' -%}
            {%- assign product = block.settings.product -%}
            {%- assign variant = product.selected_or_first_available_variant -%}
            {%- assign art_code = variant.sku | default: block.settings.art_number -%}
            {%- assign display_name = product.title | default: block.settings.item_name -%}
            <article
              class="lcr-card"
              data-cat="{{ block.settings.category_key }}"
              {{ block.shopify_attributes }}
            >
              <div>
                <a href="{{ product.url | default: '#' }}" class="lcr-img-stage" style="display:block;">
                  <div class="lcr-card-top-badges">
                    <span class="lcr-art-num">Art. {{ art_code | escape }}</span>
                    {%- if block.settings.low_stock -%}
                      <span class="lcr-stock-low">Low in stock</span>
                    {%- endif -%}
                  </div>

                  {%- if block.settings.studio_image != blank -%}
                    <img
                      class="lcr-img-primary"
                      src="{{ block.settings.studio_image | image_url: width: 800 }}"
                      alt="{{ display_name | escape }}"
                      width="800"
                      height="1000"
                      loading="lazy"
                    >
                  {%- elsif product != blank and product.featured_image != blank -%}
                    <img
                      class="lcr-img-primary"
                      src="{{ product.featured_image | image_url: width: 800 }}"
                      alt="{{ product.title | escape }}"
                      width="800"
                      height="1000"
                      loading="lazy"
                    >
                  {%- endif -%}

                  {%- if block.settings.macro_image != blank -%}
                    <img
                      class="lcr-img-macro"
                      src="{{ block.settings.macro_image | image_url: width: 800 }}"
                      alt="{{ display_name | escape }} close-up"
                      width="800"
                      height="1000"
                      loading="lazy"
                    >
                  {%- elsif product != blank and product.images[1] != blank -%}
                    <img
                      class="lcr-img-macro"
                      src="{{ product.images[1] | image_url: width: 800 }}"
                      alt="{{ product.title | escape }} close-up"
                      width="800"
                      height="1000"
                      loading="lazy"
                    >
                  {%- endif -%}

                  <div class="lcr-bracket-frame" aria-hidden="true"></div>
                </a>

                <div class="lcr-card-info">
                  <h3 class="lcr-prod-name">
                    <a href="{{ product.url | default: '#' }}" style="color:inherit;text-decoration:none;">
                      {{ display_name | escape }}
                    </a>
                  </h3>
                  <span class="lcr-prod-price">
                    {%- if product != blank -%}
                      {{ variant.price | money }}
                    {%- else -%}
                      {{ block.settings.price_text | escape }}
                    {%- endif -%}
                  </span>
                </div>
              </div>

              <div class="lcr-size-row">
                <span>{{ block.settings.material_note }}</span>
                <span>{{ block.settings.sizes_available }}</span>
              </div>
            </article>

          {%- when 'editorial_drop' -%}
            <article class="lcr-card lcr-card--editorial" data-cat="all" {{ block.shopify_attributes }}>
              <div>
                <div class="lcr-mono-tag" style="color:rgba(255,255,255,0.7);">{{ block.settings.drop_tag }}</div>
                <h3 style="font-size:2rem;margin:0 0 12px;text-transform:uppercase;">{{ block.settings.drop_title }}</h3>
                <p style="font-size:0.9375rem;line-height:1.55;color:rgba(255,255,255,0.8);max-width:440px;">
                  {{ block.settings.drop_desc }}
                </p>
              </div>
              <div style="font-family:var(--lcr-font-mono);font-size:0.75rem;padding-top:20px;border-top:1px solid rgba(255,255,255,0.2);">
                [ Handcrafted in Tbilisi Studio · Solid 925 Silver &amp; Natural Pearls ]
              </div>
            </article>
        {%- endcase -%}
      {%- endfor -%}
    </div>

    {%- comment -%} 4. 跨境国际物流对比与目的地物流与税费说明模块 {%- endcomment -%}
    <div class="lcr-duty-box">
      <div class="lcr-duty-grid">
        <div>
          <div class="lcr-mono-tag">[ INTERNATIONAL DELIVERY &amp; CUSTOMS TRANSPARENCY ]</div>
          <h3 style="font-size:1.375rem;margin:0 0 8px;text-transform:uppercase;">
            Shipping &amp; Customs Information
          </h3>
          <label for="LcrCountry-{{ section.id }}" style="font-size:0.8125rem;color:var(--lcr-muted);">
            选择收货国家/地区,查看商户提供的物流与税费说明:
          </label>
          <select id="LcrCountry-{{ section.id }}" class="lcr-country-select">
            <option value="eu" data-notice="{{ section.settings.customs_notice_eu | escape }}" selected>France / European Union (EUR €)</option>
            <option value="uk" data-notice="{{ section.settings.customs_notice_uk | escape }}">United Kingdom (GBP £)</option>
            <option value="us" data-notice="{{ section.settings.customs_notice_us | escape }}">United States (USD $)</option>
            <option value="au" data-notice="{{ section.settings.customs_notice_au | escape }}">Australia (AUD A$)</option>
            <option value="ca" data-notice="{{ section.settings.customs_notice_ca | escape }}">Canada (CAD C$)</option>
          </select>

          <div class="lcr-duty-notice" id="LcrDutyText-{{ section.id }}">
            {{ section.settings.customs_notice_eu | escape }}
          </div>
        </div>

        <div>
          <p class="lcr-mono-tag">Rates and transit times depend on the destination. Confirm the final shipping method and charges at checkout.</p>
          <div class="lcr-carrier-wrap">
          <table class="lcr-carrier-table">
            <thead>
              <tr>
                <th scope="col">Carrier Method</th>
                <th scope="col">Estimated Transit</th>
                <th scope="col">Tracking &amp; Handling</th>
                <th scope="col">Rate</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td><strong>DHL Express</strong></td>
                <td>{{ section.settings.shipping_time_dhl | escape }}</td>
                <td>Confirm tracking coverage with carrier</td>
                <td><strong>{{ section.settings.shipping_rate_dhl | escape }}</strong></td>
              </tr>
              <tr>
                <td><strong>FedEx Priority</strong></td>
                <td>{{ section.settings.shipping_time_fedex | escape }}</td>
                <td>Confirm clearance and signature service</td>
                <td><strong>{{ section.settings.shipping_rate_fedex | escape }}</strong></td>
              </tr>
              <tr>
                <td><strong>Georgian Post</strong></td>
                <td>{{ section.settings.shipping_time_post | escape }}</td>
                <td>Confirm registered delivery coverage</td>
                <td><strong>{{ section.settings.shipping_rate_post | escape }}</strong></td>
              </tr>
            </tbody>
          </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

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

    /* 1. 品类标签切换 */
    var catBtns = sec.querySelectorAll('[data-lcr-cat]');
    var cards = sec.querySelectorAll('.lcr-card');
    catBtns.forEach(function(btn) {
      btn.addEventListener('click', function() {
        var target = btn.getAttribute('data-lcr-cat');
        catBtns.forEach(function(b) { b.classList.toggle('is-active', b === btn); });
        cards.forEach(function(card) {
          var cCat = card.getAttribute('data-cat');
          if (target === 'all' || cCat === target || cCat === 'all') {
            card.removeAttribute('hidden');
          } else {
            card.setAttribute('hidden', 'hidden');
          }
        });
      });
    });

/* 2. Display merchant-maintained notices; this does not calculate duties. */
var countrySelect = sec.querySelector('#LcrCountry-{{ section.id }}');
var dutyText = sec.querySelector('#LcrDutyText-{{ section.id }}');
function updateCustomsNotice() {
  var option = countrySelect && countrySelect.options[countrySelect.selectedIndex];
  if (option && dutyText) dutyText.textContent = option.getAttribute('data-notice') || '';
}
if (countrySelect && dutyText) {
  countrySelect.addEventListener('change', updateCustomsNotice);
  updateCustomsNotice();
}
  })();
</script>

{% schema %}
{
  "name": "LCR 等宽目录与物流说明",
  "tag": "section",
  "settings": [
    {
      "type": "text",
      "id": "bracket_eyebrow",
      "label": "顶部方括号微标签",
      "default": "[ Browse by category ]"
    },
    {
      "type": "text",
      "id": "heading",
      "label": "主标题",
      "default": "THE CATALOG · LCR ESSENTIALS"
    },
    {
      "type": "textarea",
      "id": "subcopy",
      "label": "右侧品牌说明",
      "default": "Tbilisi-born jewelry in which handcrafted form and the human body find their balance. Hover over any piece to inspect the bracket-framed close-up."
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 20,
      "max": 120,
      "step": 4,
      "unit": "px",
      "label": "顶部内边距",
      "default": 48
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 20,
      "max": 120,
      "step": 4,
      "unit": "px",
      "label": "底部内边距",
      "default": 64
    },
    {
      "type": "header",
      "content": "物流时效与费用(商户填写)"
    },
    {
      "type": "text",
      "id": "shipping_time_dhl",
      "label": "DHL 时效",
      "default": "Confirm for your destination"
    },
    {
      "type": "text",
      "id": "shipping_rate_dhl",
      "label": "DHL 运费",
      "default": "See checkout"
    },
    {
      "type": "text",
      "id": "shipping_time_fedex",
      "label": "FedEx 时效",
      "default": "Confirm for your destination"
    },
    {
      "type": "text",
      "id": "shipping_rate_fedex",
      "label": "FedEx 运费",
      "default": "See checkout"
    },
    {
      "type": "text",
      "id": "shipping_time_post",
      "label": "邮政 时效",
      "default": "Confirm for your destination"
    },
    {
      "type": "text",
      "id": "shipping_rate_post",
      "label": "邮政 运费",
      "default": "See checkout"
    },
    {
      "type": "header",
      "content": "各市场税费说明(定期复核)"
    },
    {
      "type": "textarea",
      "id": "customs_notice_eu",
      "label": "欧盟税费说明",
      "default": "Import VAT, customs duties and handling charges may apply. Check the final charges and collection method at checkout."
    },
    {
      "type": "textarea",
      "id": "customs_notice_uk",
      "label": "英国税费说明",
      "default": "VAT and customs duty are separate charges. Check whether VAT is collected at checkout and whether import charges remain payable."
    },
    {
      "type": "textarea",
      "id": "customs_notice_us",
      "label": "美国税费说明",
      "default": "Import duties and customs requirements depend on the goods and origin. Do not assume an order under US$800 is duty-free. Check the final charges at checkout."
    },
    {
      "type": "textarea",
      "id": "customs_notice_au",
      "label": "澳大利亚税费说明",
      "default": "GST may be collected at checkout for low-value goods. Border charges and import declarations depend on the shipment. Check the final charges at checkout."
    },
    {
      "type": "textarea",
      "id": "customs_notice_ca",
      "label": "加拿大税费说明",
      "default": "Duties and taxes depend on shipment value, dispatch country and postal or courier delivery. Check the final charges and collection method at checkout."
    }
  ],
  "blocks": [
    {
      "type": "product_card",
      "name": "双图首饰商品卡",
      "settings": [
        {
          "type": "product",
          "id": "product",
          "label": "关联 Shopify 商品"
        },
        {
          "type": "select",
          "id": "category_key",
          "label": "所属品类标签",
          "options": [
            {
              "value": "rings",
              "label": "Rings(戒指)"
            },
            {
              "value": "earrings",
              "label": "Earrings(耳饰)"
            },
            {
              "value": "necklaces",
              "label": "Necklaces(项链)"
            },
            {
              "value": "bracelets",
              "label": "Bracelets(手链)"
            },
            {
              "value": "perfumes",
              "label": "Perfumes(香水)"
            }
          ],
          "default": "rings"
        },
        {
          "type": "image_picker",
          "id": "studio_image",
          "label": "图 1:中性灰底棚拍主图"
        },
        {
          "type": "image_picker",
          "id": "macro_image",
          "label": "图 2:悬停方括号微距特写图"
        },
        {
          "type": "text",
          "id": "art_number",
          "label": "Art. 档案货号",
          "default": "56728282930"
        },
        {
          "type": "checkbox",
          "id": "low_stock",
          "label": "手动显示低库存标签(需核对实际库存)",
          "default": false
        },
        {
          "type": "text",
          "id": "item_name",
          "label": "商品名称",
          "default": "SPIRAL RING"
        },
        {
          "type": "text",
          "id": "price_text",
          "label": "展示价格",
          "default": "$350"
        },
        {
          "type": "text",
          "id": "material_note",
          "label": "左下角材质简述",
          "default": "925 Sterling Silver"
        },
        {
          "type": "text",
          "id": "sizes_available",
          "label": "右下角尺码范围",
          "default": "Sizes: 16, 17, 18, 20"
        }
      ]
    },
    {
      "type": "editorial_drop",
      "name": "跨列季度型录卡 (Drop)",
      "settings": [
        {
          "type": "text",
          "id": "drop_tag",
          "label": "顶部方括号标签",
          "default": "[ Collection · Inner Sparkle ]"
        },
        {
          "type": "text",
          "id": "drop_title",
          "label": "型录标题",
          "default": "WEAR WHO YOU ARE — SS 2026"
        },
        {
          "type": "textarea",
          "id": "drop_desc",
          "label": "型录叙事正文",
          "default": "Designed to be worn on the outside while reflecting what you carry within. Handcrafted in private Tbilisi studios using solid sterling silver and natural pearls."
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "LCR 等宽目录与物流说明",
      "blocks": [
        {
          "type": "product_card",
          "settings": {
            "category_key": "rings",
            "art_number": "56728282930",
            "low_stock": false,
            "item_name": "SPIRAL RING",
            "price_text": "€135",
            "material_note": "Solid 925 Silver",
            "sizes_available": "Sizes: 16, 17, 18, 20"
          }
        },
        {
          "type": "product_card",
          "settings": {
            "category_key": "necklaces",
            "art_number": "56728283104",
            "low_stock": false,
            "item_name": "BABY PEARL CHOKER",
            "price_text": "$275",
            "material_note": "Natural Pearl & Silver",
            "sizes_available": "Length: 38–42 cm"
          }
        },
        {
          "type": "editorial_drop"
        },
        {
          "type": "product_card",
          "settings": {
            "category_key": "earrings",
            "art_number": "56728284012",
            "low_stock": false,
            "item_name": "YIN YANG EARRINGS",
            "price_text": "$675",
            "material_note": "925 Silver & Stone",
            "sizes_available": "One Size"
          }
        },
        {
          "type": "product_card",
          "settings": {
            "category_key": "necklaces",
            "art_number": "56728289901",
            "low_stock": false,
            "item_name": "PIERCED HEART PENDANT",
            "price_text": "$1,250",
            "material_note": "Hand-Sculpted Silver",
            "sizes_available": "Chain: 45 cm"
          }
        }
      ]
    }
  ]
}
{% endschema %}

三、珠宝配饰独立站的三种细分路线对比(CODESTAL vs. Astrid & Miyu vs. Le Chic Radical)

加上今天的 Le Chic Radical 改版案例,单在「珠宝与配饰」这一个大品类下,就能看到三种 Shopify 独立站设计路线。下面保留原稿的对比维度与示例价格;它们并非现价或客单价统计。

对比维度 1. CODESTAL(男士重工做旧银饰) 2. ASTRID & MIYU(女性轻奢串珠叠戴) 3. LE CHIC RADICAL(小众设计师跨境买手品牌)
原稿示例单品价格带 约 $70–$900(单件锻造银饰) £35–£220(叠戴组合示例) $150–$1,250+(高溢价小众设计师款 + 香水)
色板与材质衬托 100% 无彩色暗房风(#000000 / #1A1A1A / #383838),衬托氧化银锤纹 柔雾暖沙轻奢风(雾霾蓝 #8AA0AE + 暖沙米色 #E8DEC9),衬托 18k/9k 金 暖羊皮纸米色 + 深炭黑(#F4F1EA + #252525),衬托天然巴洛克珍珠与纯银
字体搭档 宽体工业字 Audiowide + 无衬线 高对比衬线斜体 + 几何无衬线 Urbanist(主标题)+ Martian Mono(等宽代码字体展示编号与价格)
商品视觉规范 高反差黑白微距图 + 3D 金属链条 佩戴叠戴生活照 + 情感故事引线标注 「中性灰底棚拍主图 + 带 [ ] 方括号框线的微距特写副图」双图制
解决的核心转化痛点 外露 4.10 g 精确克重与 PRODUCT CARE,打消对分量与氧化变色的顾虑 先分清 Clip / Click / Story 三种扣具兼容性,再引导组合叠戴;优惠以实际活动为准 三档国际物流(DHL/FedEx/邮政)透明比价 + 在付款前呈现目的地税费与收取方式说明

案例与配图:Yulia Shevy 的 Le Chic Radical 概念改版。本文的 Shopify Section 是按上述思路编写的演示实现。

Random Image 608
Random Image 608

WESWOO — Shopify Storefront Development

We help Chinese brands expand internationally with storefront development and Shopify Plus integration services, supporting their cross-border commerce operations.

  • Shopify storefront branding
  • International UI design
  • Multichannel social media marketing
Browse the WESWOO project portfolio