900+ reviews For Entrepreneurs
Digittrix logo

Home - Scripts - Website Development

  • 25 November 2025

Shopify Liquid Section: Dynamic Product Bundles with Metafields
by Bobin S. – 3 minute read – 86 views
Backend Web

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 

Recent Scripts

Website Development

Razorpay Payment Webhook: A Complete Guide

Author by Tarun C. – April 10, 2026 – 4 minute read

<p dir="ltr">Razorpay webhooks notify your server immediately of payment events, allowing secure, real-time updates and automatic transaction recording in your database.</p> <p>&nbsp;</p>

PHP
Website Development

Image Upload with Fixed Dimensions in ReactJS

Author by Parveen – April 6, 2026 – 4 minute read

<p>Over 70% of web apps use client-side image processing to ensure consistent UI, faster load times, and optimized performance with fixed dimensions in ReactJS.</p>

Website Development

Shopify Draft Orders: Convert Quotes into Paid Orders

Author by Bobin S. – April 2, 2026 – 3 minute read

<p>Convert quotes into paid orders using Shopify Draft Orders. Create custom pricing, send invoices, automate workflows, and boost order conversion rates.</p>