案例作品集 浏览精选项目

WESWOO 提供 Shopify Plus 项目开发费抵扣,至多 US$4,800

文章

How a Shopify grocery store can turn its product list into a shopping aisle

主题:,

A grocery shopper buying tomatoes, eggs and milk usually moves between categories and pack sizes in a single session. Freshmart, a design project by Orbix Studio, puts the unit price and the quantity control on the product card so the next choice stays in view.

The public case describes shopping experience improvements. The figures on its results panel do not establish a checkout-time benchmark for a live Shopify store.

Put the unit price next to the pack price

How a Shopify grocery store can turn its product list into a shopping aisle
手机商品列表的番茄卡仍是加购按钮,旁边鸡蛋卡已显示数量步进器 · Orbix Studio / Behance

Show the selected pack size, its selling price and a price per common measure. For example, a 500 g bag at 29 yuan costs 5.80 yuan per 100 g, while a 750 g bag at 36 yuan costs 4.80 yuan per 100 g. The pack price shows what the shopper pays. The unit price helps compare the two sizes.

Let shoppers move between aisles

How a Shopify grocery store can turn its product list into a shopping aisle
六张货架分类卡分别标出蔬菜、水果、乳蛋、烘焙、肉鱼和饮品的商品数 · Orbix Studio / Behance

Freshmart names six categories and puts an item count on each. Keep the shopper’s selected quantities as they move from dairy to produce. If the buyer changes pack size, update the unit price, availability and cart variant together.

Connect the selection to the actual cart

How a Shopify grocery store can turn its product list into a shopping aisle
原案订单摘要局部,商品、节省金额、运费和合计分行排列 · Orbix Studio / Behance

Configure the unit price at product or variant level in Shopify. Render the current variant with the Liquid unit price filter. When the shopper confirms the selection, send the variant IDs and quantities to the locale-aware Ajax Cart endpoint.

{%- assign variant = product.selected_or_first_available_variant -%}
{%- if variant.unit_price_measurement -%}
  <span class="fm-unit-price">
    {{ variant.unit_price | unit_price_with_measurement: variant.unit_price_measurement }}
  </span>
{%- endif -%}
async function addSelection(items) {
  const root = window.Shopify.routes.root;
  let message = '';

  try {
    const response = await fetch(root + 'cart/add.js', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ items })
    });
    if (!response.ok) {
      const error = await response.json().catch(() => null);
      message = error?.description || '有商品未按所选数量加入。';
    }
  } catch {
    message = '未收到加购确认,请查看当前购物车。';
  }

  const currentCart = await fetch(root + 'cart.js');
  if (!currentCart.ok) throw new Error('暂时无法读取购物车');
  return { cart: await currentCart.json(), message };
}

A stock-limit response can add the available quantity and still return an error. Read the cart back, show what actually changed and resolve any shortfall before the shopper checks out. Use configured discounts and delivery rules for the final amount.

Original Shopify Section demo

The author’s full Section below demonstrates the layout and interaction. It uses example prices, availability labels and a shipping threshold. The cart handling above shows where to connect real variant data and recheck the result.

Expand the full Section · 803 lines
{%- comment -%}
  文件:sections/freshmart-aisle-quickshop.liquid
  设计参考:Freshmart Grocery Shopping | Orbix Studio | Web app
  功能:高频快消/食品生鲜快速凑单货架,含带计数的分类胶囊、单位计价外露、原地变形步进器(- 1 +)与实时凑单省钱条
{%- 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=DM+Sans:wght@400;500;600;700&family=Newsreader:ital,opsz,wght@0,6..72,500;0,6..72,600;1,6..72,500&display=swap" rel="stylesheet">

<style>
  .fm-sec-{{ section.id }} {
    --fm-green: #16664B;
    --fm-forest: #1E2B23;
    --fm-orange: #FF591F;
    --fm-lime: #B4EE76;
    --fm-bg-lynx: #F7F7F7;
    --fm-bg-cream: #F3F2EC;
    --fm-ink: #000000;
    --fm-bauhaus: #404040;
    --fm-border: #E5E5E0;
    --fm-font-serif: 'Newsreader', Georgia, serif;
    --fm-font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;

    background-color: #FFFFFF;
    color: var(--fm-ink);
    font-family: var(--fm-font-sans);
    padding: {{ section.settings.padding_top }}px 0 {{ section.settings.padding_bottom }}px;
  }

  /* 原案 1400px 最大网格宽度 */
  .fm-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
  }

  /* 顶部横幅与标题区 */
  .fm-top-banner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
    margin-bottom: 32px;
  }
  .fm-promo-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: var(--fm-lime);
    color: var(--fm-forest);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 999px;
    margin-bottom: 12px;
  }
  .fm-promo-tag span {
    background-color: var(--fm-orange);
    color: #FFFFFF;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.6875rem;
  }
  .fm-heading {
    font-family: var(--fm-font-serif);
    font-size: clamp(2rem, 3.8vw, 3.25rem);
    font-weight: 500;
    line-height: 1.1;
    margin: 0;
    color: var(--fm-ink);
  }
  .fm-heading em {
    font-style: italic;
    color: var(--fm-green);
  }
  .fm-trust-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  .fm-trust-pill {
    background-color: var(--fm-bg-cream);
    color: var(--fm-bauhaus);
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 999px;
  }

  /* 带商品数的货架分类胶囊栏 */
  .fm-aisle-bar {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 12px;
    margin-bottom: 32px;
  }
  .fm-aisle-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: var(--fm-bg-lynx);
    color: var(--fm-ink);
    border: 1.5px solid transparent;
    padding: 12px 18px;
    border-radius: 16px;
    font-family: var(--fm-font-sans);
    font-size: 0.9375rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s ease;
  }
  .fm-aisle-btn:hover {
    border-color: var(--fm-green);
  }
  .fm-aisle-btn.is-active {
    background-color: var(--fm-green);
    color: #FFFFFF;
  }
  .fm-aisle-count {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    background-color: #FFFFFF;
    color: var(--fm-green);
  }
  .fm-aisle-btn.is-active .fm-aisle-count {
    background-color: var(--fm-lime);
    color: var(--fm-forest);
  }

  /* 12 列商品货架网格(桌面 4 列,平板 2 列,手机 2 列紧凑模式) */
  .fm-product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }
  @media screen and (max-width: 1024px) {
    .fm-product-grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }
  @media screen and (max-width: 768px) {
    .fm-product-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
    }
  }

  /* 单张生鲜/快消商品卡 */
  .fm-card {
    background-color: var(--fm-bg-lynx);
    border: 1px solid var(--fm-border);
    border-radius: 20px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  .fm-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(22, 102, 75, 0.08);
  }
  .fm-card[hidden] {
    display: none !important;
  }

  /* 卡片顶部:折扣橙色标签 + 现货库存余量 */
  .fm-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
  }
  .fm-sale-badge {
    background-color: var(--fm-orange);
    color: #FFFFFF;
    font-size: 0.6875rem;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 999px;
  }
  .fm-stock-badge {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--fm-green);
    background: rgba(22, 102, 75, 0.1);
    padding: 3px 9px;
    border-radius: 999px;
    margin-left: auto;
  }

  .fm-img-box {
    aspect-ratio: 4 / 3;
    background-color: #FFFFFF;
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .fm-img-box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 10px;
    box-sizing: border-box;
  }

  .fm-vendor {
    font-size: 0.75rem;
    color: var(--fm-bauhaus);
    margin: 0 0 4px;
  }
  .fm-item-title {
    font-size: 1.0625rem;
    font-weight: 700;
    margin: 0 0 4px;
    color: var(--fm-ink);
  }
  .fm-unit-spec {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--fm-green);
    margin: 0 0 14px;
  }

  /* 底部价格与原地变形加购步进器 */
  .fm-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--fm-border);
  }
  .fm-price-group {
    display: flex;
    flex-direction: column;
  }
  .fm-price-current {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--fm-ink);
  }
  .fm-price-compare {
    font-size: 0.75rem;
    color: #888888;
    text-decoration: line-through;
  }

  /* 状态 A:未加购时的描边胶囊按钮 (+ Add to Cart) */
  .fm-add-btn {
    background-color: #FFFFFF;
    color: var(--fm-green);
    border: 1.5px solid var(--fm-green);
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
  }
  .fm-add-btn:hover {
    background-color: var(--fm-green);
    color: #FFFFFF;
  }

  /* 状态 B:加购后原地变形为深绿椭圆步进器 (- 1 +) */
  .fm-stepper {
    display: none;
    align-items: center;
    background-color: var(--fm-green);
    color: #FFFFFF;
    border-radius: 999px;
    padding: 4px 6px;
    gap: 10px;
  }
  .fm-card.in-basket .fm-add-btn {
    display: none;
  }
  .fm-card.in-basket .fm-stepper {
    display: inline-flex;
  }
  .fm-step-btn {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.18);
    color: #FFFFFF;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .fm-step-btn:hover {
    background: var(--fm-lime);
    color: var(--fm-forest);
  }
  .fm-step-qty {
    font-size: 0.875rem;
    font-weight: 700;
    min-width: 18px;
    text-align: center;
  }

  /* 底部实时凑单与省钱结算栏(Basket full. Worry zero.) */
  .fm-basket-bar {
    margin-top: 32px;
    background-color: var(--fm-forest);
    color: #FFFFFF;
    border-radius: 20px;
    padding: 20px 28px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
  }
  .fm-saving-pill {
    display: inline-block;
    background-color: var(--fm-orange);
    color: #FFFFFF;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
    margin-left: 8px;
  }
  .fm-checkout-btn {
    background-color: var(--fm-lime);
    color: var(--fm-forest);
    border: none;
    padding: 14px 28px;
    border-radius: 999px;
    font-size: 0.9375rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s ease;
  }
  .fm-checkout-btn:hover {
    transform: translateY(-1px);
  }
</style>

<section class="fm-sec-{{ section.id }}" data-section-id="{{ section.id }}">
  <div class="fm-container">
    <div class="fm-top-banner">
      <div>
        <div class="fm-promo-tag">
          <span>-10% FRESH DEALS</span>
          {{ section.settings.promo_text }}
        </div>
        <h2 class="fm-heading">
          {{ section.settings.heading_main }} <em>{{ section.settings.heading_italic }}</em>
        </h2>
      </div>
      <div class="fm-trust-pills">
        <span class="fm-trust-pill">⚡ Express Delivery &lt; 60 Mins</span>
        <span class="fm-trust-pill">🌱 01 Harvest → 04 Doorstep</span>
        <span class="fm-trust-pill">🚚 Free Delivery Over ${{ section.settings.free_shipping_threshold }}</span>
      </div>
    </div>

    {%- comment -%} 带商品计数的六大货架胶囊导航 {%- endcomment -%}
    <div class="fm-aisle-bar" role="tablist" aria-label="生鲜货架分类">
      <button type="button" class="fm-aisle-btn is-active" data-aisle="all">
        <span>All Fresh Picks</span>
        <span class="fm-aisle-count">{{ section.blocks.size }}</span>
      </button>
      <button type="button" class="fm-aisle-btn" data-aisle="vegetables">
        <span>🥬 Fresh Vegetables</span>
      </button>
      <button type="button" class="fm-aisle-btn" data-aisle="fruits">
        <span>🍓 Seasonal Fruits</span>
      </button>
      <button type="button" class="fm-aisle-btn" data-aisle="dairy">
        <span>🥛 Dairy &amp; Eggs</span>
      </button>
      <button type="button" class="fm-aisle-btn" data-aisle="bakery">
        <span>🥐 Bakery &amp; Pantry</span>
      </button>
    </div>

    <div class="fm-product-grid">
      {%- for block in section.blocks -%}
        {%- assign product = block.settings.product -%}
        {%- assign variant = product.selected_or_first_available_variant -%}
        <article
          class="fm-card {% if block.settings.default_qty > 0 %}in-basket{% endif %}"
          data-aisle-cat="{{ block.settings.aisle_category }}"
          data-variant-id="{{ variant.id }}"
          data-price="{{ block.settings.price_sale }}"
          data-compare="{{ block.settings.price_compare }}"
          data-qty="{{ block.settings.default_qty }}"
          {{ block.shopify_attributes }}
        >
          <div>
            <div class="fm-card-top">
              {%- if block.settings.sale_badge != blank -%}
                <span class="fm-sale-badge">{{ block.settings.sale_badge }}</span>
              {%- endif -%}
              <span class="fm-stock-badge">{{ block.settings.stock_label }}</span>
            </div>

            <div class="fm-img-box">
              {%- if block.settings.custom_image != blank -%}
                <img
                  src="{{ block.settings.custom_image | image_url: width: 600 }}"
                  alt="{{ block.settings.item_title | escape }}"
                  width="600"
                  height="450"
                  loading="lazy"
                >
              {%- elsif product != blank and product.featured_image != blank -%}
                <img
                  src="{{ product.featured_image | image_url: width: 600 }}"
                  alt="{{ product.title | escape }}"
                  width="600"
                  height="450"
                  loading="lazy"
                >
              {%- else -%}
                <span style="font-size:2.5rem;">{{ block.settings.emoji_placeholder }}</span>
              {%- endif -%}
            </div>

            <p class="fm-vendor">{{ block.settings.vendor_name }}</p>
            <h3 class="fm-item-title">{{ block.settings.item_title | default: product.title }}</h3>
            <p class="fm-unit-spec">{{ block.settings.unit_price_label }}</p>
          </div>

          <div class="fm-card-footer">
            <div class="fm-price-group">
              <span class="fm-price-current">${{ block.settings.price_sale }}</span>
              {%- if block.settings.price_compare != blank -%}
                <span class="fm-price-compare">${{ block.settings.price_compare }}</span>
              {%- endif -%}
            </div>

            <button type="button" class="fm-add-btn js-fm-add">+ Add to Cart</button>

            <div class="fm-stepper">
              <button type="button" class="fm-step-btn js-fm-minus" aria-label="减少数量">−</button>
              <span class="fm-step-qty js-fm-qty">{{ block.settings.default_qty }}</span>
              <button type="button" class="fm-step-btn js-fm-plus" aria-label="增加数量">+</button>
            </div>
          </div>
        </article>
      {%- endfor -%}
    </div>

    {%- comment -%} 底部实时凑单与优惠汇总栏 {%- endcomment -%}
    <div class="fm-basket-bar">
      <div>
        <div style="font-size:0.75rem;text-transform:uppercase;letter-spacing:0.08em;color:var(--fm-lime);margin-bottom:4px;">
          BASKET FULL · WORRY ZERO
        </div>
        <div style="font-size:1.125rem;font-weight:700;">
          <span id="FmBasketTotal-{{ section.id }}">已选 0 件 · 合计 $0.00</span>
          <span class="fm-saving-pill" id="FmSavingBadge-{{ section.id }}">Your saving: -$0.00</span>
        </div>
        <div style="font-size:0.8125rem;opacity:0.82;margin-top:4px;" id="FmFreeShipNote-{{ section.id }}"></div>
      </div>

      <button
        type="button"
        class="fm-checkout-btn"
        id="FmSyncCartBtn-{{ section.id }}"
        data-threshold="{{ section.settings.free_shipping_threshold }}"
      >
        Proceed to Fast Checkout →
      </button>
    </div>
  </div>
</section>

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

    var aisleBtns = sec.querySelectorAll('[data-aisle]');
    var cards = sec.querySelectorAll('.fm-card');
    var totalEl = sec.querySelector('#FmBasketTotal-{{ section.id }}');
    var savingEl = sec.querySelector('#FmSavingBadge-{{ section.id }}');
    var shipNoteEl = sec.querySelector('#FmFreeShipNote-{{ section.id }}');
    var syncBtn = sec.querySelector('#FmSyncCartBtn-{{ section.id }}');
    var freeThreshold = parseFloat(syncBtn.getAttribute('data-threshold') || '50');

    /* 货架分类筛选 */
    aisleBtns.forEach(function(btn) {
      btn.addEventListener('click', function() {
        var cat = btn.getAttribute('data-aisle');
        aisleBtns.forEach(function(b) { b.classList.toggle('is-active', b === btn); });
        cards.forEach(function(c) {
          if (cat === 'all' || c.getAttribute('data-aisle-cat') === cat) {
            c.removeAttribute('hidden');
          } else {
            c.setAttribute('hidden', 'hidden');
          }
        });
      });
    });

    /* 重新计算购物篮总价、已省金额(Your saving)与免邮差额 */
    function recalcBasket() {
      var itemCount = 0;
      var subtotal = 0;
      var saved = 0;

      cards.forEach(function(card) {
        var qty = parseInt(card.getAttribute('data-qty') || '0', 10);
        var price = parseFloat(card.getAttribute('data-price') || '0');
        var compare = parseFloat(card.getAttribute('data-compare') || '0');
        if (qty > 0) {
          itemCount += qty;
          subtotal += price * qty;
          if (compare > price) {
            saved += (compare - price) * qty;
          }
        }
      });

      totalEl.textContent = '已选 ' + itemCount + ' 件商品 · Subtotal: $' + subtotal.toFixed(2);
      savingEl.textContent = 'Your saving: -$' + saved.toFixed(2);

      if (subtotal >= freeThreshold) {
        shipNoteEl.textContent = '🎉 已满 $' + freeThreshold.toFixed(0) + ',本单享免费极速配送(Free Express Delivery Unlocked)!';
      } else {
        var diff = (freeThreshold - subtotal).toFixed(2);
        shipNoteEl.textContent = '再凑 $' + diff + ' 即可解锁满 $' + freeThreshold.toFixed(0) + ' 免运费';
      }
    }

    /* 绑定每张卡片的原地变形步进器 (+ Add to Cart <-> - 1 +) */
    cards.forEach(function(card) {
      var addBtn = card.querySelector('.js-fm-add');
      var minusBtn = card.querySelector('.js-fm-minus');
      var plusBtn = card.querySelector('.js-fm-plus');
      var qtySpan = card.querySelector('.js-fm-qty');

      function setQty(newQty) {
        var q = Math.max(0, newQty);
        card.setAttribute('data-qty', String(q));
        qtySpan.textContent = String(q);
        card.classList.toggle('in-basket', q > 0);
        recalcBasket();
      }

      addBtn.addEventListener('click', function() { setQty(1); });
      plusBtn.addEventListener('click', function() {
        var cur = parseInt(card.getAttribute('data-qty') || '0', 10);
        setQty(cur + 1);
      });
      minusBtn.addEventListener('click', function() {
        var cur = parseInt(card.getAttribute('data-qty') || '0', 10);
        setQty(cur - 1);
      });
    });

    recalcBasket();

    /* 批量写入 Shopify 原生购物车 */
    syncBtn.addEventListener('click', function() {
      var items = [];
      cards.forEach(function(card) {
        var qty = parseInt(card.getAttribute('data-qty') || '0', 10);
        var variantId = card.getAttribute('data-variant-id');
        if (qty > 0 && variantId) {
          items.push({ id: Number(variantId), quantity: qty });
        }
      });
      if (items.length === 0) {
        window.location.href = '/cart';
        return;
      }
      fetch(window.Shopify.routes.root + 'cart/add.js', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ items: items })
      }).then(function() {
        window.location.href = '/checkout';
      });
    });
  })();
</script>

{% schema %}
{
  "name": "Freshmart 快消步进凑单货架",
  "tag": "section",
  "settings": [
    {
      "type": "text",
      "id": "promo_text",
      "label": "顶部促销条文字",
      "default": "Get our best picks every Thursday · New Here? Enjoy 10% OFF Your First Order"
    },
    {
      "type": "text",
      "id": "heading_main",
      "label": "主标题前段",
      "default": "Everything Fresh,"
    },
    {
      "type": "text",
      "id": "heading_italic",
      "label": "主标题斜体部分",
      "default": "All in One Place."
    },
    {
      "type": "number",
      "id": "free_shipping_threshold",
      "label": "免运费门槛金额 ($)",
      "default": 50
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 24,
      "max": 120,
      "step": 4,
      "unit": "px",
      "label": "顶部内边距",
      "default": 56
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 24,
      "max": 120,
      "step": 4,
      "unit": "px",
      "label": "底部内边距",
      "default": 56
    }
  ],
  "blocks": [
    {
      "type": "grocery_item",
      "name": "快消/生鲜单品卡",
      "settings": [
        {
          "type": "product",
          "id": "product",
          "label": "关联 Shopify 商品"
        },
        {
          "type": "select",
          "id": "aisle_category",
          "label": "所属货架分类",
          "options": [
            { "value": "vegetables", "label": "Fresh Vegetables(鲜蔬)" },
            { "value": "fruits", "label": "Seasonal Fruits(水果)" },
            { "value": "dairy", "label": "Dairy & Eggs(乳品蛋类)" },
            { "value": "bakery", "label": "Bakery & Pantry(烘焙粮油)" }
          ],
          "default": "vegetables"
        },
        {
          "type": "image_picker",
          "id": "custom_image",
          "label": "自定义商品去底图"
        },
        {
          "type": "text",
          "id": "emoji_placeholder",
          "label": "未传图时的占位图标",
          "default": "🍅"
        },
        {
          "type": "text",
          "id": "sale_badge",
          "label": "左上角橙色促销标签",
          "default": "-20% Deal"
        },
        {
          "type": "text",
          "id": "stock_label",
          "label": "右上角库存余量标签",
          "default": "In stock (100 Kg)"
        },
        {
          "type": "text",
          "id": "vendor_name",
          "label": "货源/农场标签",
          "default": "Local Farmers"
        },
        {
          "type": "text",
          "id": "item_title",
          "label": "商品名称",
          "default": "Organic Red Tomatoes"
        },
        {
          "type": "text",
          "id": "unit_price_label",
          "label": "单位换算单价说明",
          "default": "$1.33 / per kg · 1kg Pack"
        },
        {
          "type": "text",
          "id": "price_sale",
          "label": "当前售价 ($)",
          "default": "16.00"
        },
        {
          "type": "text",
          "id": "price_compare",
          "label": "原价 ($,用于计算 Your saving)",
          "default": "20.00"
        },
        {
          "type": "number",
          "id": "default_qty",
          "label": "默认演示加购数量",
          "default": 1
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Freshmart 快消步进凑单货架",
      "blocks": [
        {
          "type": "grocery_item",
          "settings": {
            "aisle_category": "vegetables",
            "emoji_placeholder": "🍅",
            "sale_badge": "-20% Deal",
            "stock_label": "In stock (100 Kg)",
            "vendor_name": "Local Farmers",
            "item_title": "Organic Red Tomatoes (Vine Pack)",
            "unit_price_label": "$1.33 / per kg · 01 kg",
            "price_sale": "16.00",
            "price_compare": "20.00",
            "default_qty": 1
          }
        },
        {
          "type": "grocery_item",
          "settings": {
            "aisle_category": "dairy",
            "emoji_placeholder": "🥚",
            "sale_badge": "-20% Deal",
            "stock_label": "In stock (80 Boxes)",
            "vendor_name": "Local Farmers",
            "item_title": "Pasture-Raised Farm Eggs",
            "unit_price_label": "$4.80 / per 12 pcs · Family Pack",
            "price_sale": "16.00",
            "price_compare": "20.00",
            "default_qty": 1
          }
        },
        {
          "type": "grocery_item",
          "settings": {
            "aisle_category": "fruits",
            "emoji_placeholder": "🍇",
            "sale_badge": "Peak Quality",
            "stock_label": "In stock (65 Kg)",
            "vendor_name": "Local Farmers",
            "item_title": "Seedless Green Grapes",
            "unit_price_label": "$1.60 / per 100g · 1kg Box",
            "price_sale": "16.00",
            "price_compare": "20.00",
            "default_qty": 1
          }
        },
        {
          "type": "grocery_item",
          "settings": {
            "aisle_category": "dairy",
            "emoji_placeholder": "🥛",
            "sale_badge": "Daily Essential",
            "stock_label": "In stock (42 Bottles)",
            "vendor_name": "Local Farmers",
            "item_title": "Glass-Bottled Whole Milk & Greek Yoghurt",
            "unit_price_label": "$3.20 / per 1L · Chilled Tote",
            "price_sale": "12.00",
            "price_compare": "15.00",
            "default_qty": 0
          }
        }
      ]
    }
  ]
}
{% endschema %}

Sources: Freshmart on Behance, Shopify unit pricing, Liquid unit price filter and Ajax Cart API.

Random Image 608
Random Image 608

WESWOO - 跨境独立站开发专家

助力中国品牌出海,我们为您提供专业的独立站搭建和Shopify Plus集成技术服务。精准的跨境电商解决方案,助力品牌在全球市场成功落地,轻松跨越国界。

  • shopify独立站品牌化
  • 海外UI视觉设计
  • SNS多渠道品牌营销
浏览 WESWOO 案例作品集