Shopify editorial product cards with configurable shipping and customs notices

A jewelry catalog can alternate product cards and campaign images while keeping prices and shipping information legible. This example applies that pattern to a Shopify Online Store 2.0 Section.

The visual reference is Yulia Shevy’s independent Le Chic Radical concept. It is a design study, not evidence of a deployed Shopify implementation.

Read the linked product before using demonstration values

{%- assign product = block.settings.product -%} {%- assign variant = product.selected_or_first_available_variant -%} <span class="lcr-prod-price"> {%- if product != blank -%} {{ variant.price | money }} {%- else -%} {{ block.settings.price_text | escape }} {%- endif -%} </span>

Use the linked product title and the selected or first available variant SKU. The Section counts only its configured product cards. Its low-stock switch is manually maintained and defaults to off.

Keep destination notices editable

Store each market’s notice in a textarea setting. Escape it into the relevant option’s data attribute, and assign it to textContent when the shopper changes country. This keeps the notice separate from executable code.

Do not put a permanent US$800 duty-free promise into a JavaScript map. Do not treat a customs-duty threshold as an exemption from VAT. The example also leaves carrier fees and transit times for the merchant to configure.

Use Shopify Markets for the actual collection setup. This front-end component displays information; it does not calculate the checkout total.

Complete Section

{%- 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 Source：https://dev.to/weswoodtc/shopify-editorial-product-cards-with-configurable-shipping-and-customs-notices-3pocMy favorites

PreviousThe Designer Who Redraws What You Already LoveNextSizing a Sauna Heater When a Wall Is Glass

`Related posts`


AI can write code, but the magic of a first project is unmatched! 🗽
Namaste dev community! 👋 Today, I’m sharing a very special project of mine . It's a web page featuring all the states of
0dev.to
I Built a State Management Library That Works Like React's useState
I Built a State Management Library That Works Like React's useState — Meet CreateStore If you've worked with React, you'
0dev.to
Loading states for a heavy 3D model - do not show an empty canvas
Even a well-compressed product model is a few MB, and for a second or two on a normal connection the user is looking at 
0dev.to UX
Haiku com kit de UX: regras abertas e um código mínimo fazem um modelo pequeno acertar como um maior?
Resumo. Testamos se o conjunto formado por um modelo pequeno (Haiku 5.5), um data lake de regras de UX com fonte aberta 
0dev.to UX
Haiku with a UX kit: can open rules and minimal code make a small model as accurate as a larger one?
Summary. We tested whether the combination of a small model (Haiku 5.5), a UX rules data lake with open sources and a mi
0dev.to UX
O quanto o data lake de UX ajuda um modelo pequeno em telas grandes? Medimos a completude, regra por regra
Resumo. Em 2.640 chamadas (Haiku 5.5 e Sonnet 5.5, 48 telas por tarefa, seis famílias de tela), o acerto do Haiku ao rev
0dev.to UX