Metafield Sync
Metafield sync writes bundle configuration data directly to Shopify collections, products, and variants as metafields. This lets the storefront widget render instantly using data already available in the Liquid template, without waiting for an API call.
What You'll Learn
- Collection Metafields — how syncing bundle data to collections enables instant widget rendering on collection pages.
- Product & Variant Metafields — how syncing product and variant data provides extended information (descriptions, tags, inventory) to the widget without additional API calls.
bundle-widget.liquid
liquid
1{% comment %}2Example: reading synced metafields for a bundle widget3{% endcomment %}4 5{%- assign bundle_config = product.metafields.bundle.config -%}6{%- assign bundle_inventory = product.metafields.bundle.inventory -%}7 8{%- if bundle_config -%}9 <div class="bundle-widget" data-bundle-id="{{ bundle_config.id }}">10 <h3>{{ bundle_config.title }}</h3>11 <p>{{ bundle_config.description }}</p>12 13 {%- for item in bundle_config.items -%}14 <div class="bundle-item">15 <span class="bundle-item__title">{{ item.title }}</span>16 <span class="bundle-item__quantity">x{{ item.quantity }}</span>17 </div>18 {%- endfor -%}19 20 {%- if bundle_inventory -%}21 <p class="bundle-inventory">In stock: {{ bundle_inventory.total_available }}</p>22 {%- endif -%}23 </div>24{%- endif -%}