很多小众设计师品牌、独立首饰工作室或香氛买手店在做跨境出海 Shopify 独立站时,都会碰到一个两难问题:
- 如果页面做得太像时尚杂志:满屏胶片感模特图、字体随性,海外买家虽然觉得好看,但付款前心里没底——不知道实物到底长什么样、尺码准不准、从海外发货要多久、到了本国海关会不会被突然收一笔高额关税;
- 如果页面做得太像标准电商:白底抠图配大红促销字,又把品牌原本粗糙、先锋的手工基因(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 混排

和 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)」

很多视觉向品牌最容易犯的错,是商品列表页全放模特远景图,买家连戒指长什么样都看不清。设计师在这次改版中专门制定了双图互补规范:
- 第一张图(Grey-Background Studio Shot):统一使用柔和的中性浅灰底棚拍图(如 Loop Earrings
$150、Crystal Flower Ring$425、Pierced Heart Pendant$1,250),让每件首饰的真实比例和轮廓在网格里一目了然。 - 第二张图 / 特写图(Bracket-Framed Close-up Macro):落地到 Shopify 时,可以通过悬停或切换副图展示佩戴在锁骨/手指上的微距特写,并在画面四周加上标志性的细线方括号取景框
[ ],放大天然珍珠的纹理与纯银手工抛光细节。 - 非对称混排商品墙(Asymmetrical Editorial Grid):在
1440px(左右边距100px,列间距20px)的 12 列网格中,每排 3–4 张标准商品卡之间,会穿插一张占 2 列宽度的季度型录卡(如[ New drop ] SS 2026或[ Collection ] INNER SPARKLE),打破纯货架的枯燥感。
3. 带方括号计数器的分类导航与跑马灯(Marquee)

在首页与目录页([ 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 为演示文本。接入店铺时,应以关联商品的真实资料为准。

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 中如何开发实现这套风格?
在 Shopify Online Store 2.0 主题中还原 Le Chic Radical 的质感,核心是做好三件事:
- 引入免费的 Google Fonts
Urbanist与Martian Mono,确立#F4F1EA(暖米色)与#252525(深炭黑)的色彩骨架; - 在商品卡片上实现**「主图灰底棚拍 + 悬停切换方括号微距特写图(
product.images[1])」**; - 在商品页或目录页内置一个**「跨境物流与税费说明组件(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 & Natural Pearls ]</span>
<span>Most wanted [ LCR essentials ]</span>
<span>[ Since 2018 · Tbilisi Studio ]</span>
<span>Wear who you are [ Handcrafted Sterling Silver & 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 & 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 & CUSTOMS TRANSPARENCY ]</div>
<h3 style="font-size:1.375rem;margin:0 0 8px;text-transform:uppercase;">
Shipping & 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 & 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 是按上述思路编写的演示实现。
WESWOO - 跨境独立站开发专家
助力中国品牌出海,我们为您提供专业的独立站搭建和Shopify Plus集成技术服务。精准的跨境电商解决方案,助力品牌在全球市场成功落地,轻松跨越国界。
- shopify独立站品牌化
- 海外UI视觉设计
- SNS多渠道品牌营销