Display bundle items in product page

Display bundle items in product page

  1. Add Metafields to Bundle Product

     Example metafield:

  • Namespace & key: custom.bundle_items

  • Type: List of Products (this is the ideal type for linking individual Shopify products)


  1. Assign Metafields to Bundle Product:

    • Go to the bundle product in your admin.

    • Scroll to Metafields section.

    • Select the actual individual products in the custom.bundle_items metafield.

  2. Custom Liquid Block Code:

    Paste this clean and tested Liquid into the Custom Liquid block on the product page via your theme editor:


Idea

{% if product.metafields.custom.bundle_items != blank %}

  <div class="bundle-contents">

    <h3>What's Included</h3>

    <ul style="padding: 0; list-style: none;">

      {% for item in product.metafields.custom.bundle_items.value %}

        <li style="display: flex; align-items: center; margin-bottom: 12px;">

          <a href="{{ item.url }}" style="display: flex; align-items: center; text-decoration: none; color: inherit;">

            <img src="{{ item.featured_image | image_url: width: 160 }}" alt="{{ item.title }}" width="80" style="border-radius: 8px; margin-right: 16px;">

            <span style="font-size: 15px;">{{ item.title }}</span>

          </a>

        </li>

      {% endfor %}

    </ul>

  </div>

{% endif %}