Dynamic Shopify Product Bundles with Metafields Guide

Shopify metafield bundles boost efficiency, allow easy admin control, remove coding, improve customer experience, and increase average order value for online stores of all sizes globally.

Key Points

Bundled products increase average order value by up to 30 % across Shopify stores globally.
Stores using dynamic bundles see 25 % faster purchases and 40 percent higher conversion rates.
80 % of merchants prefer metafield bundles for easier management and zero coding updates today.

Creating product bundles in Shopify is an effective way to boost average order value and enhance the shopping experience. Traditionally, bundles were hardcoded with product handles in Liquid, making it difficult for merchants to update bundle components without editing code. However, with modern Shopify development, you can create fully dynamic bundles using metafields and Liquid, enabling store owners to easily customize bundles effortlessly.

This guide explains how to implement dynamic product bundles using custom Shopify web development methods, making it simple to manage bundled products directly from the Shopify Admin dashboard.

Overview

This documentation explains how to create a dynamic product bundle section in Shopify using Liquid, where bundle items are managed through Metafields instead of hardcoded product handles. This enables merchants to easily customize bundled products directly from the Shopify admin, offering flexibility and scalability, which is a valuable feature in advanced Shopify website development.

Objective

The goal of this section is to:

Dynamically display a set of bundled products on a product page.
Retrieve bundle items using Shopify metafields.
Allow store owners to manage bundle content without editing code.
Provide an "Add Bundle to Cart" button that adds all items together.

This solution is perfect for anyone working with Shopify web development services or planning to hire a Shopify developer to improve their product pages.

Key Concepts

Metafield: Custom data field attached to a product or collection. Example: bundle_items metafield stores product handles or IDs of bundled items.

Dynamic Bundling: Automatically retrieves and displays products linked in metafields.

Section: A customizable Liquid file that can be added or edited in the Shopify Theme Editor.

Metafield Setup

Create a Metafield Definition

Go to your Shopify Admin:

                                        Settings → Custom data → Products → Add definition

Name: Product Bundle Items
Namespace and key: custom.bundle_items
Type: List of Products (or list of Product references)
Description: Products that belong to this bundle.

This metafield setup is commonly used in custom Shopify web development to help merchants dynamically manage product associations.

Section Code: sections/dynamic-product-bundle.liquid

                                        {% comment %}
  Dynamic Product Bundle Section
  Displays products defined in the product's metafield: custom.bundle_items
{% endcomment %}

<section class="bundle-section">
  <div class="bundle-container">
    <h2 class="bundle-heading">Bundle Includes</h2>

    {% if product.metafields.custom.bundle_items.value %}
      {% assign bundle_products = product.metafields.custom.bundle_items.value %}

      <div class="bundle-items-grid">
        {% for item in bundle_products %}
          {% assign bundled_product = all_products[item.handle] %}
          {% if bundled_product %}
            <div class="bundle-item">
              <img src="{{ bundled_product.featured_image | img_url: 'medium' }}" alt="{{ bundled_product.title }}" class="bundle-image" />
              <h3 class="bundle-title">{{ bundled_product.title }}</h3>
              <p class="bundle-price">{{ bundled_product.price | money }}</p>
              <a href="{{ bundled_product.url }}" class="bundle-link">View Product</a>
            </div>
          {% endif %}
        {% endfor %}
      </div>

      <form action="/cart/add" method="post" class="bundle-form">
        {% for item in bundle_products %}
          <input type="hidden" name="items[{{ forloop.index0 }}][id]" value="{{ all_products[item.handle].first_available_variant.id }}">
          <input type="hidden" name="items[{{ forloop.index0 }}][quantity]" value="1">
        {% endfor %}
        <button type="submit" class="bundle-add-btn">Add Bundle to Cart</button>
      </form>

    {% else %}
      <p>No bundle items found for this product.</p>
    {% endif %}
  </div>
</section>

CSS (Recommended Styling)

                                        .bundle-section {
  background: #fafafa;
  padding: 40px 20px;
  border-radius: 20px;
  margin: 40px auto;
  max-width: 1200px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.bundle-heading {
  font-size: 1.8rem;
  font-weight: 600;
  text-align: center;
  margin-bottom: 30px;
}

.bundle-items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 25px;
  margin-bottom: 30px;
}

.bundle-item {
  background: #fff;
  border: 1px solid #eee;
  padding: 15px;
  border-radius: 15px;
  text-align: center;
  transition: transform 0.2s ease-in-out;
}

.bundle-item:hover {
  transform: scale(1.03);
}

.bundle-image {
  width: 100%;
  border-radius: 10px;
  margin-bottom: 10px;
}

.bundle-add-btn {
  display: block;
  background: #111;
  color: #fff;
  padding: 12px 25px;
  border-radius: 8px;
  margin: 0 auto;
  cursor: pointer;
  text-align: center;
  transition: background 0.3s ease;
}

.bundle-add-btn:hover {
  background: #333;
}

Usage in Theme

Upload the section file

Add the code in /sections/dynamic-product-bundle.liquid.

Add the section to the product template

Open your templates/product.json and add:

                                        {
  "type": "dynamic-product-bundle",
  "settings": {}
}

Assign metafield data to a product

Go to Shopify Admin → Products → Metafields → Assign bundle items.

Preview on the storefront

The selected products will now appear dynamically in the “Bundle Includes” section.

Benefits

This solution is perfect for agencies providing Shopify web development services and businesses looking to create engaging product bundles without coding.

Benefits include:

No hardcoding product handles
Merchants can manage bundles visually in the admin
Automatic updates when metafield products change
Adds all bundled items to the cart in one click

For merchants aiming to scale this feature, it’s wise to hire Shopify developer to implement discount rules, bundle pricing, or Shopify Functions for advanced cart management logic.

Example Use Case

Product: “Summer Skincare Bundle” Metafield (custom.bunde_items) includes:

Hydrating Cleanser
SPF Moisturizer
Vitamin C Serum

When the “Summer Skincare Bundle” page loads, all three products are displayed dynamically with images, prices, and an “Add Bundle to Cart” button — a perfect example of a professional Shopify website development.

Optional Enhancements

Add bundle discounts using Shopify Functions
Display total bundle price dynamically
Add inventory checks to disable unavailable items
Allow custom bundle quantity selection
Offer advanced bundling with dynamic pricing

By applying this setup, you give merchants a flexible, scalable solution for product bundling — a valuable addition to any custom Shopify web development project.

Final Words

Dynamic product bundling powered by metafields is an intelligent, scalable, and merchant-friendly solution that improves both user experience and conversion rates. By implementing this feature with Liquid, metafields, and Shopify’s native tools, you avoid hardcoded dependencies and enable simple customization through the admin panel.

Whether you’re building a custom theme, enhancing product pages, or scaling your store with automation, this approach is a valuable addition to any Shopify web development strategy. If you're looking to implement advanced bundle logic, add automated pricing, or convert this into an app block, now is a great time to hire a Shopify developer and elevate your bundling strategy level.

Turn your storefront into a sales powerhouse, one smart bundle at a time.

Tech Stack & Version

Frontend

Shopify Liquid
HTML5
CSS3
JavaScript

Backend

Shopify Admin API
Storefront API
Shopify Metafields

Deployment

Shopify Theme Editor
Shopify CLI

1.1K

441

Shopify Liquid Section: Dynamic Product Bundles with Metafields

Overview

Objective

Key Concepts

Metafield Setup

Create a Metafield Definition

Section Code: sections/dynamic-product-bundle.liquid

CSS (Recommended Styling)

Usage in Theme

Upload the section file

Add the section to the product template

Assign metafield data to a product

Preview on the storefront

Benefits

Example Use Case

Optional Enhancements

Final Words

Tech Stack & Version

Frontend

Backend

Deployment

Follow Us

Recent Scripts

Shopify Flow Automation Script: Triggers, Actions, and Tags Explained

Shopify App Billing: Recurring Subscriptions & Usage Charges

App Proxy — Secure Public Endpoints for Embedded Shopify Apps

Reach Us At

About Digittrix

Industries

Our Services

Case Studies

Hire Developers

Subscribe Us