Dev.to WebDev 🛠 Dev 👁 0 📖 14 min read

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 Y

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 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 %}

Verify before connecting to a live theme

  • Link a real product and check its name, SKU, currency and variant price.
  • Change category and confirm only the relevant configured cards remain visible.
  • Inspect the second product image on a touch device.
  • Change country and check the merchant-maintained notice.
  • Confirm delivery and tax collection against the actual checkout.

References: Shopify Markets, US CBP, EU low-value parcels and the design case.

📰 Read the original article on Dev.to WebDev

Originally published by Dev.to WebDev. Aggregated on AIWithGhost for educational purposes — full credit and traffic to the original publisher.