![\"\u624b\u673a\u5546\u54c1\u5217\u8868\u7684\u756a\u8304\u5361\u4ecd\u662f\u52a0\u8d2d\u6309\u94ae\uff0c\u65c1\u8fb9\u9e21\u86cb\u5361\u5df2\u663e\u793a\u6570\u91cf\u6b65\u8fdb\u5668\"](\"https:\/\/www.weswoo.com\/wp-content\/uploads\/2026\/11\/fm-03-stepper.jpg\")
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.<\/p>\n
Let shoppers move between aisles<\/h2>\n![\"\u516d\u5f20\u8d27\u67b6\u5206\u7c7b\u5361\u5206\u522b\u6807\u51fa\u852c\u83dc\u3001\u6c34\u679c\u3001\u4e73\u86cb\u3001\u70d8\u7119\u3001\u8089\u9c7c\u548c\u996e\u54c1\u7684\u5546\u54c1\u6570\"](\"https:\/\/www.weswoo.com\/wp-content\/uploads\/2026\/11\/fm-04-aisles.jpg\")
\u516d\u5f20\u8d27\u67b6\u5206\u7c7b\u5361\u5206\u522b\u6807\u51fa\u852c\u83dc\u3001\u6c34\u679c\u3001\u4e73\u86cb\u3001\u70d8\u7119\u3001\u8089\u9c7c\u548c\u996e\u54c1\u7684\u5546\u54c1\u6570 \u00b7 Orbix Studio \/ Behance<\/a><\/figcaption><\/figure>\nFreshmart 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.<\/p>\n
Connect the selection to the actual cart<\/h2>\n![\"\u539f\u6848\u8ba2\u5355\u6458\u8981\u5c40\u90e8\uff0c\u5546\u54c1\u3001\u8282\u7701\u91d1\u989d\u3001\u8fd0\u8d39\u548c\u5408\u8ba1\u5206\u884c\u6392\u5217\"](\"https:\/\/www.weswoo.com\/wp-content\/uploads\/2026\/11\/fm-06-summary.jpg\")
\u539f\u6848\u8ba2\u5355\u6458\u8981\u5c40\u90e8\uff0c\u5546\u54c1\u3001\u8282\u7701\u91d1\u989d\u3001\u8fd0\u8d39\u548c\u5408\u8ba1\u5206\u884c\u6392\u5217 \u00b7 Orbix Studio \/ Behance<\/a><\/figcaption><\/figure>\nConfigure 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.<\/p>\n
{%- assign variant = product.selected_or_first_available_variant -%}\n{%- if variant.unit_price_measurement -%}\n <span class="fm-unit-price">\n {{ variant.unit_price | unit_price_with_measurement: variant.unit_price_measurement }}\n <\/span>\n{%- endif -%}\n<\/code><\/pre>\nasync function addSelection(items) {\n const root = window.Shopify.routes.root;\n let message = '';\n\n try {\n const response = await fetch(root + 'cart\/add.js', {\n method: 'POST',\n headers: { 'Content-Type': 'application\/json' },\n body: JSON.stringify({ items })\n });\n if (!response.ok) {\n const error = await response.json().catch(() => null);\n message = error?.description || '\u6709\u5546\u54c1\u672a\u6309\u6240\u9009\u6570\u91cf\u52a0\u5165\u3002';\n }\n } catch {\n message = '\u672a\u6536\u5230\u52a0\u8d2d\u786e\u8ba4\uff0c\u8bf7\u67e5\u770b\u5f53\u524d\u8d2d\u7269\u8f66\u3002';\n }\n\n const currentCart = await fetch(root + 'cart.js');\n if (!currentCart.ok) throw new Error('\u6682\u65f6\u65e0\u6cd5\u8bfb\u53d6\u8d2d\u7269\u8f66');\n return { cart: await currentCart.json(), message };\n}\n<\/code><\/pre>\nA 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.<\/p>\n
Original Shopify Section demo<\/h2>\n
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.<\/p>\n\nExpand the full Section \u00b7 803 lines<\/summary>\n{%- comment -%}\n \u6587\u4ef6\uff1asections\/freshmart-aisle-quickshop.liquid\n \u8bbe\u8ba1\u53c2\u8003\uff1aFreshmart Grocery Shopping | Orbix Studio | Web app\n \u529f\u80fd\uff1a\u9ad8\u9891\u5feb\u6d88\/\u98df\u54c1\u751f\u9c9c\u5feb\u901f\u51d1\u5355\u8d27\u67b6\uff0c\u542b\u5e26\u8ba1\u6570\u7684\u5206\u7c7b\u80f6\u56ca\u3001\u5355\u4f4d\u8ba1\u4ef7\u5916\u9732\u3001\u539f\u5730\u53d8\u5f62\u6b65\u8fdb\u5668(- 1 +)\u4e0e\u5b9e\u65f6\u51d1\u5355\u7701\u94b1\u6761\n{%- endcomment -%}\n\n<link rel="preconnect" href="https:\/\/fonts.googleapis.com">\n<link rel="preconnect" href="https:\/\/fonts.gstatic.com" crossorigin>\n<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">\n\n<style>\n .fm-sec-{{ section.id }} {\n --fm-green: #16664B;\n --fm-forest: #1E2B23;\n --fm-orange: #FF591F;\n --fm-lime: #B4EE76;\n --fm-bg-lynx: #F7F7F7;\n --fm-bg-cream: #F3F2EC;\n --fm-ink: #000000;\n --fm-bauhaus: #404040;\n --fm-border: #E5E5E0;\n --fm-font-serif: 'Newsreader', Georgia, serif;\n --fm-font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;\n\n background-color: #FFFFFF;\n color: var(--fm-ink);\n font-family: var(--fm-font-sans);\n padding: {{ section.settings.padding_top }}px 0 {{ section.settings.padding_bottom }}px;\n }\n\n \/* \u539f\u6848 1400px \u6700\u5927\u7f51\u683c\u5bbd\u5ea6 *\/\n .fm-container {\n max-width: 1400px;\n margin: 0 auto;\n padding: 0 24px;\n }\n\n \/* \u9876\u90e8\u6a2a\u5e45\u4e0e\u6807\u9898\u533a *\/\n .fm-top-banner {\n display: flex;\n flex-wrap: wrap;\n justify-content: space-between;\n align-items: flex-end;\n gap: 20px;\n margin-bottom: 32px;\n }\n .fm-promo-tag {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n background-color: var(--fm-lime);\n color: var(--fm-forest);\n font-size: 0.75rem;\n font-weight: 700;\n padding: 6px 14px;\n border-radius: 999px;\n margin-bottom: 12px;\n }\n .fm-promo-tag span {\n background-color: var(--fm-orange);\n color: #FFFFFF;\n padding: 2px 8px;\n border-radius: 999px;\n font-size: 0.6875rem;\n }\n .fm-heading {\n font-family: var(--fm-font-serif);\n font-size: clamp(2rem, 3.8vw, 3.25rem);\n font-weight: 500;\n line-height: 1.1;\n margin: 0;\n color: var(--fm-ink);\n }\n .fm-heading em {\n font-style: italic;\n color: var(--fm-green);\n }\n .fm-trust-pills {\n display: flex;\n flex-wrap: wrap;\n gap: 10px;\n }\n .fm-trust-pill {\n background-color: var(--fm-bg-cream);\n color: var(--fm-bauhaus);\n font-size: 0.8125rem;\n font-weight: 600;\n padding: 8px 14px;\n border-radius: 999px;\n }\n\n \/* \u5e26\u5546\u54c1\u6570\u7684\u8d27\u67b6\u5206\u7c7b\u80f6\u56ca\u680f *\/\n .fm-aisle-bar {\n display: flex;\n gap: 12px;\n overflow-x: auto;\n padding-bottom: 12px;\n margin-bottom: 32px;\n }\n .fm-aisle-btn {\n display: inline-flex;\n align-items: center;\n gap: 10px;\n background-color: var(--fm-bg-lynx);\n color: var(--fm-ink);\n border: 1.5px solid transparent;\n padding: 12px 18px;\n border-radius: 16px;\n font-family: var(--fm-font-sans);\n font-size: 0.9375rem;\n font-weight: 600;\n white-space: nowrap;\n cursor: pointer;\n transition: all 0.2s ease;\n }\n .fm-aisle-btn:hover {\n border-color: var(--fm-green);\n }\n .fm-aisle-btn.is-active {\n background-color: var(--fm-green);\n color: #FFFFFF;\n }\n .fm-aisle-count {\n font-size: 0.75rem;\n font-weight: 700;\n padding: 2px 8px;\n border-radius: 999px;\n background-color: #FFFFFF;\n color: var(--fm-green);\n }\n .fm-aisle-btn.is-active .fm-aisle-count {\n background-color: var(--fm-lime);\n color: var(--fm-forest);\n }\n\n \/* 12 \u5217\u5546\u54c1\u8d27\u67b6\u7f51\u683c\uff08\u684c\u9762 4 \u5217\uff0c\u5e73\u677f 2 \u5217\uff0c\u624b\u673a 2 \u5217\u7d27\u51d1\u6a21\u5f0f\uff09 *\/\n .fm-product-grid {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 20px;\n }\n @media screen and (max-width: 1024px) {\n .fm-product-grid {\n grid-template-columns: repeat(3, 1fr);\n }\n }\n @media screen and (max-width: 768px) {\n .fm-product-grid {\n grid-template-columns: repeat(2, 1fr);\n gap: 12px;\n }\n }\n\n \/* \u5355\u5f20\u751f\u9c9c\/\u5feb\u6d88\u5546\u54c1\u5361 *\/\n .fm-card {\n background-color: var(--fm-bg-lynx);\n border: 1px solid var(--fm-border);\n border-radius: 20px;\n padding: 16px;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n position: relative;\n transition: transform 0.2s ease, box-shadow 0.2s ease;\n }\n .fm-card:hover {\n transform: translateY(-2px);\n box-shadow: 0 10px 24px rgba(22, 102, 75, 0.08);\n }\n .fm-card[hidden] {\n display: none !important;\n }\n\n \/* \u5361\u7247\u9876\u90e8\uff1a\u6298\u6263\u6a59\u8272\u6807\u7b7e + \u73b0\u8d27\u5e93\u5b58\u4f59\u91cf *\/\n .fm-card-top {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 8px;\n margin-bottom: 10px;\n }\n .fm-sale-badge {\n background-color: var(--fm-orange);\n color: #FFFFFF;\n font-size: 0.6875rem;\n font-weight: 700;\n padding: 3px 9px;\n border-radius: 999px;\n }\n .fm-stock-badge {\n font-size: 0.6875rem;\n font-weight: 600;\n color: var(--fm-green);\n background: rgba(22, 102, 75, 0.1);\n padding: 3px 9px;\n border-radius: 999px;\n margin-left: auto;\n }\n\n .fm-img-box {\n aspect-ratio: 4 \/ 3;\n background-color: #FFFFFF;\n border-radius: 14px;\n overflow: hidden;\n margin-bottom: 14px;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n .fm-img-box img {\n width: 100%;\n height: 100%;\n object-fit: contain;\n padding: 10px;\n box-sizing: border-box;\n }\n\n .fm-vendor {\n font-size: 0.75rem;\n color: var(--fm-bauhaus);\n margin: 0 0 4px;\n }\n .fm-item-title {\n font-size: 1.0625rem;\n font-weight: 700;\n margin: 0 0 4px;\n color: var(--fm-ink);\n }\n .fm-unit-spec {\n font-size: 0.8125rem;\n font-weight: 600;\n color: var(--fm-green);\n margin: 0 0 14px;\n }\n\n \/* \u5e95\u90e8\u4ef7\u683c\u4e0e\u539f\u5730\u53d8\u5f62\u52a0\u8d2d\u6b65\u8fdb\u5668 *\/\n .fm-card-footer {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 8px;\n padding-top: 12px;\n border-top: 1px solid var(--fm-border);\n }\n .fm-price-group {\n display: flex;\n flex-direction: column;\n }\n .fm-price-current {\n font-size: 1.125rem;\n font-weight: 700;\n color: var(--fm-ink);\n }\n .fm-price-compare {\n font-size: 0.75rem;\n color: #888888;\n text-decoration: line-through;\n }\n\n \/* \u72b6\u6001 A\uff1a\u672a\u52a0\u8d2d\u65f6\u7684\u63cf\u8fb9\u80f6\u56ca\u6309\u94ae (+ Add to Cart) *\/\n .fm-add-btn {\n background-color: #FFFFFF;\n color: var(--fm-green);\n border: 1.5px solid var(--fm-green);\n padding: 8px 14px;\n border-radius: 999px;\n font-size: 0.8125rem;\n font-weight: 700;\n cursor: pointer;\n transition: all 0.2s ease;\n }\n .fm-add-btn:hover {\n background-color: var(--fm-green);\n color: #FFFFFF;\n }\n\n \/* \u72b6\u6001 B\uff1a\u52a0\u8d2d\u540e\u539f\u5730\u53d8\u5f62\u4e3a\u6df1\u7eff\u692d\u5706\u6b65\u8fdb\u5668 (- 1 +) *\/\n .fm-stepper {\n display: none;\n align-items: center;\n background-color: var(--fm-green);\n color: #FFFFFF;\n border-radius: 999px;\n padding: 4px 6px;\n gap: 10px;\n }\n .fm-card.in-basket .fm-add-btn {\n display: none;\n }\n .fm-card.in-basket .fm-stepper {\n display: inline-flex;\n }\n .fm-step-btn {\n width: 26px;\n height: 26px;\n border-radius: 50%;\n border: none;\n background: rgba(255, 255, 255, 0.18);\n color: #FFFFFF;\n font-size: 1rem;\n font-weight: 700;\n line-height: 1;\n cursor: pointer;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n }\n .fm-step-btn:hover {\n background: var(--fm-lime);\n color: var(--fm-forest);\n }\n .fm-step-qty {\n font-size: 0.875rem;\n font-weight: 700;\n min-width: 18px;\n text-align: center;\n }\n\n \/* \u5e95\u90e8\u5b9e\u65f6\u51d1\u5355\u4e0e\u7701\u94b1\u7ed3\u7b97\u680f\uff08Basket full. Worry zero.\uff09 *\/\n .fm-basket-bar {\n margin-top: 32px;\n background-color: var(--fm-forest);\n color: #FFFFFF;\n border-radius: 20px;\n padding: 20px 28px;\n display: flex;\n flex-wrap: wrap;\n justify-content: space-between;\n align-items: center;\n gap: 20px;\n }\n .fm-saving-pill {\n display: inline-block;\n background-color: var(--fm-orange);\n color: #FFFFFF;\n font-size: 0.75rem;\n font-weight: 700;\n padding: 4px 10px;\n border-radius: 999px;\n margin-left: 8px;\n }\n .fm-checkout-btn {\n background-color: var(--fm-lime);\n color: var(--fm-forest);\n border: none;\n padding: 14px 28px;\n border-radius: 999px;\n font-size: 0.9375rem;\n font-weight: 700;\n cursor: pointer;\n transition: transform 0.2s ease;\n }\n .fm-checkout-btn:hover {\n transform: translateY(-1px);\n }\n<\/style>\n\n<section class="fm-sec-{{ section.id }}" data-section-id="{{ section.id }}">\n <div class="fm-container">\n <div class="fm-top-banner">\n <div>\n <div class="fm-promo-tag">\n <span>-10% FRESH DEALS<\/span>\n {{ section.settings.promo_text }}\n <\/div>\n <h2 class="fm-heading">\n {{ section.settings.heading_main }} <em>{{ section.settings.heading_italic }}<\/em>\n <\/h2>\n <\/div>\n <div class="fm-trust-pills">\n <span class="fm-trust-pill">\u26a1 Express Delivery < 60 Mins<\/span>\n <span class="fm-trust-pill">\ud83c\udf31 01 Harvest \u2192 04 Doorstep<\/span>\n <span class="fm-trust-pill">\ud83d\ude9a Free Delivery Over ${{ section.settings.free_shipping_threshold }}<\/span>\n <\/div>\n <\/div>\n\n {%- comment -%} \u5e26\u5546\u54c1\u8ba1\u6570\u7684\u516d\u5927\u8d27\u67b6\u80f6\u56ca\u5bfc\u822a {%- endcomment -%}\n <div class="fm-aisle-bar" role="tablist" aria-label="\u751f\u9c9c\u8d27\u67b6\u5206\u7c7b">\n <button type="button" class="fm-aisle-btn is-active" data-aisle="all">\n <span>All Fresh Picks<\/span>\n <span class="fm-aisle-count">{{ section.blocks.size }}<\/span>\n <\/button>\n <button type="button" class="fm-aisle-btn" data-aisle="vegetables">\n <span>\ud83e\udd6c Fresh Vegetables<\/span>\n <\/button>\n <button type="button" class="fm-aisle-btn" data-aisle="fruits">\n <span>\ud83c\udf53 Seasonal Fruits<\/span>\n <\/button>\n <button type="button" class="fm-aisle-btn" data-aisle="dairy">\n <span>\ud83e\udd5b Dairy & Eggs<\/span>\n <\/button>\n <button type="button" class="fm-aisle-btn" data-aisle="bakery">\n <span>\ud83e\udd50 Bakery & Pantry<\/span>\n <\/button>\n <\/div>\n\n <div class="fm-product-grid">\n {%- for block in section.blocks -%}\n {%- assign product = block.settings.product -%}\n {%- assign variant = product.selected_or_first_available_variant -%}\n <article\n class="fm-card {% if block.settings.default_qty > 0 %}in-basket{% endif %}"\n data-aisle-cat="{{ block.settings.aisle_category }}"\n data-variant-id="{{ variant.id }}"\n data-price="{{ block.settings.price_sale }}"\n data-compare="{{ block.settings.price_compare }}"\n data-qty="{{ block.settings.default_qty }}"\n {{ block.shopify_attributes }}\n >\n <div>\n <div class="fm-card-top">\n {%- if block.settings.sale_badge != blank -%}\n <span class="fm-sale-badge">{{ block.settings.sale_badge }}<\/span>\n {%- endif -%}\n <span class="fm-stock-badge">{{ block.settings.stock_label }}<\/span>\n <\/div>\n\n <div class="fm-img-box">\n {%- if block.settings.custom_image != blank -%}\n <img\n src="{{ block.settings.custom_image | image_url: width: 600 }}"\n alt="{{ block.settings.item_title | escape }}"\n width="600"\n height="450"\n loading="lazy"\n >\n {%- elsif product != blank and product.featured_image != blank -%}\n <img\n src="{{ product.featured_image | image_url: width: 600 }}"\n alt="{{ product.title | escape }}"\n width="600"\n height="450"\n loading="lazy"\n >\n {%- else -%}\n <span style="font-size:2.5rem;">{{ block.settings.emoji_placeholder }}<\/span>\n {%- endif -%}\n <\/div>\n\n <p class="fm-vendor">{{ block.settings.vendor_name }}<\/p>\n <h3 class="fm-item-title">{{ block.settings.item_title | default: product.title }}<\/h3>\n <p class="fm-unit-spec">{{ block.settings.unit_price_label }}<\/p>\n <\/div>\n\n <div class="fm-card-footer">\n <div class="fm-price-group">\n <span class="fm-price-current">${{ block.settings.price_sale }}<\/span>\n {%- if block.settings.price_compare != blank -%}\n <span class="fm-price-compare">${{ block.settings.price_compare }}<\/span>\n {%- endif -%}\n <\/div>\n\n <button type="button" class="fm-add-btn js-fm-add">+ Add to Cart<\/button>\n\n <div class="fm-stepper">\n <button type="button" class="fm-step-btn js-fm-minus" aria-label="\u51cf\u5c11\u6570\u91cf">\u2212<\/button>\n <span class="fm-step-qty js-fm-qty">{{ block.settings.default_qty }}<\/span>\n <button type="button" class="fm-step-btn js-fm-plus" aria-label="\u589e\u52a0\u6570\u91cf">+<\/button>\n <\/div>\n <\/div>\n <\/article>\n {%- endfor -%}\n <\/div>\n\n {%- comment -%} \u5e95\u90e8\u5b9e\u65f6\u51d1\u5355\u4e0e\u4f18\u60e0\u6c47\u603b\u680f {%- endcomment -%}\n <div class="fm-basket-bar">\n <div>\n <div style="font-size:0.75rem;text-transform:uppercase;letter-spacing:0.08em;color:var(--fm-lime);margin-bottom:4px;">\n BASKET FULL \u00b7 WORRY ZERO\n <\/div>\n <div style="font-size:1.125rem;font-weight:700;">\n <span id="FmBasketTotal-{{ section.id }}">\u5df2\u9009 0 \u4ef6 \u00b7 \u5408\u8ba1 $0.00<\/span>\n <span class="fm-saving-pill" id="FmSavingBadge-{{ section.id }}">Your saving: -$0.00<\/span>\n <\/div>\n <div style="font-size:0.8125rem;opacity:0.82;margin-top:4px;" id="FmFreeShipNote-{{ section.id }}"><\/div>\n <\/div>\n\n <button\n type="button"\n class="fm-checkout-btn"\n id="FmSyncCartBtn-{{ section.id }}"\n data-threshold="{{ section.settings.free_shipping_threshold }}"\n >\n Proceed to Fast Checkout \u2192\n <\/button>\n <\/div>\n <\/div>\n<\/section>\n\n<script>\n (function() {\n var sec = document.querySelector('.fm-sec-{{ section.id }}');\n if (!sec) return;\n\n var aisleBtns = sec.querySelectorAll('[data-aisle]');\n var cards = sec.querySelectorAll('.fm-card');\n var totalEl = sec.querySelector('#FmBasketTotal-{{ section.id }}');\n var savingEl = sec.querySelector('#FmSavingBadge-{{ section.id }}');\n var shipNoteEl = sec.querySelector('#FmFreeShipNote-{{ section.id }}');\n var syncBtn = sec.querySelector('#FmSyncCartBtn-{{ section.id }}');\n var freeThreshold = parseFloat(syncBtn.getAttribute('data-threshold') || '50');\n\n \/* \u8d27\u67b6\u5206\u7c7b\u7b5b\u9009 *\/\n aisleBtns.forEach(function(btn) {\n btn.addEventListener('click', function() {\n var cat = btn.getAttribute('data-aisle');\n aisleBtns.forEach(function(b) { b.classList.toggle('is-active', b === btn); });\n cards.forEach(function(c) {\n if (cat === 'all' || c.getAttribute('data-aisle-cat') === cat) {\n c.removeAttribute('hidden');\n } else {\n c.setAttribute('hidden', 'hidden');\n }\n });\n });\n });\n\n \/* \u91cd\u65b0\u8ba1\u7b97\u8d2d\u7269\u7bee\u603b\u4ef7\u3001\u5df2\u7701\u91d1\u989d\uff08Your saving\uff09\u4e0e\u514d\u90ae\u5dee\u989d *\/\n function recalcBasket() {\n var itemCount = 0;\n var subtotal = 0;\n var saved = 0;\n\n cards.forEach(function(card) {\n var qty = parseInt(card.getAttribute('data-qty') || '0', 10);\n var price = parseFloat(card.getAttribute('data-price') || '0');\n var compare = parseFloat(card.getAttribute('data-compare') || '0');\n if (qty > 0) {\n itemCount += qty;\n subtotal += price * qty;\n if (compare > price) {\n saved += (compare - price) * qty;\n }\n }\n });\n\n totalEl.textContent = '\u5df2\u9009 ' + itemCount + ' \u4ef6\u5546\u54c1 \u00b7 Subtotal: $' + subtotal.toFixed(2);\n savingEl.textContent = 'Your saving: -$' + saved.toFixed(2);\n\n if (subtotal >= freeThreshold) {\n shipNoteEl.textContent = '\ud83c\udf89 \u5df2\u6ee1 $' + freeThreshold.toFixed(0) + '\uff0c\u672c\u5355\u4eab\u514d\u8d39\u6781\u901f\u914d\u9001\uff08Free Express Delivery Unlocked\uff09\uff01';\n } else {\n var diff = (freeThreshold - subtotal).toFixed(2);\n shipNoteEl.textContent = '\u518d\u51d1 $' + diff + ' \u5373\u53ef\u89e3\u9501\u6ee1 $' + freeThreshold.toFixed(0) + ' \u514d\u8fd0\u8d39';\n }\n }\n\n \/* \u7ed1\u5b9a\u6bcf\u5f20\u5361\u7247\u7684\u539f\u5730\u53d8\u5f62\u6b65\u8fdb\u5668 (+ Add to Cart <-> - 1 +) *\/\n cards.forEach(function(card) {\n var addBtn = card.querySelector('.js-fm-add');\n var minusBtn = card.querySelector('.js-fm-minus');\n var plusBtn = card.querySelector('.js-fm-plus');\n var qtySpan = card.querySelector('.js-fm-qty');\n\n function setQty(newQty) {\n var q = Math.max(0, newQty);\n card.setAttribute('data-qty', String(q));\n qtySpan.textContent = String(q);\n card.classList.toggle('in-basket', q > 0);\n recalcBasket();\n }\n\n addBtn.addEventListener('click', function() { setQty(1); });\n plusBtn.addEventListener('click', function() {\n var cur = parseInt(card.getAttribute('data-qty') || '0', 10);\n setQty(cur + 1);\n });\n minusBtn.addEventListener('click', function() {\n var cur = parseInt(card.getAttribute('data-qty') || '0', 10);\n setQty(cur - 1);\n });\n });\n\n recalcBasket();\n\n \/* \u6279\u91cf\u5199\u5165 Shopify \u539f\u751f\u8d2d\u7269\u8f66 *\/\n syncBtn.addEventListener('click', function() {\n var items = [];\n cards.forEach(function(card) {\n var qty = parseInt(card.getAttribute('data-qty') || '0', 10);\n var variantId = card.getAttribute('data-variant-id');\n if (qty > 0 && variantId) {\n items.push({ id: Number(variantId), quantity: qty });\n }\n });\n if (items.length === 0) {\n window.location.href = '\/cart';\n return;\n }\n fetch(window.Shopify.routes.root + 'cart\/add.js', {\n method: 'POST',\n headers: { 'Content-Type': 'application\/json' },\n body: JSON.stringify({ items: items })\n }).then(function() {\n window.location.href = '\/checkout';\n });\n });\n })();\n<\/script>\n\n{% schema %}\n{\n "name": "Freshmart \u5feb\u6d88\u6b65\u8fdb\u51d1\u5355\u8d27\u67b6",\n "tag": "section",\n "settings": [\n {\n "type": "text",\n "id": "promo_text",\n "label": "\u9876\u90e8\u4fc3\u9500\u6761\u6587\u5b57",\n "default": "Get our best picks every Thursday \u00b7 New Here? Enjoy 10% OFF Your First Order"\n },\n {\n "type": "text",\n "id": "heading_main",\n "label": "\u4e3b\u6807\u9898\u524d\u6bb5",\n "default": "Everything Fresh,"\n },\n {\n "type": "text",\n "id": "heading_italic",\n "label": "\u4e3b\u6807\u9898\u659c\u4f53\u90e8\u5206",\n "default": "All in One Place."\n },\n {\n "type": "number",\n "id": "free_shipping_threshold",\n "label": "\u514d\u8fd0\u8d39\u95e8\u69db\u91d1\u989d ($)",\n "default": 50\n },\n {\n "type": "range",\n "id": "padding_top",\n "min": 24,\n "max": 120,\n "step": 4,\n "unit": "px",\n "label": "\u9876\u90e8\u5185\u8fb9\u8ddd",\n "default": 56\n },\n {\n "type": "range",\n "id": "padding_bottom",\n "min": 24,\n "max": 120,\n "step": 4,\n "unit": "px",\n "label": "\u5e95\u90e8\u5185\u8fb9\u8ddd",\n "default": 56\n }\n ],\n "blocks": [\n {\n "type": "grocery_item",\n "name": "\u5feb\u6d88\/\u751f\u9c9c\u5355\u54c1\u5361",\n "settings": [\n {\n "type": "product",\n "id": "product",\n "label": "\u5173\u8054 Shopify \u5546\u54c1"\n },\n {\n "type": "select",\n "id": "aisle_category",\n "label": "\u6240\u5c5e\u8d27\u67b6\u5206\u7c7b",\n "options": [\n { "value": "vegetables", "label": "Fresh Vegetables\uff08\u9c9c\u852c\uff09" },\n { "value": "fruits", "label": "Seasonal Fruits\uff08\u6c34\u679c\uff09" },\n { "value": "dairy", "label": "Dairy & Eggs\uff08\u4e73\u54c1\u86cb\u7c7b\uff09" },\n { "value": "bakery", "label": "Bakery & Pantry\uff08\u70d8\u7119\u7cae\u6cb9\uff09" }\n ],\n "default": "vegetables"\n },\n {\n "type": "image_picker",\n "id": "custom_image",\n "label": "\u81ea\u5b9a\u4e49\u5546\u54c1\u53bb\u5e95\u56fe"\n },\n {\n "type": "text",\n "id": "emoji_placeholder",\n "label": "\u672a\u4f20\u56fe\u65f6\u7684\u5360\u4f4d\u56fe\u6807",\n "default": "\ud83c\udf45"\n },\n {\n "type": "text",\n "id": "sale_badge",\n "label": "\u5de6\u4e0a\u89d2\u6a59\u8272\u4fc3\u9500\u6807\u7b7e",\n "default": "-20% Deal"\n },\n {\n "type": "text",\n "id": "stock_label",\n "label": "\u53f3\u4e0a\u89d2\u5e93\u5b58\u4f59\u91cf\u6807\u7b7e",\n "default": "In stock (100 Kg)"\n },\n {\n "type": "text",\n "id": "vendor_name",\n "label": "\u8d27\u6e90\/\u519c\u573a\u6807\u7b7e",\n "default": "Local Farmers"\n },\n {\n "type": "text",\n "id": "item_title",\n "label": "\u5546\u54c1\u540d\u79f0",\n "default": "Organic Red Tomatoes"\n },\n {\n "type": "text",\n "id": "unit_price_label",\n "label": "\u5355\u4f4d\u6362\u7b97\u5355\u4ef7\u8bf4\u660e",\n "default": "$1.33 \/ per kg \u00b7 1kg Pack"\n },\n {\n "type": "text",\n "id": "price_sale",\n "label": "\u5f53\u524d\u552e\u4ef7 ($)",\n "default": "16.00"\n },\n {\n "type": "text",\n "id": "price_compare",\n "label": "\u539f\u4ef7 ($\uff0c\u7528\u4e8e\u8ba1\u7b97 Your saving)",\n "default": "20.00"\n },\n {\n "type": "number",\n "id": "default_qty",\n "label": "\u9ed8\u8ba4\u6f14\u793a\u52a0\u8d2d\u6570\u91cf",\n "default": 1\n }\n ]\n }\n ],\n "presets": [\n {\n "name": "Freshmart \u5feb\u6d88\u6b65\u8fdb\u51d1\u5355\u8d27\u67b6",\n "blocks": [\n {\n "type": "grocery_item",\n "settings": {\n "aisle_category": "vegetables",\n "emoji_placeholder": "\ud83c\udf45",\n "sale_badge": "-20% Deal",\n "stock_label": "In stock (100 Kg)",\n "vendor_name": "Local Farmers",\n "item_title": "Organic Red Tomatoes (Vine Pack)",\n "unit_price_label": "$1.33 \/ per kg \u00b7 01 kg",\n "price_sale": "16.00",\n "price_compare": "20.00",\n "default_qty": 1\n }\n },\n {\n "type": "grocery_item",\n "settings": {\n "aisle_category": "dairy",\n "emoji_placeholder": "\ud83e\udd5a",\n "sale_badge": "-20% Deal",\n "stock_label": "In stock (80 Boxes)",\n "vendor_name": "Local Farmers",\n "item_title": "Pasture-Raised Farm Eggs",\n "unit_price_label": "$4.80 \/ per 12 pcs \u00b7 Family Pack",\n "price_sale": "16.00",\n "price_compare": "20.00",\n "default_qty": 1\n }\n },\n {\n "type": "grocery_item",\n "settings": {\n "aisle_category": "fruits",\n "emoji_placeholder": "\ud83c\udf47",\n "sale_badge": "Peak Quality",\n "stock_label": "In stock (65 Kg)",\n "vendor_name": "Local Farmers",\n "item_title": "Seedless Green Grapes",\n "unit_price_label": "$1.60 \/ per 100g \u00b7 1kg Box",\n "price_sale": "16.00",\n "price_compare": "20.00",\n "default_qty": 1\n }\n },\n {\n "type": "grocery_item",\n "settings": {\n "aisle_category": "dairy",\n "emoji_placeholder": "\ud83e\udd5b",\n "sale_badge": "Daily Essential",\n "stock_label": "In stock (42 Bottles)",\n "vendor_name": "Local Farmers",\n "item_title": "Glass-Bottled Whole Milk & Greek Yoghurt",\n "unit_price_label": "$3.20 \/ per 1L \u00b7 Chilled Tote",\n "price_sale": "12.00",\n "price_compare": "15.00",\n "default_qty": 0\n }\n }\n ]\n }\n ]\n}\n{% endschema %}\n<\/code><\/pre>\n<\/details>\nSources: Freshmart on Behance<\/a>, Shopify unit pricing<\/a>, Liquid unit price filter<\/a> and Ajax Cart API<\/a>.<\/p>","protected":false},"excerpt":{"rendered":"A Freshmart grocery design study on unit prices, aisle navigation, quantity controls, and the Shopify Ajax Cart.<\/p>","protected":false},"author":1,"featured_media":10975,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[259,4],"class_list":["post-10982","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-shopify-dtc","tag-api","tag-shopify"],"yoast_head":"\n
How a Shopify grocery store can turn its product list into a shopping aisle<\/title>\n<meta name=\"description\" content=\"How a Shopify grocery store can turn its product list into a shopping aisle\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.weswoo.com\/en\/freshmart-shopify-grocery\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How a Shopify grocery store can turn its product list into a shopping aisle\" \/>\n<meta property=\"og:description\" content=\"WESWOO\u2014\u8de8\u5883\u7535\u5546\u72ec\u7acb\u7ad9\u4e13\u5bb6\uff0c\u63d0\u4f9bshopify liquid\u4e13\u4e1a\u5f00\u53d1\u65b9\u6848 - Shopify Plus\u5408\u4f5c\u4f19\u4f34 - \u897f\u897f\u6728\uff08\u5e7f\u5dde\uff09\u79d1\u6280\u6709\u9650\u8d23\u4efb\u516c\u53f8\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.weswoo.com\/en\/freshmart-shopify-grocery\/\" \/>\n<meta property=\"og:site_name\" content=\"Shopify Plus & \u72ec\u7acb\u7ad9\u5f00\u53d1\uff5c\u8de8\u5883\u7535\u5546\u5b9a\u5236\u65b9\u6848 - WESWOO\" \/>\n<meta property=\"article:published_time\" content=\"2026-11-10T11:24:22+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.weswoo.com\/wp-content\/uploads\/2026\/11\/fm-01-hero.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"720\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"weswoo\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"weswoo\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"17 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.weswoo.com\/en\/freshmart-shopify-grocery\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.weswoo.com\/en\/freshmart-shopify-grocery\/\"},\"author\":{\"name\":\"weswoo\",\"@id\":\"https:\/\/www.weswoo.com\/en\/#\/schema\/person\/bc9a01c6d3445dbdfb68e96ee00f9642\"},\"headline\":\"How a Shopify grocery store can turn its product list into a shopping aisle\",\"datePublished\":\"2026-11-10T11:24:22+00:00\",\"dateModified\":\"2026-11-10T11:24:22+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.weswoo.com\/en\/freshmart-shopify-grocery\/\"},\"wordCount\":342,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.weswoo.com\/en\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.weswoo.com\/en\/freshmart-shopify-grocery\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.weswoo.com\/wp-content\/uploads\/2026\/11\/fm-01-hero.jpg\",\"keywords\":[\"API\",\"Shopify\"],\"articleSection\":[\"Shopify\u72ec\u7acb\u7ad9\u6307\u5357\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.weswoo.com\/en\/freshmart-shopify-grocery\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.weswoo.com\/en\/freshmart-shopify-grocery\/\",\"url\":\"https:\/\/www.weswoo.com\/en\/freshmart-shopify-grocery\/\",\"name\":\"How a Shopify grocery store can turn its product list into a shopping aisle\",\"isPartOf\":{\"@id\":\"https:\/\/www.weswoo.com\/en\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.weswoo.com\/en\/freshmart-shopify-grocery\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.weswoo.com\/en\/freshmart-shopify-grocery\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.weswoo.com\/wp-content\/uploads\/2026\/11\/fm-01-hero.jpg\",\"datePublished\":\"2026-11-10T11:24:22+00:00\",\"dateModified\":\"2026-11-10T11:24:22+00:00\",\"description\":\"How a Shopify grocery store can turn its product list into a shopping aisle\",\"breadcrumb\":{\"@id\":\"https:\/\/www.weswoo.com\/en\/freshmart-shopify-grocery\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.weswoo.com\/en\/freshmart-shopify-grocery\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.weswoo.com\/en\/freshmart-shopify-grocery\/#primaryimage\",\"url\":\"https:\/\/www.weswoo.com\/wp-content\/uploads\/2026\/11\/fm-01-hero.jpg\",\"contentUrl\":\"https:\/\/www.weswoo.com\/wp-content\/uploads\/2026\/11\/fm-01-hero.jpg\",\"width\":1280,\"height\":720,\"caption\":\"Freshmart \u684c\u9762\u9996\u5c4f\uff0c\u679c\u852c\u5546\u54c1\u5361\u4e0b\u65b9\u662f\u4e94\u4e2a\u5feb\u6377\u5165\u53e3 \u00b7 Orbix Studio \/ Behance\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.weswoo.com\/en\/freshmart-shopify-grocery\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/www.weswoo.com\/cn\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How a Shopify grocery store can turn its product list into a shopping aisle\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.weswoo.com\/en\/#website\",\"url\":\"https:\/\/www.weswoo.com\/en\/\",\"name\":\"WESWOO\",\"description\":\"WESWOO \u4e13\u6ce8 Shopify Plus \u4e0e\u72ec\u7acb\u7ad9\u5b9a\u5236\u5f00\u53d1\uff0c\u63d0\u4f9b\u9ad8\u6027\u80fd\u7535\u5546\u7f51\u7ad9\u5efa\u8bbe\u3001\u8de8\u5883\u8fd0\u8425\u652f\u6301\u3001B2B \u53ca\u591a\u6e20\u9053\u96c6\u6210\uff0c\u52a9\u529b\u54c1\u724c\u5168\u7403\u589e\u957f\u3002\",\"publisher\":{\"@id\":\"https:\/\/www.weswoo.com\/en\/#organization\"},\"alternateName\":\"WESWOO.COM\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.weswoo.com\/en\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.weswoo.com\/en\/#organization\",\"name\":\"WESWOO\",\"alternateName\":[\"WESWOO - Shopify Premier Partner\",\"\u897f\u897f\u6728\uff08\u6df1\u5733\uff09\u79d1\u6280\u6709\u9650\u8d23\u4efb\u516c\u53f8\",\"Xiximu (Shenzhen) Technology Co., Ltd.\"],\"url\":\"https:\/\/www.weswoo.com\/en\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.weswoo.com\/en\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.weswoo.com\/wp-content\/uploads\/2025\/08\/fulllogo.png\",\"contentUrl\":\"https:\/\/www.weswoo.com\/wp-content\/uploads\/2025\/08\/fulllogo.png\",\"width\":1280,\"height\":1024,\"caption\":\"WESWOO \u2014 Shopify cross-border ecommerce development specialist\"},\"image\":{\"@id\":\"https:\/\/www.weswoo.com\/en\/#\/schema\/logo\/image\/\"},\"description\":\"WESWOO is a Shopify Premier Partner providing Shopify theme and Shopify Plus development, B2B, Headless, data integration, and long-term technical support.\",\"email\":\"info@weswoo.com\",\"telephone\":\"+86 18688202145\",\"legalName\":\"\u897f\u897f\u6728\uff08\u6df1\u5733\uff09\u79d1\u6280\u6709\u9650\u8d23\u4efb\u516c\u53f8\",\"foundingDate\":\"2021-04-26\",\"numberOfEmployees\":{\"@type\":\"QuantitativeValue\",\"minValue\":\"11\",\"maxValue\":\"50\"},\"address\":[{\"@type\":\"PostalAddress\",\"streetAddress\":\"\u9999\u6e2f\u4e5d\u9f99\u65fa\u89d2\u5f25\u6566\u9053610\u53f7\u8377\u674e\u6d3b\u5546\u4e1a\u4e2d\u5fc318\u697c1805-06\u5ba4\",\"addressLocality\":\"\u9999\u6e2f\",\"addressCountry\":\"HK\"},{\"@type\":\"PostalAddress\",\"streetAddress\":\"\u6df1\u5733\u5e02\u5b9d\u5b89\u533a\u897f\u4e61\u8857\u9053\u5171\u4e50\u793e\u533a\u94c1\u4ed4\u8def60\u53f7\u594b\u6210\u667a\u8c37\u5927\u53a6B\u5ea72001A\",\"addressLocality\":\"\u6df1\u5733\u5e02\",\"addressRegion\":\"\u5e7f\u4e1c\u7701\",\"addressCountry\":\"CN\"}],\"sameAs\":[\"https:\/\/www.shopify.com\/partners\/directory\/partner\/10395\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.weswoo.com\/en\/#\/schema\/person\/bc9a01c6d3445dbdfb68e96ee00f9642\",\"name\":\"weswoo\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.weswoo.com\/en\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/60152bb1145c677a6b80dd2db1d761f279c3db9d602631e4f31f40a5ffd5ba44?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/60152bb1145c677a6b80dd2db1d761f279c3db9d602631e4f31f40a5ffd5ba44?s=96&d=mm&r=g\",\"caption\":\"weswoo\"},\"description\":\"WESWOO \u7f51\u7ad9\u5185\u5bb9\u53d1\u5e03\u8d26\u53f7\uff0c\u53d1\u5e03 Shopify \u72ec\u7acb\u7ad9\u5efa\u8bbe\u3001\u4e3b\u9898\u5f00\u53d1\u3001\u7cfb\u7edf\u96c6\u6210\u4e0e\u8de8\u5883\u8fd0\u8425\u76f8\u5173\u6587\u7ae0\u3002\",\"sameAs\":[\"https:\/\/weswoo.com\"],\"url\":\"https:\/\/www.weswoo.com\/en\/author\/weswoo\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How a Shopify grocery store can turn its product list into a shopping aisle","description":"How a Shopify grocery store can turn its product list into a shopping aisle","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.weswoo.com\/en\/freshmart-shopify-grocery\/","og_locale":"en_US","og_type":"article","og_title":"How a Shopify grocery store can turn its product list into a shopping aisle","og_description":"WESWOO\u2014\u8de8\u5883\u7535\u5546\u72ec\u7acb\u7ad9\u4e13\u5bb6\uff0c\u63d0\u4f9bshopify liquid\u4e13\u4e1a\u5f00\u53d1\u65b9\u6848 - Shopify Plus\u5408\u4f5c\u4f19\u4f34 - \u897f\u897f\u6728\uff08\u5e7f\u5dde\uff09\u79d1\u6280\u6709\u9650\u8d23\u4efb\u516c\u53f8","og_url":"https:\/\/www.weswoo.com\/en\/freshmart-shopify-grocery\/","og_site_name":"Shopify Plus & \u72ec\u7acb\u7ad9\u5f00\u53d1\uff5c\u8de8\u5883\u7535\u5546\u5b9a\u5236\u65b9\u6848 - WESWOO","article_published_time":"2026-11-10T11:24:22+00:00","og_image":[{"width":1280,"height":720,"url":"https:\/\/www.weswoo.com\/wp-content\/uploads\/2026\/11\/fm-01-hero.jpg","type":"image\/jpeg"}],"author":"weswoo","twitter_card":"summary_large_image","twitter_misc":{"Written by":"weswoo","Est. reading time":"17 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.weswoo.com\/en\/freshmart-shopify-grocery\/#article","isPartOf":{"@id":"https:\/\/www.weswoo.com\/en\/freshmart-shopify-grocery\/"},"author":{"name":"weswoo","@id":"https:\/\/www.weswoo.com\/en\/#\/schema\/person\/bc9a01c6d3445dbdfb68e96ee00f9642"},"headline":"How a Shopify grocery store can turn its product list into a shopping aisle","datePublished":"2026-11-10T11:24:22+00:00","dateModified":"2026-11-10T11:24:22+00:00","mainEntityOfPage":{"@id":"https:\/\/www.weswoo.com\/en\/freshmart-shopify-grocery\/"},"wordCount":342,"commentCount":0,"publisher":{"@id":"https:\/\/www.weswoo.com\/en\/#organization"},"image":{"@id":"https:\/\/www.weswoo.com\/en\/freshmart-shopify-grocery\/#primaryimage"},"thumbnailUrl":"https:\/\/www.weswoo.com\/wp-content\/uploads\/2026\/11\/fm-01-hero.jpg","keywords":["API","Shopify"],"articleSection":["Shopify\u72ec\u7acb\u7ad9\u6307\u5357"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.weswoo.com\/en\/freshmart-shopify-grocery\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.weswoo.com\/en\/freshmart-shopify-grocery\/","url":"https:\/\/www.weswoo.com\/en\/freshmart-shopify-grocery\/","name":"How a Shopify grocery store can turn its product list into a shopping aisle","isPartOf":{"@id":"https:\/\/www.weswoo.com\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.weswoo.com\/en\/freshmart-shopify-grocery\/#primaryimage"},"image":{"@id":"https:\/\/www.weswoo.com\/en\/freshmart-shopify-grocery\/#primaryimage"},"thumbnailUrl":"https:\/\/www.weswoo.com\/wp-content\/uploads\/2026\/11\/fm-01-hero.jpg","datePublished":"2026-11-10T11:24:22+00:00","dateModified":"2026-11-10T11:24:22+00:00","description":"How a Shopify grocery store can turn its product list into a shopping aisle","breadcrumb":{"@id":"https:\/\/www.weswoo.com\/en\/freshmart-shopify-grocery\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.weswoo.com\/en\/freshmart-shopify-grocery\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.weswoo.com\/en\/freshmart-shopify-grocery\/#primaryimage","url":"https:\/\/www.weswoo.com\/wp-content\/uploads\/2026\/11\/fm-01-hero.jpg","contentUrl":"https:\/\/www.weswoo.com\/wp-content\/uploads\/2026\/11\/fm-01-hero.jpg","width":1280,"height":720,"caption":"Freshmart \u684c\u9762\u9996\u5c4f\uff0c\u679c\u852c\u5546\u54c1\u5361\u4e0b\u65b9\u662f\u4e94\u4e2a\u5feb\u6377\u5165\u53e3 \u00b7 Orbix Studio \/ Behance"},{"@type":"BreadcrumbList","@id":"https:\/\/www.weswoo.com\/en\/freshmart-shopify-grocery\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/www.weswoo.com\/cn\/"},{"@type":"ListItem","position":2,"name":"How a Shopify grocery store can turn its product list into a shopping aisle"}]},{"@type":"WebSite","@id":"https:\/\/www.weswoo.com\/en\/#website","url":"https:\/\/www.weswoo.com\/en\/","name":"WESWOO","description":"WESWOO specializes in Shopify Plus and standalone custom development, providing high-performance e-commerce website development, cross-border operations support, B2B and multi-channel integration to help brands grow globally.","publisher":{"@id":"https:\/\/www.weswoo.com\/en\/#organization"},"alternateName":"WESWOO.COM","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.weswoo.com\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.weswoo.com\/en\/#organization","name":"WESWOO","alternateName":["WESWOO - Shopify Premier Partner","\u897f\u897f\u6728\uff08\u6df1\u5733\uff09\u79d1\u6280\u6709\u9650\u8d23\u4efb\u516c\u53f8","Xiximu (Shenzhen) Technology Co., Ltd."],"url":"https:\/\/www.weswoo.com\/en\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.weswoo.com\/en\/#\/schema\/logo\/image\/","url":"https:\/\/www.weswoo.com\/wp-content\/uploads\/2025\/08\/fulllogo.png","contentUrl":"https:\/\/www.weswoo.com\/wp-content\/uploads\/2025\/08\/fulllogo.png","width":1280,"height":1024,"caption":"WESWOO \u2014 Shopify cross-border ecommerce development specialist"},"image":{"@id":"https:\/\/www.weswoo.com\/en\/#\/schema\/logo\/image\/"},"description":"WESWOO is a Shopify Premier Partner providing Shopify theme and Shopify Plus development, B2B, Headless, data integration, and long-term technical support.","email":"info@weswoo.com","telephone":"+86 18688202145","legalName":"\u897f\u897f\u6728\uff08\u6df1\u5733\uff09\u79d1\u6280\u6709\u9650\u8d23\u4efb\u516c\u53f8","foundingDate":"2021-04-26","numberOfEmployees":{"@type":"QuantitativeValue","minValue":"11","maxValue":"50"},"address":[{"@type":"PostalAddress","streetAddress":"\u9999\u6e2f\u4e5d\u9f99\u65fa\u89d2\u5f25\u6566\u9053610\u53f7\u8377\u674e\u6d3b\u5546\u4e1a\u4e2d\u5fc318\u697c1805-06\u5ba4","addressLocality":"\u9999\u6e2f","addressCountry":"HK"},{"@type":"PostalAddress","streetAddress":"\u6df1\u5733\u5e02\u5b9d\u5b89\u533a\u897f\u4e61\u8857\u9053\u5171\u4e50\u793e\u533a\u94c1\u4ed4\u8def60\u53f7\u594b\u6210\u667a\u8c37\u5927\u53a6B\u5ea72001A","addressLocality":"\u6df1\u5733\u5e02","addressRegion":"\u5e7f\u4e1c\u7701","addressCountry":"CN"}],"sameAs":["https:\/\/www.shopify.com\/partners\/directory\/partner\/10395"]},{"@type":"Person","@id":"https:\/\/www.weswoo.com\/en\/#\/schema\/person\/bc9a01c6d3445dbdfb68e96ee00f9642","name":"weswoo","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.weswoo.com\/en\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/60152bb1145c677a6b80dd2db1d761f279c3db9d602631e4f31f40a5ffd5ba44?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/60152bb1145c677a6b80dd2db1d761f279c3db9d602631e4f31f40a5ffd5ba44?s=96&d=mm&r=g","caption":"weswoo"},"description":"WESWOO \u7f51\u7ad9\u5185\u5bb9\u53d1\u5e03\u8d26\u53f7\uff0c\u53d1\u5e03 Shopify \u72ec\u7acb\u7ad9\u5efa\u8bbe\u3001\u4e3b\u9898\u5f00\u53d1\u3001\u7cfb\u7edf\u96c6\u6210\u4e0e\u8de8\u5883\u8fd0\u8425\u76f8\u5173\u6587\u7ae0\u3002","sameAs":["https:\/\/weswoo.com"],"url":"https:\/\/www.weswoo.com\/en\/author\/weswoo\/"}]}},"_links":{"self":[{"href":"https:\/\/www.weswoo.com\/en\/wp-json\/wp\/v2\/posts\/10982","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.weswoo.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.weswoo.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.weswoo.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.weswoo.com\/en\/wp-json\/wp\/v2\/comments?post=10982"}],"version-history":[{"count":0,"href":"https:\/\/www.weswoo.com\/en\/wp-json\/wp\/v2\/posts\/10982\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.weswoo.com\/en\/wp-json\/wp\/v2\/media\/10975"}],"wp:attachment":[{"href":"https:\/\/www.weswoo.com\/en\/wp-json\/wp\/v2\/media?parent=10982"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.weswoo.com\/en\/wp-json\/wp\/v2\/categories?post=10982"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.weswoo.com\/en\/wp-json\/wp\/v2\/tags?post=10982"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
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.<\/p>\n
Connect the selection to the actual cart<\/h2>\n\u539f\u6848\u8ba2\u5355\u6458\u8981\u5c40\u90e8\uff0c\u5546\u54c1\u3001\u8282\u7701\u91d1\u989d\u3001\u8fd0\u8d39\u548c\u5408\u8ba1\u5206\u884c\u6392\u5217 \u00b7 Orbix Studio \/ Behance<\/a><\/figcaption><\/figure>\nConfigure 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.<\/p>\n
{%- assign variant = product.selected_or_first_available_variant -%}\n{%- if variant.unit_price_measurement -%}\n <span class="fm-unit-price">\n {{ variant.unit_price | unit_price_with_measurement: variant.unit_price_measurement }}\n <\/span>\n{%- endif -%}\n<\/code><\/pre>\nasync function addSelection(items) {\n const root = window.Shopify.routes.root;\n let message = '';\n\n try {\n const response = await fetch(root + 'cart\/add.js', {\n method: 'POST',\n headers: { 'Content-Type': 'application\/json' },\n body: JSON.stringify({ items })\n });\n if (!response.ok) {\n const error = await response.json().catch(() => null);\n message = error?.description || '\u6709\u5546\u54c1\u672a\u6309\u6240\u9009\u6570\u91cf\u52a0\u5165\u3002';\n }\n } catch {\n message = '\u672a\u6536\u5230\u52a0\u8d2d\u786e\u8ba4\uff0c\u8bf7\u67e5\u770b\u5f53\u524d\u8d2d\u7269\u8f66\u3002';\n }\n\n const currentCart = await fetch(root + 'cart.js');\n if (!currentCart.ok) throw new Error('\u6682\u65f6\u65e0\u6cd5\u8bfb\u53d6\u8d2d\u7269\u8f66');\n return { cart: await currentCart.json(), message };\n}\n<\/code><\/pre>\nA 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.<\/p>\n
Original Shopify Section demo<\/h2>\n
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.<\/p>\n\nExpand the full Section \u00b7 803 lines<\/summary>\n{%- comment -%}\n \u6587\u4ef6\uff1asections\/freshmart-aisle-quickshop.liquid\n \u8bbe\u8ba1\u53c2\u8003\uff1aFreshmart Grocery Shopping | Orbix Studio | Web app\n \u529f\u80fd\uff1a\u9ad8\u9891\u5feb\u6d88\/\u98df\u54c1\u751f\u9c9c\u5feb\u901f\u51d1\u5355\u8d27\u67b6\uff0c\u542b\u5e26\u8ba1\u6570\u7684\u5206\u7c7b\u80f6\u56ca\u3001\u5355\u4f4d\u8ba1\u4ef7\u5916\u9732\u3001\u539f\u5730\u53d8\u5f62\u6b65\u8fdb\u5668(- 1 +)\u4e0e\u5b9e\u65f6\u51d1\u5355\u7701\u94b1\u6761\n{%- endcomment -%}\n\n<link rel="preconnect" href="https:\/\/fonts.googleapis.com">\n<link rel="preconnect" href="https:\/\/fonts.gstatic.com" crossorigin>\n<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">\n\n<style>\n .fm-sec-{{ section.id }} {\n --fm-green: #16664B;\n --fm-forest: #1E2B23;\n --fm-orange: #FF591F;\n --fm-lime: #B4EE76;\n --fm-bg-lynx: #F7F7F7;\n --fm-bg-cream: #F3F2EC;\n --fm-ink: #000000;\n --fm-bauhaus: #404040;\n --fm-border: #E5E5E0;\n --fm-font-serif: 'Newsreader', Georgia, serif;\n --fm-font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;\n\n background-color: #FFFFFF;\n color: var(--fm-ink);\n font-family: var(--fm-font-sans);\n padding: {{ section.settings.padding_top }}px 0 {{ section.settings.padding_bottom }}px;\n }\n\n \/* \u539f\u6848 1400px \u6700\u5927\u7f51\u683c\u5bbd\u5ea6 *\/\n .fm-container {\n max-width: 1400px;\n margin: 0 auto;\n padding: 0 24px;\n }\n\n \/* \u9876\u90e8\u6a2a\u5e45\u4e0e\u6807\u9898\u533a *\/\n .fm-top-banner {\n display: flex;\n flex-wrap: wrap;\n justify-content: space-between;\n align-items: flex-end;\n gap: 20px;\n margin-bottom: 32px;\n }\n .fm-promo-tag {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n background-color: var(--fm-lime);\n color: var(--fm-forest);\n font-size: 0.75rem;\n font-weight: 700;\n padding: 6px 14px;\n border-radius: 999px;\n margin-bottom: 12px;\n }\n .fm-promo-tag span {\n background-color: var(--fm-orange);\n color: #FFFFFF;\n padding: 2px 8px;\n border-radius: 999px;\n font-size: 0.6875rem;\n }\n .fm-heading {\n font-family: var(--fm-font-serif);\n font-size: clamp(2rem, 3.8vw, 3.25rem);\n font-weight: 500;\n line-height: 1.1;\n margin: 0;\n color: var(--fm-ink);\n }\n .fm-heading em {\n font-style: italic;\n color: var(--fm-green);\n }\n .fm-trust-pills {\n display: flex;\n flex-wrap: wrap;\n gap: 10px;\n }\n .fm-trust-pill {\n background-color: var(--fm-bg-cream);\n color: var(--fm-bauhaus);\n font-size: 0.8125rem;\n font-weight: 600;\n padding: 8px 14px;\n border-radius: 999px;\n }\n\n \/* \u5e26\u5546\u54c1\u6570\u7684\u8d27\u67b6\u5206\u7c7b\u80f6\u56ca\u680f *\/\n .fm-aisle-bar {\n display: flex;\n gap: 12px;\n overflow-x: auto;\n padding-bottom: 12px;\n margin-bottom: 32px;\n }\n .fm-aisle-btn {\n display: inline-flex;\n align-items: center;\n gap: 10px;\n background-color: var(--fm-bg-lynx);\n color: var(--fm-ink);\n border: 1.5px solid transparent;\n padding: 12px 18px;\n border-radius: 16px;\n font-family: var(--fm-font-sans);\n font-size: 0.9375rem;\n font-weight: 600;\n white-space: nowrap;\n cursor: pointer;\n transition: all 0.2s ease;\n }\n .fm-aisle-btn:hover {\n border-color: var(--fm-green);\n }\n .fm-aisle-btn.is-active {\n background-color: var(--fm-green);\n color: #FFFFFF;\n }\n .fm-aisle-count {\n font-size: 0.75rem;\n font-weight: 700;\n padding: 2px 8px;\n border-radius: 999px;\n background-color: #FFFFFF;\n color: var(--fm-green);\n }\n .fm-aisle-btn.is-active .fm-aisle-count {\n background-color: var(--fm-lime);\n color: var(--fm-forest);\n }\n\n \/* 12 \u5217\u5546\u54c1\u8d27\u67b6\u7f51\u683c\uff08\u684c\u9762 4 \u5217\uff0c\u5e73\u677f 2 \u5217\uff0c\u624b\u673a 2 \u5217\u7d27\u51d1\u6a21\u5f0f\uff09 *\/\n .fm-product-grid {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 20px;\n }\n @media screen and (max-width: 1024px) {\n .fm-product-grid {\n grid-template-columns: repeat(3, 1fr);\n }\n }\n @media screen and (max-width: 768px) {\n .fm-product-grid {\n grid-template-columns: repeat(2, 1fr);\n gap: 12px;\n }\n }\n\n \/* \u5355\u5f20\u751f\u9c9c\/\u5feb\u6d88\u5546\u54c1\u5361 *\/\n .fm-card {\n background-color: var(--fm-bg-lynx);\n border: 1px solid var(--fm-border);\n border-radius: 20px;\n padding: 16px;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n position: relative;\n transition: transform 0.2s ease, box-shadow 0.2s ease;\n }\n .fm-card:hover {\n transform: translateY(-2px);\n box-shadow: 0 10px 24px rgba(22, 102, 75, 0.08);\n }\n .fm-card[hidden] {\n display: none !important;\n }\n\n \/* \u5361\u7247\u9876\u90e8\uff1a\u6298\u6263\u6a59\u8272\u6807\u7b7e + \u73b0\u8d27\u5e93\u5b58\u4f59\u91cf *\/\n .fm-card-top {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 8px;\n margin-bottom: 10px;\n }\n .fm-sale-badge {\n background-color: var(--fm-orange);\n color: #FFFFFF;\n font-size: 0.6875rem;\n font-weight: 700;\n padding: 3px 9px;\n border-radius: 999px;\n }\n .fm-stock-badge {\n font-size: 0.6875rem;\n font-weight: 600;\n color: var(--fm-green);\n background: rgba(22, 102, 75, 0.1);\n padding: 3px 9px;\n border-radius: 999px;\n margin-left: auto;\n }\n\n .fm-img-box {\n aspect-ratio: 4 \/ 3;\n background-color: #FFFFFF;\n border-radius: 14px;\n overflow: hidden;\n margin-bottom: 14px;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n .fm-img-box img {\n width: 100%;\n height: 100%;\n object-fit: contain;\n padding: 10px;\n box-sizing: border-box;\n }\n\n .fm-vendor {\n font-size: 0.75rem;\n color: var(--fm-bauhaus);\n margin: 0 0 4px;\n }\n .fm-item-title {\n font-size: 1.0625rem;\n font-weight: 700;\n margin: 0 0 4px;\n color: var(--fm-ink);\n }\n .fm-unit-spec {\n font-size: 0.8125rem;\n font-weight: 600;\n color: var(--fm-green);\n margin: 0 0 14px;\n }\n\n \/* \u5e95\u90e8\u4ef7\u683c\u4e0e\u539f\u5730\u53d8\u5f62\u52a0\u8d2d\u6b65\u8fdb\u5668 *\/\n .fm-card-footer {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 8px;\n padding-top: 12px;\n border-top: 1px solid var(--fm-border);\n }\n .fm-price-group {\n display: flex;\n flex-direction: column;\n }\n .fm-price-current {\n font-size: 1.125rem;\n font-weight: 700;\n color: var(--fm-ink);\n }\n .fm-price-compare {\n font-size: 0.75rem;\n color: #888888;\n text-decoration: line-through;\n }\n\n \/* \u72b6\u6001 A\uff1a\u672a\u52a0\u8d2d\u65f6\u7684\u63cf\u8fb9\u80f6\u56ca\u6309\u94ae (+ Add to Cart) *\/\n .fm-add-btn {\n background-color: #FFFFFF;\n color: var(--fm-green);\n border: 1.5px solid var(--fm-green);\n padding: 8px 14px;\n border-radius: 999px;\n font-size: 0.8125rem;\n font-weight: 700;\n cursor: pointer;\n transition: all 0.2s ease;\n }\n .fm-add-btn:hover {\n background-color: var(--fm-green);\n color: #FFFFFF;\n }\n\n \/* \u72b6\u6001 B\uff1a\u52a0\u8d2d\u540e\u539f\u5730\u53d8\u5f62\u4e3a\u6df1\u7eff\u692d\u5706\u6b65\u8fdb\u5668 (- 1 +) *\/\n .fm-stepper {\n display: none;\n align-items: center;\n background-color: var(--fm-green);\n color: #FFFFFF;\n border-radius: 999px;\n padding: 4px 6px;\n gap: 10px;\n }\n .fm-card.in-basket .fm-add-btn {\n display: none;\n }\n .fm-card.in-basket .fm-stepper {\n display: inline-flex;\n }\n .fm-step-btn {\n width: 26px;\n height: 26px;\n border-radius: 50%;\n border: none;\n background: rgba(255, 255, 255, 0.18);\n color: #FFFFFF;\n font-size: 1rem;\n font-weight: 700;\n line-height: 1;\n cursor: pointer;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n }\n .fm-step-btn:hover {\n background: var(--fm-lime);\n color: var(--fm-forest);\n }\n .fm-step-qty {\n font-size: 0.875rem;\n font-weight: 700;\n min-width: 18px;\n text-align: center;\n }\n\n \/* \u5e95\u90e8\u5b9e\u65f6\u51d1\u5355\u4e0e\u7701\u94b1\u7ed3\u7b97\u680f\uff08Basket full. Worry zero.\uff09 *\/\n .fm-basket-bar {\n margin-top: 32px;\n background-color: var(--fm-forest);\n color: #FFFFFF;\n border-radius: 20px;\n padding: 20px 28px;\n display: flex;\n flex-wrap: wrap;\n justify-content: space-between;\n align-items: center;\n gap: 20px;\n }\n .fm-saving-pill {\n display: inline-block;\n background-color: var(--fm-orange);\n color: #FFFFFF;\n font-size: 0.75rem;\n font-weight: 700;\n padding: 4px 10px;\n border-radius: 999px;\n margin-left: 8px;\n }\n .fm-checkout-btn {\n background-color: var(--fm-lime);\n color: var(--fm-forest);\n border: none;\n padding: 14px 28px;\n border-radius: 999px;\n font-size: 0.9375rem;\n font-weight: 700;\n cursor: pointer;\n transition: transform 0.2s ease;\n }\n .fm-checkout-btn:hover {\n transform: translateY(-1px);\n }\n<\/style>\n\n<section class="fm-sec-{{ section.id }}" data-section-id="{{ section.id }}">\n <div class="fm-container">\n <div class="fm-top-banner">\n <div>\n <div class="fm-promo-tag">\n <span>-10% FRESH DEALS<\/span>\n {{ section.settings.promo_text }}\n <\/div>\n <h2 class="fm-heading">\n {{ section.settings.heading_main }} <em>{{ section.settings.heading_italic }}<\/em>\n <\/h2>\n <\/div>\n <div class="fm-trust-pills">\n <span class="fm-trust-pill">\u26a1 Express Delivery < 60 Mins<\/span>\n <span class="fm-trust-pill">\ud83c\udf31 01 Harvest \u2192 04 Doorstep<\/span>\n <span class="fm-trust-pill">\ud83d\ude9a Free Delivery Over ${{ section.settings.free_shipping_threshold }}<\/span>\n <\/div>\n <\/div>\n\n {%- comment -%} \u5e26\u5546\u54c1\u8ba1\u6570\u7684\u516d\u5927\u8d27\u67b6\u80f6\u56ca\u5bfc\u822a {%- endcomment -%}\n <div class="fm-aisle-bar" role="tablist" aria-label="\u751f\u9c9c\u8d27\u67b6\u5206\u7c7b">\n <button type="button" class="fm-aisle-btn is-active" data-aisle="all">\n <span>All Fresh Picks<\/span>\n <span class="fm-aisle-count">{{ section.blocks.size }}<\/span>\n <\/button>\n <button type="button" class="fm-aisle-btn" data-aisle="vegetables">\n <span>\ud83e\udd6c Fresh Vegetables<\/span>\n <\/button>\n <button type="button" class="fm-aisle-btn" data-aisle="fruits">\n <span>\ud83c\udf53 Seasonal Fruits<\/span>\n <\/button>\n <button type="button" class="fm-aisle-btn" data-aisle="dairy">\n <span>\ud83e\udd5b Dairy & Eggs<\/span>\n <\/button>\n <button type="button" class="fm-aisle-btn" data-aisle="bakery">\n <span>\ud83e\udd50 Bakery & Pantry<\/span>\n <\/button>\n <\/div>\n\n <div class="fm-product-grid">\n {%- for block in section.blocks -%}\n {%- assign product = block.settings.product -%}\n {%- assign variant = product.selected_or_first_available_variant -%}\n <article\n class="fm-card {% if block.settings.default_qty > 0 %}in-basket{% endif %}"\n data-aisle-cat="{{ block.settings.aisle_category }}"\n data-variant-id="{{ variant.id }}"\n data-price="{{ block.settings.price_sale }}"\n data-compare="{{ block.settings.price_compare }}"\n data-qty="{{ block.settings.default_qty }}"\n {{ block.shopify_attributes }}\n >\n <div>\n <div class="fm-card-top">\n {%- if block.settings.sale_badge != blank -%}\n <span class="fm-sale-badge">{{ block.settings.sale_badge }}<\/span>\n {%- endif -%}\n <span class="fm-stock-badge">{{ block.settings.stock_label }}<\/span>\n <\/div>\n\n <div class="fm-img-box">\n {%- if block.settings.custom_image != blank -%}\n <img\n src="{{ block.settings.custom_image | image_url: width: 600 }}"\n alt="{{ block.settings.item_title | escape }}"\n width="600"\n height="450"\n loading="lazy"\n >\n {%- elsif product != blank and product.featured_image != blank -%}\n <img\n src="{{ product.featured_image | image_url: width: 600 }}"\n alt="{{ product.title | escape }}"\n width="600"\n height="450"\n loading="lazy"\n >\n {%- else -%}\n <span style="font-size:2.5rem;">{{ block.settings.emoji_placeholder }}<\/span>\n {%- endif -%}\n <\/div>\n\n <p class="fm-vendor">{{ block.settings.vendor_name }}<\/p>\n <h3 class="fm-item-title">{{ block.settings.item_title | default: product.title }}<\/h3>\n <p class="fm-unit-spec">{{ block.settings.unit_price_label }}<\/p>\n <\/div>\n\n <div class="fm-card-footer">\n <div class="fm-price-group">\n <span class="fm-price-current">${{ block.settings.price_sale }}<\/span>\n {%- if block.settings.price_compare != blank -%}\n <span class="fm-price-compare">${{ block.settings.price_compare }}<\/span>\n {%- endif -%}\n <\/div>\n\n <button type="button" class="fm-add-btn js-fm-add">+ Add to Cart<\/button>\n\n <div class="fm-stepper">\n <button type="button" class="fm-step-btn js-fm-minus" aria-label="\u51cf\u5c11\u6570\u91cf">\u2212<\/button>\n <span class="fm-step-qty js-fm-qty">{{ block.settings.default_qty }}<\/span>\n <button type="button" class="fm-step-btn js-fm-plus" aria-label="\u589e\u52a0\u6570\u91cf">+<\/button>\n <\/div>\n <\/div>\n <\/article>\n {%- endfor -%}\n <\/div>\n\n {%- comment -%} \u5e95\u90e8\u5b9e\u65f6\u51d1\u5355\u4e0e\u4f18\u60e0\u6c47\u603b\u680f {%- endcomment -%}\n <div class="fm-basket-bar">\n <div>\n <div style="font-size:0.75rem;text-transform:uppercase;letter-spacing:0.08em;color:var(--fm-lime);margin-bottom:4px;">\n BASKET FULL \u00b7 WORRY ZERO\n <\/div>\n <div style="font-size:1.125rem;font-weight:700;">\n <span id="FmBasketTotal-{{ section.id }}">\u5df2\u9009 0 \u4ef6 \u00b7 \u5408\u8ba1 $0.00<\/span>\n <span class="fm-saving-pill" id="FmSavingBadge-{{ section.id }}">Your saving: -$0.00<\/span>\n <\/div>\n <div style="font-size:0.8125rem;opacity:0.82;margin-top:4px;" id="FmFreeShipNote-{{ section.id }}"><\/div>\n <\/div>\n\n <button\n type="button"\n class="fm-checkout-btn"\n id="FmSyncCartBtn-{{ section.id }}"\n data-threshold="{{ section.settings.free_shipping_threshold }}"\n >\n Proceed to Fast Checkout \u2192\n <\/button>\n <\/div>\n <\/div>\n<\/section>\n\n<script>\n (function() {\n var sec = document.querySelector('.fm-sec-{{ section.id }}');\n if (!sec) return;\n\n var aisleBtns = sec.querySelectorAll('[data-aisle]');\n var cards = sec.querySelectorAll('.fm-card');\n var totalEl = sec.querySelector('#FmBasketTotal-{{ section.id }}');\n var savingEl = sec.querySelector('#FmSavingBadge-{{ section.id }}');\n var shipNoteEl = sec.querySelector('#FmFreeShipNote-{{ section.id }}');\n var syncBtn = sec.querySelector('#FmSyncCartBtn-{{ section.id }}');\n var freeThreshold = parseFloat(syncBtn.getAttribute('data-threshold') || '50');\n\n \/* \u8d27\u67b6\u5206\u7c7b\u7b5b\u9009 *\/\n aisleBtns.forEach(function(btn) {\n btn.addEventListener('click', function() {\n var cat = btn.getAttribute('data-aisle');\n aisleBtns.forEach(function(b) { b.classList.toggle('is-active', b === btn); });\n cards.forEach(function(c) {\n if (cat === 'all' || c.getAttribute('data-aisle-cat') === cat) {\n c.removeAttribute('hidden');\n } else {\n c.setAttribute('hidden', 'hidden');\n }\n });\n });\n });\n\n \/* \u91cd\u65b0\u8ba1\u7b97\u8d2d\u7269\u7bee\u603b\u4ef7\u3001\u5df2\u7701\u91d1\u989d\uff08Your saving\uff09\u4e0e\u514d\u90ae\u5dee\u989d *\/\n function recalcBasket() {\n var itemCount = 0;\n var subtotal = 0;\n var saved = 0;\n\n cards.forEach(function(card) {\n var qty = parseInt(card.getAttribute('data-qty') || '0', 10);\n var price = parseFloat(card.getAttribute('data-price') || '0');\n var compare = parseFloat(card.getAttribute('data-compare') || '0');\n if (qty > 0) {\n itemCount += qty;\n subtotal += price * qty;\n if (compare > price) {\n saved += (compare - price) * qty;\n }\n }\n });\n\n totalEl.textContent = '\u5df2\u9009 ' + itemCount + ' \u4ef6\u5546\u54c1 \u00b7 Subtotal: $' + subtotal.toFixed(2);\n savingEl.textContent = 'Your saving: -$' + saved.toFixed(2);\n\n if (subtotal >= freeThreshold) {\n shipNoteEl.textContent = '\ud83c\udf89 \u5df2\u6ee1 $' + freeThreshold.toFixed(0) + '\uff0c\u672c\u5355\u4eab\u514d\u8d39\u6781\u901f\u914d\u9001\uff08Free Express Delivery Unlocked\uff09\uff01';\n } else {\n var diff = (freeThreshold - subtotal).toFixed(2);\n shipNoteEl.textContent = '\u518d\u51d1 $' + diff + ' \u5373\u53ef\u89e3\u9501\u6ee1 $' + freeThreshold.toFixed(0) + ' \u514d\u8fd0\u8d39';\n }\n }\n\n \/* \u7ed1\u5b9a\u6bcf\u5f20\u5361\u7247\u7684\u539f\u5730\u53d8\u5f62\u6b65\u8fdb\u5668 (+ Add to Cart <-> - 1 +) *\/\n cards.forEach(function(card) {\n var addBtn = card.querySelector('.js-fm-add');\n var minusBtn = card.querySelector('.js-fm-minus');\n var plusBtn = card.querySelector('.js-fm-plus');\n var qtySpan = card.querySelector('.js-fm-qty');\n\n function setQty(newQty) {\n var q = Math.max(0, newQty);\n card.setAttribute('data-qty', String(q));\n qtySpan.textContent = String(q);\n card.classList.toggle('in-basket', q > 0);\n recalcBasket();\n }\n\n addBtn.addEventListener('click', function() { setQty(1); });\n plusBtn.addEventListener('click', function() {\n var cur = parseInt(card.getAttribute('data-qty') || '0', 10);\n setQty(cur + 1);\n });\n minusBtn.addEventListener('click', function() {\n var cur = parseInt(card.getAttribute('data-qty') || '0', 10);\n setQty(cur - 1);\n });\n });\n\n recalcBasket();\n\n \/* \u6279\u91cf\u5199\u5165 Shopify \u539f\u751f\u8d2d\u7269\u8f66 *\/\n syncBtn.addEventListener('click', function() {\n var items = [];\n cards.forEach(function(card) {\n var qty = parseInt(card.getAttribute('data-qty') || '0', 10);\n var variantId = card.getAttribute('data-variant-id');\n if (qty > 0 && variantId) {\n items.push({ id: Number(variantId), quantity: qty });\n }\n });\n if (items.length === 0) {\n window.location.href = '\/cart';\n return;\n }\n fetch(window.Shopify.routes.root + 'cart\/add.js', {\n method: 'POST',\n headers: { 'Content-Type': 'application\/json' },\n body: JSON.stringify({ items: items })\n }).then(function() {\n window.location.href = '\/checkout';\n });\n });\n })();\n<\/script>\n\n{% schema %}\n{\n "name": "Freshmart \u5feb\u6d88\u6b65\u8fdb\u51d1\u5355\u8d27\u67b6",\n "tag": "section",\n "settings": [\n {\n "type": "text",\n "id": "promo_text",\n "label": "\u9876\u90e8\u4fc3\u9500\u6761\u6587\u5b57",\n "default": "Get our best picks every Thursday \u00b7 New Here? Enjoy 10% OFF Your First Order"\n },\n {\n "type": "text",\n "id": "heading_main",\n "label": "\u4e3b\u6807\u9898\u524d\u6bb5",\n "default": "Everything Fresh,"\n },\n {\n "type": "text",\n "id": "heading_italic",\n "label": "\u4e3b\u6807\u9898\u659c\u4f53\u90e8\u5206",\n "default": "All in One Place."\n },\n {\n "type": "number",\n "id": "free_shipping_threshold",\n "label": "\u514d\u8fd0\u8d39\u95e8\u69db\u91d1\u989d ($)",\n "default": 50\n },\n {\n "type": "range",\n "id": "padding_top",\n "min": 24,\n "max": 120,\n "step": 4,\n "unit": "px",\n "label": "\u9876\u90e8\u5185\u8fb9\u8ddd",\n "default": 56\n },\n {\n "type": "range",\n "id": "padding_bottom",\n "min": 24,\n "max": 120,\n "step": 4,\n "unit": "px",\n "label": "\u5e95\u90e8\u5185\u8fb9\u8ddd",\n "default": 56\n }\n ],\n "blocks": [\n {\n "type": "grocery_item",\n "name": "\u5feb\u6d88\/\u751f\u9c9c\u5355\u54c1\u5361",\n "settings": [\n {\n "type": "product",\n "id": "product",\n "label": "\u5173\u8054 Shopify \u5546\u54c1"\n },\n {\n "type": "select",\n "id": "aisle_category",\n "label": "\u6240\u5c5e\u8d27\u67b6\u5206\u7c7b",\n "options": [\n { "value": "vegetables", "label": "Fresh Vegetables\uff08\u9c9c\u852c\uff09" },\n { "value": "fruits", "label": "Seasonal Fruits\uff08\u6c34\u679c\uff09" },\n { "value": "dairy", "label": "Dairy & Eggs\uff08\u4e73\u54c1\u86cb\u7c7b\uff09" },\n { "value": "bakery", "label": "Bakery & Pantry\uff08\u70d8\u7119\u7cae\u6cb9\uff09" }\n ],\n "default": "vegetables"\n },\n {\n "type": "image_picker",\n "id": "custom_image",\n "label": "\u81ea\u5b9a\u4e49\u5546\u54c1\u53bb\u5e95\u56fe"\n },\n {\n "type": "text",\n "id": "emoji_placeholder",\n "label": "\u672a\u4f20\u56fe\u65f6\u7684\u5360\u4f4d\u56fe\u6807",\n "default": "\ud83c\udf45"\n },\n {\n "type": "text",\n "id": "sale_badge",\n "label": "\u5de6\u4e0a\u89d2\u6a59\u8272\u4fc3\u9500\u6807\u7b7e",\n "default": "-20% Deal"\n },\n {\n "type": "text",\n "id": "stock_label",\n "label": "\u53f3\u4e0a\u89d2\u5e93\u5b58\u4f59\u91cf\u6807\u7b7e",\n "default": "In stock (100 Kg)"\n },\n {\n "type": "text",\n "id": "vendor_name",\n "label": "\u8d27\u6e90\/\u519c\u573a\u6807\u7b7e",\n "default": "Local Farmers"\n },\n {\n "type": "text",\n "id": "item_title",\n "label": "\u5546\u54c1\u540d\u79f0",\n "default": "Organic Red Tomatoes"\n },\n {\n "type": "text",\n "id": "unit_price_label",\n "label": "\u5355\u4f4d\u6362\u7b97\u5355\u4ef7\u8bf4\u660e",\n "default": "$1.33 \/ per kg \u00b7 1kg Pack"\n },\n {\n "type": "text",\n "id": "price_sale",\n "label": "\u5f53\u524d\u552e\u4ef7 ($)",\n "default": "16.00"\n },\n {\n "type": "text",\n "id": "price_compare",\n "label": "\u539f\u4ef7 ($\uff0c\u7528\u4e8e\u8ba1\u7b97 Your saving)",\n "default": "20.00"\n },\n {\n "type": "number",\n "id": "default_qty",\n "label": "\u9ed8\u8ba4\u6f14\u793a\u52a0\u8d2d\u6570\u91cf",\n "default": 1\n }\n ]\n }\n ],\n "presets": [\n {\n "name": "Freshmart \u5feb\u6d88\u6b65\u8fdb\u51d1\u5355\u8d27\u67b6",\n "blocks": [\n {\n "type": "grocery_item",\n "settings": {\n "aisle_category": "vegetables",\n "emoji_placeholder": "\ud83c\udf45",\n "sale_badge": "-20% Deal",\n "stock_label": "In stock (100 Kg)",\n "vendor_name": "Local Farmers",\n "item_title": "Organic Red Tomatoes (Vine Pack)",\n "unit_price_label": "$1.33 \/ per kg \u00b7 01 kg",\n "price_sale": "16.00",\n "price_compare": "20.00",\n "default_qty": 1\n }\n },\n {\n "type": "grocery_item",\n "settings": {\n "aisle_category": "dairy",\n "emoji_placeholder": "\ud83e\udd5a",\n "sale_badge": "-20% Deal",\n "stock_label": "In stock (80 Boxes)",\n "vendor_name": "Local Farmers",\n "item_title": "Pasture-Raised Farm Eggs",\n "unit_price_label": "$4.80 \/ per 12 pcs \u00b7 Family Pack",\n "price_sale": "16.00",\n "price_compare": "20.00",\n "default_qty": 1\n }\n },\n {\n "type": "grocery_item",\n "settings": {\n "aisle_category": "fruits",\n "emoji_placeholder": "\ud83c\udf47",\n "sale_badge": "Peak Quality",\n "stock_label": "In stock (65 Kg)",\n "vendor_name": "Local Farmers",\n "item_title": "Seedless Green Grapes",\n "unit_price_label": "$1.60 \/ per 100g \u00b7 1kg Box",\n "price_sale": "16.00",\n "price_compare": "20.00",\n "default_qty": 1\n }\n },\n {\n "type": "grocery_item",\n "settings": {\n "aisle_category": "dairy",\n "emoji_placeholder": "\ud83e\udd5b",\n "sale_badge": "Daily Essential",\n "stock_label": "In stock (42 Bottles)",\n "vendor_name": "Local Farmers",\n "item_title": "Glass-Bottled Whole Milk & Greek Yoghurt",\n "unit_price_label": "$3.20 \/ per 1L \u00b7 Chilled Tote",\n "price_sale": "12.00",\n "price_compare": "15.00",\n "default_qty": 0\n }\n }\n ]\n }\n ]\n}\n{% endschema %}\n<\/code><\/pre>\n<\/details>\nSources: Freshmart on Behance<\/a>, Shopify unit pricing<\/a>, Liquid unit price filter<\/a> and Ajax Cart API<\/a>.<\/p>","protected":false},"excerpt":{"rendered":"A Freshmart grocery design study on unit prices, aisle navigation, quantity controls, and the Shopify Ajax Cart.<\/p>","protected":false},"author":1,"featured_media":10975,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[259,4],"class_list":["post-10982","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-shopify-dtc","tag-api","tag-shopify"],"yoast_head":"\n
How a Shopify grocery store can turn its product list into a shopping aisle<\/title>\n<meta name=\"description\" content=\"How a Shopify grocery store can turn its product list into a shopping aisle\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.weswoo.com\/en\/freshmart-shopify-grocery\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How a Shopify grocery store can turn its product list into a shopping aisle\" \/>\n<meta property=\"og:description\" content=\"WESWOO\u2014\u8de8\u5883\u7535\u5546\u72ec\u7acb\u7ad9\u4e13\u5bb6\uff0c\u63d0\u4f9bshopify liquid\u4e13\u4e1a\u5f00\u53d1\u65b9\u6848 - Shopify Plus\u5408\u4f5c\u4f19\u4f34 - \u897f\u897f\u6728\uff08\u5e7f\u5dde\uff09\u79d1\u6280\u6709\u9650\u8d23\u4efb\u516c\u53f8\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.weswoo.com\/en\/freshmart-shopify-grocery\/\" \/>\n<meta property=\"og:site_name\" content=\"Shopify Plus & \u72ec\u7acb\u7ad9\u5f00\u53d1\uff5c\u8de8\u5883\u7535\u5546\u5b9a\u5236\u65b9\u6848 - WESWOO\" \/>\n<meta property=\"article:published_time\" content=\"2026-11-10T11:24:22+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.weswoo.com\/wp-content\/uploads\/2026\/11\/fm-01-hero.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"720\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"weswoo\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"weswoo\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"17 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.weswoo.com\/en\/freshmart-shopify-grocery\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.weswoo.com\/en\/freshmart-shopify-grocery\/\"},\"author\":{\"name\":\"weswoo\",\"@id\":\"https:\/\/www.weswoo.com\/en\/#\/schema\/person\/bc9a01c6d3445dbdfb68e96ee00f9642\"},\"headline\":\"How a Shopify grocery store can turn its product list into a shopping aisle\",\"datePublished\":\"2026-11-10T11:24:22+00:00\",\"dateModified\":\"2026-11-10T11:24:22+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.weswoo.com\/en\/freshmart-shopify-grocery\/\"},\"wordCount\":342,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.weswoo.com\/en\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.weswoo.com\/en\/freshmart-shopify-grocery\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.weswoo.com\/wp-content\/uploads\/2026\/11\/fm-01-hero.jpg\",\"keywords\":[\"API\",\"Shopify\"],\"articleSection\":[\"Shopify\u72ec\u7acb\u7ad9\u6307\u5357\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.weswoo.com\/en\/freshmart-shopify-grocery\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.weswoo.com\/en\/freshmart-shopify-grocery\/\",\"url\":\"https:\/\/www.weswoo.com\/en\/freshmart-shopify-grocery\/\",\"name\":\"How a Shopify grocery store can turn its product list into a shopping aisle\",\"isPartOf\":{\"@id\":\"https:\/\/www.weswoo.com\/en\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.weswoo.com\/en\/freshmart-shopify-grocery\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.weswoo.com\/en\/freshmart-shopify-grocery\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.weswoo.com\/wp-content\/uploads\/2026\/11\/fm-01-hero.jpg\",\"datePublished\":\"2026-11-10T11:24:22+00:00\",\"dateModified\":\"2026-11-10T11:24:22+00:00\",\"description\":\"How a Shopify grocery store can turn its product list into a shopping aisle\",\"breadcrumb\":{\"@id\":\"https:\/\/www.weswoo.com\/en\/freshmart-shopify-grocery\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.weswoo.com\/en\/freshmart-shopify-grocery\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.weswoo.com\/en\/freshmart-shopify-grocery\/#primaryimage\",\"url\":\"https:\/\/www.weswoo.com\/wp-content\/uploads\/2026\/11\/fm-01-hero.jpg\",\"contentUrl\":\"https:\/\/www.weswoo.com\/wp-content\/uploads\/2026\/11\/fm-01-hero.jpg\",\"width\":1280,\"height\":720,\"caption\":\"Freshmart \u684c\u9762\u9996\u5c4f\uff0c\u679c\u852c\u5546\u54c1\u5361\u4e0b\u65b9\u662f\u4e94\u4e2a\u5feb\u6377\u5165\u53e3 \u00b7 Orbix Studio \/ Behance\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.weswoo.com\/en\/freshmart-shopify-grocery\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/www.weswoo.com\/cn\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How a Shopify grocery store can turn its product list into a shopping aisle\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.weswoo.com\/en\/#website\",\"url\":\"https:\/\/www.weswoo.com\/en\/\",\"name\":\"WESWOO\",\"description\":\"WESWOO \u4e13\u6ce8 Shopify Plus \u4e0e\u72ec\u7acb\u7ad9\u5b9a\u5236\u5f00\u53d1\uff0c\u63d0\u4f9b\u9ad8\u6027\u80fd\u7535\u5546\u7f51\u7ad9\u5efa\u8bbe\u3001\u8de8\u5883\u8fd0\u8425\u652f\u6301\u3001B2B \u53ca\u591a\u6e20\u9053\u96c6\u6210\uff0c\u52a9\u529b\u54c1\u724c\u5168\u7403\u589e\u957f\u3002\",\"publisher\":{\"@id\":\"https:\/\/www.weswoo.com\/en\/#organization\"},\"alternateName\":\"WESWOO.COM\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.weswoo.com\/en\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.weswoo.com\/en\/#organization\",\"name\":\"WESWOO\",\"alternateName\":[\"WESWOO - Shopify Premier Partner\",\"\u897f\u897f\u6728\uff08\u6df1\u5733\uff09\u79d1\u6280\u6709\u9650\u8d23\u4efb\u516c\u53f8\",\"Xiximu (Shenzhen) Technology Co., Ltd.\"],\"url\":\"https:\/\/www.weswoo.com\/en\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.weswoo.com\/en\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.weswoo.com\/wp-content\/uploads\/2025\/08\/fulllogo.png\",\"contentUrl\":\"https:\/\/www.weswoo.com\/wp-content\/uploads\/2025\/08\/fulllogo.png\",\"width\":1280,\"height\":1024,\"caption\":\"WESWOO \u2014 Shopify cross-border ecommerce development specialist\"},\"image\":{\"@id\":\"https:\/\/www.weswoo.com\/en\/#\/schema\/logo\/image\/\"},\"description\":\"WESWOO is a Shopify Premier Partner providing Shopify theme and Shopify Plus development, B2B, Headless, data integration, and long-term technical support.\",\"email\":\"info@weswoo.com\",\"telephone\":\"+86 18688202145\",\"legalName\":\"\u897f\u897f\u6728\uff08\u6df1\u5733\uff09\u79d1\u6280\u6709\u9650\u8d23\u4efb\u516c\u53f8\",\"foundingDate\":\"2021-04-26\",\"numberOfEmployees\":{\"@type\":\"QuantitativeValue\",\"minValue\":\"11\",\"maxValue\":\"50\"},\"address\":[{\"@type\":\"PostalAddress\",\"streetAddress\":\"\u9999\u6e2f\u4e5d\u9f99\u65fa\u89d2\u5f25\u6566\u9053610\u53f7\u8377\u674e\u6d3b\u5546\u4e1a\u4e2d\u5fc318\u697c1805-06\u5ba4\",\"addressLocality\":\"\u9999\u6e2f\",\"addressCountry\":\"HK\"},{\"@type\":\"PostalAddress\",\"streetAddress\":\"\u6df1\u5733\u5e02\u5b9d\u5b89\u533a\u897f\u4e61\u8857\u9053\u5171\u4e50\u793e\u533a\u94c1\u4ed4\u8def60\u53f7\u594b\u6210\u667a\u8c37\u5927\u53a6B\u5ea72001A\",\"addressLocality\":\"\u6df1\u5733\u5e02\",\"addressRegion\":\"\u5e7f\u4e1c\u7701\",\"addressCountry\":\"CN\"}],\"sameAs\":[\"https:\/\/www.shopify.com\/partners\/directory\/partner\/10395\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.weswoo.com\/en\/#\/schema\/person\/bc9a01c6d3445dbdfb68e96ee00f9642\",\"name\":\"weswoo\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.weswoo.com\/en\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/60152bb1145c677a6b80dd2db1d761f279c3db9d602631e4f31f40a5ffd5ba44?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/60152bb1145c677a6b80dd2db1d761f279c3db9d602631e4f31f40a5ffd5ba44?s=96&d=mm&r=g\",\"caption\":\"weswoo\"},\"description\":\"WESWOO \u7f51\u7ad9\u5185\u5bb9\u53d1\u5e03\u8d26\u53f7\uff0c\u53d1\u5e03 Shopify \u72ec\u7acb\u7ad9\u5efa\u8bbe\u3001\u4e3b\u9898\u5f00\u53d1\u3001\u7cfb\u7edf\u96c6\u6210\u4e0e\u8de8\u5883\u8fd0\u8425\u76f8\u5173\u6587\u7ae0\u3002\",\"sameAs\":[\"https:\/\/weswoo.com\"],\"url\":\"https:\/\/www.weswoo.com\/en\/author\/weswoo\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How a Shopify grocery store can turn its product list into a shopping aisle","description":"How a Shopify grocery store can turn its product list into a shopping aisle","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.weswoo.com\/en\/freshmart-shopify-grocery\/","og_locale":"en_US","og_type":"article","og_title":"How a Shopify grocery store can turn its product list into a shopping aisle","og_description":"WESWOO\u2014\u8de8\u5883\u7535\u5546\u72ec\u7acb\u7ad9\u4e13\u5bb6\uff0c\u63d0\u4f9bshopify liquid\u4e13\u4e1a\u5f00\u53d1\u65b9\u6848 - Shopify Plus\u5408\u4f5c\u4f19\u4f34 - \u897f\u897f\u6728\uff08\u5e7f\u5dde\uff09\u79d1\u6280\u6709\u9650\u8d23\u4efb\u516c\u53f8","og_url":"https:\/\/www.weswoo.com\/en\/freshmart-shopify-grocery\/","og_site_name":"Shopify Plus & \u72ec\u7acb\u7ad9\u5f00\u53d1\uff5c\u8de8\u5883\u7535\u5546\u5b9a\u5236\u65b9\u6848 - WESWOO","article_published_time":"2026-11-10T11:24:22+00:00","og_image":[{"width":1280,"height":720,"url":"https:\/\/www.weswoo.com\/wp-content\/uploads\/2026\/11\/fm-01-hero.jpg","type":"image\/jpeg"}],"author":"weswoo","twitter_card":"summary_large_image","twitter_misc":{"Written by":"weswoo","Est. reading time":"17 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.weswoo.com\/en\/freshmart-shopify-grocery\/#article","isPartOf":{"@id":"https:\/\/www.weswoo.com\/en\/freshmart-shopify-grocery\/"},"author":{"name":"weswoo","@id":"https:\/\/www.weswoo.com\/en\/#\/schema\/person\/bc9a01c6d3445dbdfb68e96ee00f9642"},"headline":"How a Shopify grocery store can turn its product list into a shopping aisle","datePublished":"2026-11-10T11:24:22+00:00","dateModified":"2026-11-10T11:24:22+00:00","mainEntityOfPage":{"@id":"https:\/\/www.weswoo.com\/en\/freshmart-shopify-grocery\/"},"wordCount":342,"commentCount":0,"publisher":{"@id":"https:\/\/www.weswoo.com\/en\/#organization"},"image":{"@id":"https:\/\/www.weswoo.com\/en\/freshmart-shopify-grocery\/#primaryimage"},"thumbnailUrl":"https:\/\/www.weswoo.com\/wp-content\/uploads\/2026\/11\/fm-01-hero.jpg","keywords":["API","Shopify"],"articleSection":["Shopify\u72ec\u7acb\u7ad9\u6307\u5357"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.weswoo.com\/en\/freshmart-shopify-grocery\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.weswoo.com\/en\/freshmart-shopify-grocery\/","url":"https:\/\/www.weswoo.com\/en\/freshmart-shopify-grocery\/","name":"How a Shopify grocery store can turn its product list into a shopping aisle","isPartOf":{"@id":"https:\/\/www.weswoo.com\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.weswoo.com\/en\/freshmart-shopify-grocery\/#primaryimage"},"image":{"@id":"https:\/\/www.weswoo.com\/en\/freshmart-shopify-grocery\/#primaryimage"},"thumbnailUrl":"https:\/\/www.weswoo.com\/wp-content\/uploads\/2026\/11\/fm-01-hero.jpg","datePublished":"2026-11-10T11:24:22+00:00","dateModified":"2026-11-10T11:24:22+00:00","description":"How a Shopify grocery store can turn its product list into a shopping aisle","breadcrumb":{"@id":"https:\/\/www.weswoo.com\/en\/freshmart-shopify-grocery\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.weswoo.com\/en\/freshmart-shopify-grocery\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.weswoo.com\/en\/freshmart-shopify-grocery\/#primaryimage","url":"https:\/\/www.weswoo.com\/wp-content\/uploads\/2026\/11\/fm-01-hero.jpg","contentUrl":"https:\/\/www.weswoo.com\/wp-content\/uploads\/2026\/11\/fm-01-hero.jpg","width":1280,"height":720,"caption":"Freshmart \u684c\u9762\u9996\u5c4f\uff0c\u679c\u852c\u5546\u54c1\u5361\u4e0b\u65b9\u662f\u4e94\u4e2a\u5feb\u6377\u5165\u53e3 \u00b7 Orbix Studio \/ Behance"},{"@type":"BreadcrumbList","@id":"https:\/\/www.weswoo.com\/en\/freshmart-shopify-grocery\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/www.weswoo.com\/cn\/"},{"@type":"ListItem","position":2,"name":"How a Shopify grocery store can turn its product list into a shopping aisle"}]},{"@type":"WebSite","@id":"https:\/\/www.weswoo.com\/en\/#website","url":"https:\/\/www.weswoo.com\/en\/","name":"WESWOO","description":"WESWOO specializes in Shopify Plus and standalone custom development, providing high-performance e-commerce website development, cross-border operations support, B2B and multi-channel integration to help brands grow globally.","publisher":{"@id":"https:\/\/www.weswoo.com\/en\/#organization"},"alternateName":"WESWOO.COM","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.weswoo.com\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.weswoo.com\/en\/#organization","name":"WESWOO","alternateName":["WESWOO - Shopify Premier Partner","\u897f\u897f\u6728\uff08\u6df1\u5733\uff09\u79d1\u6280\u6709\u9650\u8d23\u4efb\u516c\u53f8","Xiximu (Shenzhen) Technology Co., Ltd."],"url":"https:\/\/www.weswoo.com\/en\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.weswoo.com\/en\/#\/schema\/logo\/image\/","url":"https:\/\/www.weswoo.com\/wp-content\/uploads\/2025\/08\/fulllogo.png","contentUrl":"https:\/\/www.weswoo.com\/wp-content\/uploads\/2025\/08\/fulllogo.png","width":1280,"height":1024,"caption":"WESWOO \u2014 Shopify cross-border ecommerce development specialist"},"image":{"@id":"https:\/\/www.weswoo.com\/en\/#\/schema\/logo\/image\/"},"description":"WESWOO is a Shopify Premier Partner providing Shopify theme and Shopify Plus development, B2B, Headless, data integration, and long-term technical support.","email":"info@weswoo.com","telephone":"+86 18688202145","legalName":"\u897f\u897f\u6728\uff08\u6df1\u5733\uff09\u79d1\u6280\u6709\u9650\u8d23\u4efb\u516c\u53f8","foundingDate":"2021-04-26","numberOfEmployees":{"@type":"QuantitativeValue","minValue":"11","maxValue":"50"},"address":[{"@type":"PostalAddress","streetAddress":"\u9999\u6e2f\u4e5d\u9f99\u65fa\u89d2\u5f25\u6566\u9053610\u53f7\u8377\u674e\u6d3b\u5546\u4e1a\u4e2d\u5fc318\u697c1805-06\u5ba4","addressLocality":"\u9999\u6e2f","addressCountry":"HK"},{"@type":"PostalAddress","streetAddress":"\u6df1\u5733\u5e02\u5b9d\u5b89\u533a\u897f\u4e61\u8857\u9053\u5171\u4e50\u793e\u533a\u94c1\u4ed4\u8def60\u53f7\u594b\u6210\u667a\u8c37\u5927\u53a6B\u5ea72001A","addressLocality":"\u6df1\u5733\u5e02","addressRegion":"\u5e7f\u4e1c\u7701","addressCountry":"CN"}],"sameAs":["https:\/\/www.shopify.com\/partners\/directory\/partner\/10395"]},{"@type":"Person","@id":"https:\/\/www.weswoo.com\/en\/#\/schema\/person\/bc9a01c6d3445dbdfb68e96ee00f9642","name":"weswoo","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.weswoo.com\/en\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/60152bb1145c677a6b80dd2db1d761f279c3db9d602631e4f31f40a5ffd5ba44?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/60152bb1145c677a6b80dd2db1d761f279c3db9d602631e4f31f40a5ffd5ba44?s=96&d=mm&r=g","caption":"weswoo"},"description":"WESWOO \u7f51\u7ad9\u5185\u5bb9\u53d1\u5e03\u8d26\u53f7\uff0c\u53d1\u5e03 Shopify \u72ec\u7acb\u7ad9\u5efa\u8bbe\u3001\u4e3b\u9898\u5f00\u53d1\u3001\u7cfb\u7edf\u96c6\u6210\u4e0e\u8de8\u5883\u8fd0\u8425\u76f8\u5173\u6587\u7ae0\u3002","sameAs":["https:\/\/weswoo.com"],"url":"https:\/\/www.weswoo.com\/en\/author\/weswoo\/"}]}},"_links":{"self":[{"href":"https:\/\/www.weswoo.com\/en\/wp-json\/wp\/v2\/posts\/10982","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.weswoo.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.weswoo.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.weswoo.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.weswoo.com\/en\/wp-json\/wp\/v2\/comments?post=10982"}],"version-history":[{"count":0,"href":"https:\/\/www.weswoo.com\/en\/wp-json\/wp\/v2\/posts\/10982\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.weswoo.com\/en\/wp-json\/wp\/v2\/media\/10975"}],"wp:attachment":[{"href":"https:\/\/www.weswoo.com\/en\/wp-json\/wp\/v2\/media?parent=10982"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.weswoo.com\/en\/wp-json\/wp\/v2\/categories?post=10982"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.weswoo.com\/en\/wp-json\/wp\/v2\/tags?post=10982"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
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.<\/p>\n
{%- assign variant = product.selected_or_first_available_variant -%}\n{%- if variant.unit_price_measurement -%}\n <span class="fm-unit-price">\n {{ variant.unit_price | unit_price_with_measurement: variant.unit_price_measurement }}\n <\/span>\n{%- endif -%}\n<\/code><\/pre>\nasync function addSelection(items) {\n const root = window.Shopify.routes.root;\n let message = '';\n\n try {\n const response = await fetch(root + 'cart\/add.js', {\n method: 'POST',\n headers: { 'Content-Type': 'application\/json' },\n body: JSON.stringify({ items })\n });\n if (!response.ok) {\n const error = await response.json().catch(() => null);\n message = error?.description || '\u6709\u5546\u54c1\u672a\u6309\u6240\u9009\u6570\u91cf\u52a0\u5165\u3002';\n }\n } catch {\n message = '\u672a\u6536\u5230\u52a0\u8d2d\u786e\u8ba4\uff0c\u8bf7\u67e5\u770b\u5f53\u524d\u8d2d\u7269\u8f66\u3002';\n }\n\n const currentCart = await fetch(root + 'cart.js');\n if (!currentCart.ok) throw new Error('\u6682\u65f6\u65e0\u6cd5\u8bfb\u53d6\u8d2d\u7269\u8f66');\n return { cart: await currentCart.json(), message };\n}\n<\/code><\/pre>\nA 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.<\/p>\n
Original Shopify Section demo<\/h2>\n
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.<\/p>\n\nExpand the full Section \u00b7 803 lines<\/summary>\n{%- comment -%}\n \u6587\u4ef6\uff1asections\/freshmart-aisle-quickshop.liquid\n \u8bbe\u8ba1\u53c2\u8003\uff1aFreshmart Grocery Shopping | Orbix Studio | Web app\n \u529f\u80fd\uff1a\u9ad8\u9891\u5feb\u6d88\/\u98df\u54c1\u751f\u9c9c\u5feb\u901f\u51d1\u5355\u8d27\u67b6\uff0c\u542b\u5e26\u8ba1\u6570\u7684\u5206\u7c7b\u80f6\u56ca\u3001\u5355\u4f4d\u8ba1\u4ef7\u5916\u9732\u3001\u539f\u5730\u53d8\u5f62\u6b65\u8fdb\u5668(- 1 +)\u4e0e\u5b9e\u65f6\u51d1\u5355\u7701\u94b1\u6761\n{%- endcomment -%}\n\n<link rel="preconnect" href="https:\/\/fonts.googleapis.com">\n<link rel="preconnect" href="https:\/\/fonts.gstatic.com" crossorigin>\n<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">\n\n<style>\n .fm-sec-{{ section.id }} {\n --fm-green: #16664B;\n --fm-forest: #1E2B23;\n --fm-orange: #FF591F;\n --fm-lime: #B4EE76;\n --fm-bg-lynx: #F7F7F7;\n --fm-bg-cream: #F3F2EC;\n --fm-ink: #000000;\n --fm-bauhaus: #404040;\n --fm-border: #E5E5E0;\n --fm-font-serif: 'Newsreader', Georgia, serif;\n --fm-font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;\n\n background-color: #FFFFFF;\n color: var(--fm-ink);\n font-family: var(--fm-font-sans);\n padding: {{ section.settings.padding_top }}px 0 {{ section.settings.padding_bottom }}px;\n }\n\n \/* \u539f\u6848 1400px \u6700\u5927\u7f51\u683c\u5bbd\u5ea6 *\/\n .fm-container {\n max-width: 1400px;\n margin: 0 auto;\n padding: 0 24px;\n }\n\n \/* \u9876\u90e8\u6a2a\u5e45\u4e0e\u6807\u9898\u533a *\/\n .fm-top-banner {\n display: flex;\n flex-wrap: wrap;\n justify-content: space-between;\n align-items: flex-end;\n gap: 20px;\n margin-bottom: 32px;\n }\n .fm-promo-tag {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n background-color: var(--fm-lime);\n color: var(--fm-forest);\n font-size: 0.75rem;\n font-weight: 700;\n padding: 6px 14px;\n border-radius: 999px;\n margin-bottom: 12px;\n }\n .fm-promo-tag span {\n background-color: var(--fm-orange);\n color: #FFFFFF;\n padding: 2px 8px;\n border-radius: 999px;\n font-size: 0.6875rem;\n }\n .fm-heading {\n font-family: var(--fm-font-serif);\n font-size: clamp(2rem, 3.8vw, 3.25rem);\n font-weight: 500;\n line-height: 1.1;\n margin: 0;\n color: var(--fm-ink);\n }\n .fm-heading em {\n font-style: italic;\n color: var(--fm-green);\n }\n .fm-trust-pills {\n display: flex;\n flex-wrap: wrap;\n gap: 10px;\n }\n .fm-trust-pill {\n background-color: var(--fm-bg-cream);\n color: var(--fm-bauhaus);\n font-size: 0.8125rem;\n font-weight: 600;\n padding: 8px 14px;\n border-radius: 999px;\n }\n\n \/* \u5e26\u5546\u54c1\u6570\u7684\u8d27\u67b6\u5206\u7c7b\u80f6\u56ca\u680f *\/\n .fm-aisle-bar {\n display: flex;\n gap: 12px;\n overflow-x: auto;\n padding-bottom: 12px;\n margin-bottom: 32px;\n }\n .fm-aisle-btn {\n display: inline-flex;\n align-items: center;\n gap: 10px;\n background-color: var(--fm-bg-lynx);\n color: var(--fm-ink);\n border: 1.5px solid transparent;\n padding: 12px 18px;\n border-radius: 16px;\n font-family: var(--fm-font-sans);\n font-size: 0.9375rem;\n font-weight: 600;\n white-space: nowrap;\n cursor: pointer;\n transition: all 0.2s ease;\n }\n .fm-aisle-btn:hover {\n border-color: var(--fm-green);\n }\n .fm-aisle-btn.is-active {\n background-color: var(--fm-green);\n color: #FFFFFF;\n }\n .fm-aisle-count {\n font-size: 0.75rem;\n font-weight: 700;\n padding: 2px 8px;\n border-radius: 999px;\n background-color: #FFFFFF;\n color: var(--fm-green);\n }\n .fm-aisle-btn.is-active .fm-aisle-count {\n background-color: var(--fm-lime);\n color: var(--fm-forest);\n }\n\n \/* 12 \u5217\u5546\u54c1\u8d27\u67b6\u7f51\u683c\uff08\u684c\u9762 4 \u5217\uff0c\u5e73\u677f 2 \u5217\uff0c\u624b\u673a 2 \u5217\u7d27\u51d1\u6a21\u5f0f\uff09 *\/\n .fm-product-grid {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 20px;\n }\n @media screen and (max-width: 1024px) {\n .fm-product-grid {\n grid-template-columns: repeat(3, 1fr);\n }\n }\n @media screen and (max-width: 768px) {\n .fm-product-grid {\n grid-template-columns: repeat(2, 1fr);\n gap: 12px;\n }\n }\n\n \/* \u5355\u5f20\u751f\u9c9c\/\u5feb\u6d88\u5546\u54c1\u5361 *\/\n .fm-card {\n background-color: var(--fm-bg-lynx);\n border: 1px solid var(--fm-border);\n border-radius: 20px;\n padding: 16px;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n position: relative;\n transition: transform 0.2s ease, box-shadow 0.2s ease;\n }\n .fm-card:hover {\n transform: translateY(-2px);\n box-shadow: 0 10px 24px rgba(22, 102, 75, 0.08);\n }\n .fm-card[hidden] {\n display: none !important;\n }\n\n \/* \u5361\u7247\u9876\u90e8\uff1a\u6298\u6263\u6a59\u8272\u6807\u7b7e + \u73b0\u8d27\u5e93\u5b58\u4f59\u91cf *\/\n .fm-card-top {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 8px;\n margin-bottom: 10px;\n }\n .fm-sale-badge {\n background-color: var(--fm-orange);\n color: #FFFFFF;\n font-size: 0.6875rem;\n font-weight: 700;\n padding: 3px 9px;\n border-radius: 999px;\n }\n .fm-stock-badge {\n font-size: 0.6875rem;\n font-weight: 600;\n color: var(--fm-green);\n background: rgba(22, 102, 75, 0.1);\n padding: 3px 9px;\n border-radius: 999px;\n margin-left: auto;\n }\n\n .fm-img-box {\n aspect-ratio: 4 \/ 3;\n background-color: #FFFFFF;\n border-radius: 14px;\n overflow: hidden;\n margin-bottom: 14px;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n .fm-img-box img {\n width: 100%;\n height: 100%;\n object-fit: contain;\n padding: 10px;\n box-sizing: border-box;\n }\n\n .fm-vendor {\n font-size: 0.75rem;\n color: var(--fm-bauhaus);\n margin: 0 0 4px;\n }\n .fm-item-title {\n font-size: 1.0625rem;\n font-weight: 700;\n margin: 0 0 4px;\n color: var(--fm-ink);\n }\n .fm-unit-spec {\n font-size: 0.8125rem;\n font-weight: 600;\n color: var(--fm-green);\n margin: 0 0 14px;\n }\n\n \/* \u5e95\u90e8\u4ef7\u683c\u4e0e\u539f\u5730\u53d8\u5f62\u52a0\u8d2d\u6b65\u8fdb\u5668 *\/\n .fm-card-footer {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 8px;\n padding-top: 12px;\n border-top: 1px solid var(--fm-border);\n }\n .fm-price-group {\n display: flex;\n flex-direction: column;\n }\n .fm-price-current {\n font-size: 1.125rem;\n font-weight: 700;\n color: var(--fm-ink);\n }\n .fm-price-compare {\n font-size: 0.75rem;\n color: #888888;\n text-decoration: line-through;\n }\n\n \/* \u72b6\u6001 A\uff1a\u672a\u52a0\u8d2d\u65f6\u7684\u63cf\u8fb9\u80f6\u56ca\u6309\u94ae (+ Add to Cart) *\/\n .fm-add-btn {\n background-color: #FFFFFF;\n color: var(--fm-green);\n border: 1.5px solid var(--fm-green);\n padding: 8px 14px;\n border-radius: 999px;\n font-size: 0.8125rem;\n font-weight: 700;\n cursor: pointer;\n transition: all 0.2s ease;\n }\n .fm-add-btn:hover {\n background-color: var(--fm-green);\n color: #FFFFFF;\n }\n\n \/* \u72b6\u6001 B\uff1a\u52a0\u8d2d\u540e\u539f\u5730\u53d8\u5f62\u4e3a\u6df1\u7eff\u692d\u5706\u6b65\u8fdb\u5668 (- 1 +) *\/\n .fm-stepper {\n display: none;\n align-items: center;\n background-color: var(--fm-green);\n color: #FFFFFF;\n border-radius: 999px;\n padding: 4px 6px;\n gap: 10px;\n }\n .fm-card.in-basket .fm-add-btn {\n display: none;\n }\n .fm-card.in-basket .fm-stepper {\n display: inline-flex;\n }\n .fm-step-btn {\n width: 26px;\n height: 26px;\n border-radius: 50%;\n border: none;\n background: rgba(255, 255, 255, 0.18);\n color: #FFFFFF;\n font-size: 1rem;\n font-weight: 700;\n line-height: 1;\n cursor: pointer;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n }\n .fm-step-btn:hover {\n background: var(--fm-lime);\n color: var(--fm-forest);\n }\n .fm-step-qty {\n font-size: 0.875rem;\n font-weight: 700;\n min-width: 18px;\n text-align: center;\n }\n\n \/* \u5e95\u90e8\u5b9e\u65f6\u51d1\u5355\u4e0e\u7701\u94b1\u7ed3\u7b97\u680f\uff08Basket full. Worry zero.\uff09 *\/\n .fm-basket-bar {\n margin-top: 32px;\n background-color: var(--fm-forest);\n color: #FFFFFF;\n border-radius: 20px;\n padding: 20px 28px;\n display: flex;\n flex-wrap: wrap;\n justify-content: space-between;\n align-items: center;\n gap: 20px;\n }\n .fm-saving-pill {\n display: inline-block;\n background-color: var(--fm-orange);\n color: #FFFFFF;\n font-size: 0.75rem;\n font-weight: 700;\n padding: 4px 10px;\n border-radius: 999px;\n margin-left: 8px;\n }\n .fm-checkout-btn {\n background-color: var(--fm-lime);\n color: var(--fm-forest);\n border: none;\n padding: 14px 28px;\n border-radius: 999px;\n font-size: 0.9375rem;\n font-weight: 700;\n cursor: pointer;\n transition: transform 0.2s ease;\n }\n .fm-checkout-btn:hover {\n transform: translateY(-1px);\n }\n<\/style>\n\n<section class="fm-sec-{{ section.id }}" data-section-id="{{ section.id }}">\n <div class="fm-container">\n <div class="fm-top-banner">\n <div>\n <div class="fm-promo-tag">\n <span>-10% FRESH DEALS<\/span>\n {{ section.settings.promo_text }}\n <\/div>\n <h2 class="fm-heading">\n {{ section.settings.heading_main }} <em>{{ section.settings.heading_italic }}<\/em>\n <\/h2>\n <\/div>\n <div class="fm-trust-pills">\n <span class="fm-trust-pill">\u26a1 Express Delivery < 60 Mins<\/span>\n <span class="fm-trust-pill">\ud83c\udf31 01 Harvest \u2192 04 Doorstep<\/span>\n <span class="fm-trust-pill">\ud83d\ude9a Free Delivery Over ${{ section.settings.free_shipping_threshold }}<\/span>\n <\/div>\n <\/div>\n\n {%- comment -%} \u5e26\u5546\u54c1\u8ba1\u6570\u7684\u516d\u5927\u8d27\u67b6\u80f6\u56ca\u5bfc\u822a {%- endcomment -%}\n <div class="fm-aisle-bar" role="tablist" aria-label="\u751f\u9c9c\u8d27\u67b6\u5206\u7c7b">\n <button type="button" class="fm-aisle-btn is-active" data-aisle="all">\n <span>All Fresh Picks<\/span>\n <span class="fm-aisle-count">{{ section.blocks.size }}<\/span>\n <\/button>\n <button type="button" class="fm-aisle-btn" data-aisle="vegetables">\n <span>\ud83e\udd6c Fresh Vegetables<\/span>\n <\/button>\n <button type="button" class="fm-aisle-btn" data-aisle="fruits">\n <span>\ud83c\udf53 Seasonal Fruits<\/span>\n <\/button>\n <button type="button" class="fm-aisle-btn" data-aisle="dairy">\n <span>\ud83e\udd5b Dairy & Eggs<\/span>\n <\/button>\n <button type="button" class="fm-aisle-btn" data-aisle="bakery">\n <span>\ud83e\udd50 Bakery & Pantry<\/span>\n <\/button>\n <\/div>\n\n <div class="fm-product-grid">\n {%- for block in section.blocks -%}\n {%- assign product = block.settings.product -%}\n {%- assign variant = product.selected_or_first_available_variant -%}\n <article\n class="fm-card {% if block.settings.default_qty > 0 %}in-basket{% endif %}"\n data-aisle-cat="{{ block.settings.aisle_category }}"\n data-variant-id="{{ variant.id }}"\n data-price="{{ block.settings.price_sale }}"\n data-compare="{{ block.settings.price_compare }}"\n data-qty="{{ block.settings.default_qty }}"\n {{ block.shopify_attributes }}\n >\n <div>\n <div class="fm-card-top">\n {%- if block.settings.sale_badge != blank -%}\n <span class="fm-sale-badge">{{ block.settings.sale_badge }}<\/span>\n {%- endif -%}\n <span class="fm-stock-badge">{{ block.settings.stock_label }}<\/span>\n <\/div>\n\n <div class="fm-img-box">\n {%- if block.settings.custom_image != blank -%}\n <img\n src="{{ block.settings.custom_image | image_url: width: 600 }}"\n alt="{{ block.settings.item_title | escape }}"\n width="600"\n height="450"\n loading="lazy"\n >\n {%- elsif product != blank and product.featured_image != blank -%}\n <img\n src="{{ product.featured_image | image_url: width: 600 }}"\n alt="{{ product.title | escape }}"\n width="600"\n height="450"\n loading="lazy"\n >\n {%- else -%}\n <span style="font-size:2.5rem;">{{ block.settings.emoji_placeholder }}<\/span>\n {%- endif -%}\n <\/div>\n\n <p class="fm-vendor">{{ block.settings.vendor_name }}<\/p>\n <h3 class="fm-item-title">{{ block.settings.item_title | default: product.title }}<\/h3>\n <p class="fm-unit-spec">{{ block.settings.unit_price_label }}<\/p>\n <\/div>\n\n <div class="fm-card-footer">\n <div class="fm-price-group">\n <span class="fm-price-current">${{ block.settings.price_sale }}<\/span>\n {%- if block.settings.price_compare != blank -%}\n <span class="fm-price-compare">${{ block.settings.price_compare }}<\/span>\n {%- endif -%}\n <\/div>\n\n <button type="button" class="fm-add-btn js-fm-add">+ Add to Cart<\/button>\n\n <div class="fm-stepper">\n <button type="button" class="fm-step-btn js-fm-minus" aria-label="\u51cf\u5c11\u6570\u91cf">\u2212<\/button>\n <span class="fm-step-qty js-fm-qty">{{ block.settings.default_qty }}<\/span>\n <button type="button" class="fm-step-btn js-fm-plus" aria-label="\u589e\u52a0\u6570\u91cf">+<\/button>\n <\/div>\n <\/div>\n <\/article>\n {%- endfor -%}\n <\/div>\n\n {%- comment -%} \u5e95\u90e8\u5b9e\u65f6\u51d1\u5355\u4e0e\u4f18\u60e0\u6c47\u603b\u680f {%- endcomment -%}\n <div class="fm-basket-bar">\n <div>\n <div style="font-size:0.75rem;text-transform:uppercase;letter-spacing:0.08em;color:var(--fm-lime);margin-bottom:4px;">\n BASKET FULL \u00b7 WORRY ZERO\n <\/div>\n <div style="font-size:1.125rem;font-weight:700;">\n <span id="FmBasketTotal-{{ section.id }}">\u5df2\u9009 0 \u4ef6 \u00b7 \u5408\u8ba1 $0.00<\/span>\n <span class="fm-saving-pill" id="FmSavingBadge-{{ section.id }}">Your saving: -$0.00<\/span>\n <\/div>\n <div style="font-size:0.8125rem;opacity:0.82;margin-top:4px;" id="FmFreeShipNote-{{ section.id }}"><\/div>\n <\/div>\n\n <button\n type="button"\n class="fm-checkout-btn"\n id="FmSyncCartBtn-{{ section.id }}"\n data-threshold="{{ section.settings.free_shipping_threshold }}"\n >\n Proceed to Fast Checkout \u2192\n <\/button>\n <\/div>\n <\/div>\n<\/section>\n\n<script>\n (function() {\n var sec = document.querySelector('.fm-sec-{{ section.id }}');\n if (!sec) return;\n\n var aisleBtns = sec.querySelectorAll('[data-aisle]');\n var cards = sec.querySelectorAll('.fm-card');\n var totalEl = sec.querySelector('#FmBasketTotal-{{ section.id }}');\n var savingEl = sec.querySelector('#FmSavingBadge-{{ section.id }}');\n var shipNoteEl = sec.querySelector('#FmFreeShipNote-{{ section.id }}');\n var syncBtn = sec.querySelector('#FmSyncCartBtn-{{ section.id }}');\n var freeThreshold = parseFloat(syncBtn.getAttribute('data-threshold') || '50');\n\n \/* \u8d27\u67b6\u5206\u7c7b\u7b5b\u9009 *\/\n aisleBtns.forEach(function(btn) {\n btn.addEventListener('click', function() {\n var cat = btn.getAttribute('data-aisle');\n aisleBtns.forEach(function(b) { b.classList.toggle('is-active', b === btn); });\n cards.forEach(function(c) {\n if (cat === 'all' || c.getAttribute('data-aisle-cat') === cat) {\n c.removeAttribute('hidden');\n } else {\n c.setAttribute('hidden', 'hidden');\n }\n });\n });\n });\n\n \/* \u91cd\u65b0\u8ba1\u7b97\u8d2d\u7269\u7bee\u603b\u4ef7\u3001\u5df2\u7701\u91d1\u989d\uff08Your saving\uff09\u4e0e\u514d\u90ae\u5dee\u989d *\/\n function recalcBasket() {\n var itemCount = 0;\n var subtotal = 0;\n var saved = 0;\n\n cards.forEach(function(card) {\n var qty = parseInt(card.getAttribute('data-qty') || '0', 10);\n var price = parseFloat(card.getAttribute('data-price') || '0');\n var compare = parseFloat(card.getAttribute('data-compare') || '0');\n if (qty > 0) {\n itemCount += qty;\n subtotal += price * qty;\n if (compare > price) {\n saved += (compare - price) * qty;\n }\n }\n });\n\n totalEl.textContent = '\u5df2\u9009 ' + itemCount + ' \u4ef6\u5546\u54c1 \u00b7 Subtotal: $' + subtotal.toFixed(2);\n savingEl.textContent = 'Your saving: -$' + saved.toFixed(2);\n\n if (subtotal >= freeThreshold) {\n shipNoteEl.textContent = '\ud83c\udf89 \u5df2\u6ee1 $' + freeThreshold.toFixed(0) + '\uff0c\u672c\u5355\u4eab\u514d\u8d39\u6781\u901f\u914d\u9001\uff08Free Express Delivery Unlocked\uff09\uff01';\n } else {\n var diff = (freeThreshold - subtotal).toFixed(2);\n shipNoteEl.textContent = '\u518d\u51d1 $' + diff + ' \u5373\u53ef\u89e3\u9501\u6ee1 $' + freeThreshold.toFixed(0) + ' \u514d\u8fd0\u8d39';\n }\n }\n\n \/* \u7ed1\u5b9a\u6bcf\u5f20\u5361\u7247\u7684\u539f\u5730\u53d8\u5f62\u6b65\u8fdb\u5668 (+ Add to Cart <-> - 1 +) *\/\n cards.forEach(function(card) {\n var addBtn = card.querySelector('.js-fm-add');\n var minusBtn = card.querySelector('.js-fm-minus');\n var plusBtn = card.querySelector('.js-fm-plus');\n var qtySpan = card.querySelector('.js-fm-qty');\n\n function setQty(newQty) {\n var q = Math.max(0, newQty);\n card.setAttribute('data-qty', String(q));\n qtySpan.textContent = String(q);\n card.classList.toggle('in-basket', q > 0);\n recalcBasket();\n }\n\n addBtn.addEventListener('click', function() { setQty(1); });\n plusBtn.addEventListener('click', function() {\n var cur = parseInt(card.getAttribute('data-qty') || '0', 10);\n setQty(cur + 1);\n });\n minusBtn.addEventListener('click', function() {\n var cur = parseInt(card.getAttribute('data-qty') || '0', 10);\n setQty(cur - 1);\n });\n });\n\n recalcBasket();\n\n \/* \u6279\u91cf\u5199\u5165 Shopify \u539f\u751f\u8d2d\u7269\u8f66 *\/\n syncBtn.addEventListener('click', function() {\n var items = [];\n cards.forEach(function(card) {\n var qty = parseInt(card.getAttribute('data-qty') || '0', 10);\n var variantId = card.getAttribute('data-variant-id');\n if (qty > 0 && variantId) {\n items.push({ id: Number(variantId), quantity: qty });\n }\n });\n if (items.length === 0) {\n window.location.href = '\/cart';\n return;\n }\n fetch(window.Shopify.routes.root + 'cart\/add.js', {\n method: 'POST',\n headers: { 'Content-Type': 'application\/json' },\n body: JSON.stringify({ items: items })\n }).then(function() {\n window.location.href = '\/checkout';\n });\n });\n })();\n<\/script>\n\n{% schema %}\n{\n "name": "Freshmart \u5feb\u6d88\u6b65\u8fdb\u51d1\u5355\u8d27\u67b6",\n "tag": "section",\n "settings": [\n {\n "type": "text",\n "id": "promo_text",\n "label": "\u9876\u90e8\u4fc3\u9500\u6761\u6587\u5b57",\n "default": "Get our best picks every Thursday \u00b7 New Here? Enjoy 10% OFF Your First Order"\n },\n {\n "type": "text",\n "id": "heading_main",\n "label": "\u4e3b\u6807\u9898\u524d\u6bb5",\n "default": "Everything Fresh,"\n },\n {\n "type": "text",\n "id": "heading_italic",\n "label": "\u4e3b\u6807\u9898\u659c\u4f53\u90e8\u5206",\n "default": "All in One Place."\n },\n {\n "type": "number",\n "id": "free_shipping_threshold",\n "label": "\u514d\u8fd0\u8d39\u95e8\u69db\u91d1\u989d ($)",\n "default": 50\n },\n {\n "type": "range",\n "id": "padding_top",\n "min": 24,\n "max": 120,\n "step": 4,\n "unit": "px",\n "label": "\u9876\u90e8\u5185\u8fb9\u8ddd",\n "default": 56\n },\n {\n "type": "range",\n "id": "padding_bottom",\n "min": 24,\n "max": 120,\n "step": 4,\n "unit": "px",\n "label": "\u5e95\u90e8\u5185\u8fb9\u8ddd",\n "default": 56\n }\n ],\n "blocks": [\n {\n "type": "grocery_item",\n "name": "\u5feb\u6d88\/\u751f\u9c9c\u5355\u54c1\u5361",\n "settings": [\n {\n "type": "product",\n "id": "product",\n "label": "\u5173\u8054 Shopify \u5546\u54c1"\n },\n {\n "type": "select",\n "id": "aisle_category",\n "label": "\u6240\u5c5e\u8d27\u67b6\u5206\u7c7b",\n "options": [\n { "value": "vegetables", "label": "Fresh Vegetables\uff08\u9c9c\u852c\uff09" },\n { "value": "fruits", "label": "Seasonal Fruits\uff08\u6c34\u679c\uff09" },\n { "value": "dairy", "label": "Dairy & Eggs\uff08\u4e73\u54c1\u86cb\u7c7b\uff09" },\n { "value": "bakery", "label": "Bakery & Pantry\uff08\u70d8\u7119\u7cae\u6cb9\uff09" }\n ],\n "default": "vegetables"\n },\n {\n "type": "image_picker",\n "id": "custom_image",\n "label": "\u81ea\u5b9a\u4e49\u5546\u54c1\u53bb\u5e95\u56fe"\n },\n {\n "type": "text",\n "id": "emoji_placeholder",\n "label": "\u672a\u4f20\u56fe\u65f6\u7684\u5360\u4f4d\u56fe\u6807",\n "default": "\ud83c\udf45"\n },\n {\n "type": "text",\n "id": "sale_badge",\n "label": "\u5de6\u4e0a\u89d2\u6a59\u8272\u4fc3\u9500\u6807\u7b7e",\n "default": "-20% Deal"\n },\n {\n "type": "text",\n "id": "stock_label",\n "label": "\u53f3\u4e0a\u89d2\u5e93\u5b58\u4f59\u91cf\u6807\u7b7e",\n "default": "In stock (100 Kg)"\n },\n {\n "type": "text",\n "id": "vendor_name",\n "label": "\u8d27\u6e90\/\u519c\u573a\u6807\u7b7e",\n "default": "Local Farmers"\n },\n {\n "type": "text",\n "id": "item_title",\n "label": "\u5546\u54c1\u540d\u79f0",\n "default": "Organic Red Tomatoes"\n },\n {\n "type": "text",\n "id": "unit_price_label",\n "label": "\u5355\u4f4d\u6362\u7b97\u5355\u4ef7\u8bf4\u660e",\n "default": "$1.33 \/ per kg \u00b7 1kg Pack"\n },\n {\n "type": "text",\n "id": "price_sale",\n "label": "\u5f53\u524d\u552e\u4ef7 ($)",\n "default": "16.00"\n },\n {\n "type": "text",\n "id": "price_compare",\n "label": "\u539f\u4ef7 ($\uff0c\u7528\u4e8e\u8ba1\u7b97 Your saving)",\n "default": "20.00"\n },\n {\n "type": "number",\n "id": "default_qty",\n "label": "\u9ed8\u8ba4\u6f14\u793a\u52a0\u8d2d\u6570\u91cf",\n "default": 1\n }\n ]\n }\n ],\n "presets": [\n {\n "name": "Freshmart \u5feb\u6d88\u6b65\u8fdb\u51d1\u5355\u8d27\u67b6",\n "blocks": [\n {\n "type": "grocery_item",\n "settings": {\n "aisle_category": "vegetables",\n "emoji_placeholder": "\ud83c\udf45",\n "sale_badge": "-20% Deal",\n "stock_label": "In stock (100 Kg)",\n "vendor_name": "Local Farmers",\n "item_title": "Organic Red Tomatoes (Vine Pack)",\n "unit_price_label": "$1.33 \/ per kg \u00b7 01 kg",\n "price_sale": "16.00",\n "price_compare": "20.00",\n "default_qty": 1\n }\n },\n {\n "type": "grocery_item",\n "settings": {\n "aisle_category": "dairy",\n "emoji_placeholder": "\ud83e\udd5a",\n "sale_badge": "-20% Deal",\n "stock_label": "In stock (80 Boxes)",\n "vendor_name": "Local Farmers",\n "item_title": "Pasture-Raised Farm Eggs",\n "unit_price_label": "$4.80 \/ per 12 pcs \u00b7 Family Pack",\n "price_sale": "16.00",\n "price_compare": "20.00",\n "default_qty": 1\n }\n },\n {\n "type": "grocery_item",\n "settings": {\n "aisle_category": "fruits",\n "emoji_placeholder": "\ud83c\udf47",\n "sale_badge": "Peak Quality",\n "stock_label": "In stock (65 Kg)",\n "vendor_name": "Local Farmers",\n "item_title": "Seedless Green Grapes",\n "unit_price_label": "$1.60 \/ per 100g \u00b7 1kg Box",\n "price_sale": "16.00",\n "price_compare": "20.00",\n "default_qty": 1\n }\n },\n {\n "type": "grocery_item",\n "settings": {\n "aisle_category": "dairy",\n "emoji_placeholder": "\ud83e\udd5b",\n "sale_badge": "Daily Essential",\n "stock_label": "In stock (42 Bottles)",\n "vendor_name": "Local Farmers",\n "item_title": "Glass-Bottled Whole Milk & Greek Yoghurt",\n "unit_price_label": "$3.20 \/ per 1L \u00b7 Chilled Tote",\n "price_sale": "12.00",\n "price_compare": "15.00",\n "default_qty": 0\n }\n }\n ]\n }\n ]\n}\n{% endschema %}\n<\/code><\/pre>\n<\/details>\nSources: Freshmart on Behance<\/a>, Shopify unit pricing<\/a>, Liquid unit price filter<\/a> and Ajax Cart API<\/a>.<\/p>","protected":false},"excerpt":{"rendered":"A Freshmart grocery design study on unit prices, aisle navigation, quantity controls, and the Shopify Ajax Cart.<\/p>","protected":false},"author":1,"featured_media":10975,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[259,4],"class_list":["post-10982","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-shopify-dtc","tag-api","tag-shopify"],"yoast_head":"\n
How a Shopify grocery store can turn its product list into a shopping aisle<\/title>\n<meta name=\"description\" content=\"How a Shopify grocery store can turn its product list into a shopping aisle\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.weswoo.com\/en\/freshmart-shopify-grocery\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How a Shopify grocery store can turn its product list into a shopping aisle\" \/>\n<meta property=\"og:description\" content=\"WESWOO\u2014\u8de8\u5883\u7535\u5546\u72ec\u7acb\u7ad9\u4e13\u5bb6\uff0c\u63d0\u4f9bshopify liquid\u4e13\u4e1a\u5f00\u53d1\u65b9\u6848 - Shopify Plus\u5408\u4f5c\u4f19\u4f34 - \u897f\u897f\u6728\uff08\u5e7f\u5dde\uff09\u79d1\u6280\u6709\u9650\u8d23\u4efb\u516c\u53f8\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.weswoo.com\/en\/freshmart-shopify-grocery\/\" \/>\n<meta property=\"og:site_name\" content=\"Shopify Plus & \u72ec\u7acb\u7ad9\u5f00\u53d1\uff5c\u8de8\u5883\u7535\u5546\u5b9a\u5236\u65b9\u6848 - WESWOO\" \/>\n<meta property=\"article:published_time\" content=\"2026-11-10T11:24:22+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.weswoo.com\/wp-content\/uploads\/2026\/11\/fm-01-hero.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"720\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"weswoo\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"weswoo\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"17 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.weswoo.com\/en\/freshmart-shopify-grocery\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.weswoo.com\/en\/freshmart-shopify-grocery\/\"},\"author\":{\"name\":\"weswoo\",\"@id\":\"https:\/\/www.weswoo.com\/en\/#\/schema\/person\/bc9a01c6d3445dbdfb68e96ee00f9642\"},\"headline\":\"How a Shopify grocery store can turn its product list into a shopping aisle\",\"datePublished\":\"2026-11-10T11:24:22+00:00\",\"dateModified\":\"2026-11-10T11:24:22+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.weswoo.com\/en\/freshmart-shopify-grocery\/\"},\"wordCount\":342,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.weswoo.com\/en\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.weswoo.com\/en\/freshmart-shopify-grocery\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.weswoo.com\/wp-content\/uploads\/2026\/11\/fm-01-hero.jpg\",\"keywords\":[\"API\",\"Shopify\"],\"articleSection\":[\"Shopify\u72ec\u7acb\u7ad9\u6307\u5357\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.weswoo.com\/en\/freshmart-shopify-grocery\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.weswoo.com\/en\/freshmart-shopify-grocery\/\",\"url\":\"https:\/\/www.weswoo.com\/en\/freshmart-shopify-grocery\/\",\"name\":\"How a Shopify grocery store can turn its product list into a shopping aisle\",\"isPartOf\":{\"@id\":\"https:\/\/www.weswoo.com\/en\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.weswoo.com\/en\/freshmart-shopify-grocery\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.weswoo.com\/en\/freshmart-shopify-grocery\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.weswoo.com\/wp-content\/uploads\/2026\/11\/fm-01-hero.jpg\",\"datePublished\":\"2026-11-10T11:24:22+00:00\",\"dateModified\":\"2026-11-10T11:24:22+00:00\",\"description\":\"How a Shopify grocery store can turn its product list into a shopping aisle\",\"breadcrumb\":{\"@id\":\"https:\/\/www.weswoo.com\/en\/freshmart-shopify-grocery\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.weswoo.com\/en\/freshmart-shopify-grocery\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.weswoo.com\/en\/freshmart-shopify-grocery\/#primaryimage\",\"url\":\"https:\/\/www.weswoo.com\/wp-content\/uploads\/2026\/11\/fm-01-hero.jpg\",\"contentUrl\":\"https:\/\/www.weswoo.com\/wp-content\/uploads\/2026\/11\/fm-01-hero.jpg\",\"width\":1280,\"height\":720,\"caption\":\"Freshmart \u684c\u9762\u9996\u5c4f\uff0c\u679c\u852c\u5546\u54c1\u5361\u4e0b\u65b9\u662f\u4e94\u4e2a\u5feb\u6377\u5165\u53e3 \u00b7 Orbix Studio \/ Behance\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.weswoo.com\/en\/freshmart-shopify-grocery\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/www.weswoo.com\/cn\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How a Shopify grocery store can turn its product list into a shopping aisle\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.weswoo.com\/en\/#website\",\"url\":\"https:\/\/www.weswoo.com\/en\/\",\"name\":\"WESWOO\",\"description\":\"WESWOO \u4e13\u6ce8 Shopify Plus \u4e0e\u72ec\u7acb\u7ad9\u5b9a\u5236\u5f00\u53d1\uff0c\u63d0\u4f9b\u9ad8\u6027\u80fd\u7535\u5546\u7f51\u7ad9\u5efa\u8bbe\u3001\u8de8\u5883\u8fd0\u8425\u652f\u6301\u3001B2B \u53ca\u591a\u6e20\u9053\u96c6\u6210\uff0c\u52a9\u529b\u54c1\u724c\u5168\u7403\u589e\u957f\u3002\",\"publisher\":{\"@id\":\"https:\/\/www.weswoo.com\/en\/#organization\"},\"alternateName\":\"WESWOO.COM\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.weswoo.com\/en\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.weswoo.com\/en\/#organization\",\"name\":\"WESWOO\",\"alternateName\":[\"WESWOO - Shopify Premier Partner\",\"\u897f\u897f\u6728\uff08\u6df1\u5733\uff09\u79d1\u6280\u6709\u9650\u8d23\u4efb\u516c\u53f8\",\"Xiximu (Shenzhen) Technology Co., Ltd.\"],\"url\":\"https:\/\/www.weswoo.com\/en\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.weswoo.com\/en\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.weswoo.com\/wp-content\/uploads\/2025\/08\/fulllogo.png\",\"contentUrl\":\"https:\/\/www.weswoo.com\/wp-content\/uploads\/2025\/08\/fulllogo.png\",\"width\":1280,\"height\":1024,\"caption\":\"WESWOO \u2014 Shopify cross-border ecommerce development specialist\"},\"image\":{\"@id\":\"https:\/\/www.weswoo.com\/en\/#\/schema\/logo\/image\/\"},\"description\":\"WESWOO is a Shopify Premier Partner providing Shopify theme and Shopify Plus development, B2B, Headless, data integration, and long-term technical support.\",\"email\":\"info@weswoo.com\",\"telephone\":\"+86 18688202145\",\"legalName\":\"\u897f\u897f\u6728\uff08\u6df1\u5733\uff09\u79d1\u6280\u6709\u9650\u8d23\u4efb\u516c\u53f8\",\"foundingDate\":\"2021-04-26\",\"numberOfEmployees\":{\"@type\":\"QuantitativeValue\",\"minValue\":\"11\",\"maxValue\":\"50\"},\"address\":[{\"@type\":\"PostalAddress\",\"streetAddress\":\"\u9999\u6e2f\u4e5d\u9f99\u65fa\u89d2\u5f25\u6566\u9053610\u53f7\u8377\u674e\u6d3b\u5546\u4e1a\u4e2d\u5fc318\u697c1805-06\u5ba4\",\"addressLocality\":\"\u9999\u6e2f\",\"addressCountry\":\"HK\"},{\"@type\":\"PostalAddress\",\"streetAddress\":\"\u6df1\u5733\u5e02\u5b9d\u5b89\u533a\u897f\u4e61\u8857\u9053\u5171\u4e50\u793e\u533a\u94c1\u4ed4\u8def60\u53f7\u594b\u6210\u667a\u8c37\u5927\u53a6B\u5ea72001A\",\"addressLocality\":\"\u6df1\u5733\u5e02\",\"addressRegion\":\"\u5e7f\u4e1c\u7701\",\"addressCountry\":\"CN\"}],\"sameAs\":[\"https:\/\/www.shopify.com\/partners\/directory\/partner\/10395\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.weswoo.com\/en\/#\/schema\/person\/bc9a01c6d3445dbdfb68e96ee00f9642\",\"name\":\"weswoo\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.weswoo.com\/en\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/60152bb1145c677a6b80dd2db1d761f279c3db9d602631e4f31f40a5ffd5ba44?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/60152bb1145c677a6b80dd2db1d761f279c3db9d602631e4f31f40a5ffd5ba44?s=96&d=mm&r=g\",\"caption\":\"weswoo\"},\"description\":\"WESWOO \u7f51\u7ad9\u5185\u5bb9\u53d1\u5e03\u8d26\u53f7\uff0c\u53d1\u5e03 Shopify \u72ec\u7acb\u7ad9\u5efa\u8bbe\u3001\u4e3b\u9898\u5f00\u53d1\u3001\u7cfb\u7edf\u96c6\u6210\u4e0e\u8de8\u5883\u8fd0\u8425\u76f8\u5173\u6587\u7ae0\u3002\",\"sameAs\":[\"https:\/\/weswoo.com\"],\"url\":\"https:\/\/www.weswoo.com\/en\/author\/weswoo\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How a Shopify grocery store can turn its product list into a shopping aisle","description":"How a Shopify grocery store can turn its product list into a shopping aisle","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.weswoo.com\/en\/freshmart-shopify-grocery\/","og_locale":"en_US","og_type":"article","og_title":"How a Shopify grocery store can turn its product list into a shopping aisle","og_description":"WESWOO\u2014\u8de8\u5883\u7535\u5546\u72ec\u7acb\u7ad9\u4e13\u5bb6\uff0c\u63d0\u4f9bshopify liquid\u4e13\u4e1a\u5f00\u53d1\u65b9\u6848 - Shopify Plus\u5408\u4f5c\u4f19\u4f34 - \u897f\u897f\u6728\uff08\u5e7f\u5dde\uff09\u79d1\u6280\u6709\u9650\u8d23\u4efb\u516c\u53f8","og_url":"https:\/\/www.weswoo.com\/en\/freshmart-shopify-grocery\/","og_site_name":"Shopify Plus & \u72ec\u7acb\u7ad9\u5f00\u53d1\uff5c\u8de8\u5883\u7535\u5546\u5b9a\u5236\u65b9\u6848 - WESWOO","article_published_time":"2026-11-10T11:24:22+00:00","og_image":[{"width":1280,"height":720,"url":"https:\/\/www.weswoo.com\/wp-content\/uploads\/2026\/11\/fm-01-hero.jpg","type":"image\/jpeg"}],"author":"weswoo","twitter_card":"summary_large_image","twitter_misc":{"Written by":"weswoo","Est. reading time":"17 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.weswoo.com\/en\/freshmart-shopify-grocery\/#article","isPartOf":{"@id":"https:\/\/www.weswoo.com\/en\/freshmart-shopify-grocery\/"},"author":{"name":"weswoo","@id":"https:\/\/www.weswoo.com\/en\/#\/schema\/person\/bc9a01c6d3445dbdfb68e96ee00f9642"},"headline":"How a Shopify grocery store can turn its product list into a shopping aisle","datePublished":"2026-11-10T11:24:22+00:00","dateModified":"2026-11-10T11:24:22+00:00","mainEntityOfPage":{"@id":"https:\/\/www.weswoo.com\/en\/freshmart-shopify-grocery\/"},"wordCount":342,"commentCount":0,"publisher":{"@id":"https:\/\/www.weswoo.com\/en\/#organization"},"image":{"@id":"https:\/\/www.weswoo.com\/en\/freshmart-shopify-grocery\/#primaryimage"},"thumbnailUrl":"https:\/\/www.weswoo.com\/wp-content\/uploads\/2026\/11\/fm-01-hero.jpg","keywords":["API","Shopify"],"articleSection":["Shopify\u72ec\u7acb\u7ad9\u6307\u5357"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.weswoo.com\/en\/freshmart-shopify-grocery\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.weswoo.com\/en\/freshmart-shopify-grocery\/","url":"https:\/\/www.weswoo.com\/en\/freshmart-shopify-grocery\/","name":"How a Shopify grocery store can turn its product list into a shopping aisle","isPartOf":{"@id":"https:\/\/www.weswoo.com\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.weswoo.com\/en\/freshmart-shopify-grocery\/#primaryimage"},"image":{"@id":"https:\/\/www.weswoo.com\/en\/freshmart-shopify-grocery\/#primaryimage"},"thumbnailUrl":"https:\/\/www.weswoo.com\/wp-content\/uploads\/2026\/11\/fm-01-hero.jpg","datePublished":"2026-11-10T11:24:22+00:00","dateModified":"2026-11-10T11:24:22+00:00","description":"How a Shopify grocery store can turn its product list into a shopping aisle","breadcrumb":{"@id":"https:\/\/www.weswoo.com\/en\/freshmart-shopify-grocery\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.weswoo.com\/en\/freshmart-shopify-grocery\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.weswoo.com\/en\/freshmart-shopify-grocery\/#primaryimage","url":"https:\/\/www.weswoo.com\/wp-content\/uploads\/2026\/11\/fm-01-hero.jpg","contentUrl":"https:\/\/www.weswoo.com\/wp-content\/uploads\/2026\/11\/fm-01-hero.jpg","width":1280,"height":720,"caption":"Freshmart \u684c\u9762\u9996\u5c4f\uff0c\u679c\u852c\u5546\u54c1\u5361\u4e0b\u65b9\u662f\u4e94\u4e2a\u5feb\u6377\u5165\u53e3 \u00b7 Orbix Studio \/ Behance"},{"@type":"BreadcrumbList","@id":"https:\/\/www.weswoo.com\/en\/freshmart-shopify-grocery\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/www.weswoo.com\/cn\/"},{"@type":"ListItem","position":2,"name":"How a Shopify grocery store can turn its product list into a shopping aisle"}]},{"@type":"WebSite","@id":"https:\/\/www.weswoo.com\/en\/#website","url":"https:\/\/www.weswoo.com\/en\/","name":"WESWOO","description":"WESWOO specializes in Shopify Plus and standalone custom development, providing high-performance e-commerce website development, cross-border operations support, B2B and multi-channel integration to help brands grow globally.","publisher":{"@id":"https:\/\/www.weswoo.com\/en\/#organization"},"alternateName":"WESWOO.COM","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.weswoo.com\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.weswoo.com\/en\/#organization","name":"WESWOO","alternateName":["WESWOO - Shopify Premier Partner","\u897f\u897f\u6728\uff08\u6df1\u5733\uff09\u79d1\u6280\u6709\u9650\u8d23\u4efb\u516c\u53f8","Xiximu (Shenzhen) Technology Co., Ltd."],"url":"https:\/\/www.weswoo.com\/en\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.weswoo.com\/en\/#\/schema\/logo\/image\/","url":"https:\/\/www.weswoo.com\/wp-content\/uploads\/2025\/08\/fulllogo.png","contentUrl":"https:\/\/www.weswoo.com\/wp-content\/uploads\/2025\/08\/fulllogo.png","width":1280,"height":1024,"caption":"WESWOO \u2014 Shopify cross-border ecommerce development specialist"},"image":{"@id":"https:\/\/www.weswoo.com\/en\/#\/schema\/logo\/image\/"},"description":"WESWOO is a Shopify Premier Partner providing Shopify theme and Shopify Plus development, B2B, Headless, data integration, and long-term technical support.","email":"info@weswoo.com","telephone":"+86 18688202145","legalName":"\u897f\u897f\u6728\uff08\u6df1\u5733\uff09\u79d1\u6280\u6709\u9650\u8d23\u4efb\u516c\u53f8","foundingDate":"2021-04-26","numberOfEmployees":{"@type":"QuantitativeValue","minValue":"11","maxValue":"50"},"address":[{"@type":"PostalAddress","streetAddress":"\u9999\u6e2f\u4e5d\u9f99\u65fa\u89d2\u5f25\u6566\u9053610\u53f7\u8377\u674e\u6d3b\u5546\u4e1a\u4e2d\u5fc318\u697c1805-06\u5ba4","addressLocality":"\u9999\u6e2f","addressCountry":"HK"},{"@type":"PostalAddress","streetAddress":"\u6df1\u5733\u5e02\u5b9d\u5b89\u533a\u897f\u4e61\u8857\u9053\u5171\u4e50\u793e\u533a\u94c1\u4ed4\u8def60\u53f7\u594b\u6210\u667a\u8c37\u5927\u53a6B\u5ea72001A","addressLocality":"\u6df1\u5733\u5e02","addressRegion":"\u5e7f\u4e1c\u7701","addressCountry":"CN"}],"sameAs":["https:\/\/www.shopify.com\/partners\/directory\/partner\/10395"]},{"@type":"Person","@id":"https:\/\/www.weswoo.com\/en\/#\/schema\/person\/bc9a01c6d3445dbdfb68e96ee00f9642","name":"weswoo","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.weswoo.com\/en\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/60152bb1145c677a6b80dd2db1d761f279c3db9d602631e4f31f40a5ffd5ba44?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/60152bb1145c677a6b80dd2db1d761f279c3db9d602631e4f31f40a5ffd5ba44?s=96&d=mm&r=g","caption":"weswoo"},"description":"WESWOO \u7f51\u7ad9\u5185\u5bb9\u53d1\u5e03\u8d26\u53f7\uff0c\u53d1\u5e03 Shopify \u72ec\u7acb\u7ad9\u5efa\u8bbe\u3001\u4e3b\u9898\u5f00\u53d1\u3001\u7cfb\u7edf\u96c6\u6210\u4e0e\u8de8\u5883\u8fd0\u8425\u76f8\u5173\u6587\u7ae0\u3002","sameAs":["https:\/\/weswoo.com"],"url":"https:\/\/www.weswoo.com\/en\/author\/weswoo\/"}]}},"_links":{"self":[{"href":"https:\/\/www.weswoo.com\/en\/wp-json\/wp\/v2\/posts\/10982","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.weswoo.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.weswoo.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.weswoo.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.weswoo.com\/en\/wp-json\/wp\/v2\/comments?post=10982"}],"version-history":[{"count":0,"href":"https:\/\/www.weswoo.com\/en\/wp-json\/wp\/v2\/posts\/10982\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.weswoo.com\/en\/wp-json\/wp\/v2\/media\/10975"}],"wp:attachment":[{"href":"https:\/\/www.weswoo.com\/en\/wp-json\/wp\/v2\/media?parent=10982"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.weswoo.com\/en\/wp-json\/wp\/v2\/categories?post=10982"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.weswoo.com\/en\/wp-json\/wp\/v2\/tags?post=10982"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}