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 %}


    • Related Articles

    • Request for Quote button in product page

      In customize theme, add custom liquid in default product template. Please the code as below. Note: the rule is when the price is '0'. {% if product.selected_or_first_available_variant.price == 0 %} <a href="https://wa.me/60162261314?text={{ 'I would ...

    • Dynamic SKU on product page

      In edit code, add the following liquid in Block. {% doc %} @prompt Create a dynamic SKU display that automatically updates when product variants are changed without requiring a page refresh. The SKU should be visible on the product page and change ...

    • Enlarge swatch size in product page

      In product page customize, add the following code in custom css: .swatch-input__input + .swatch-input__label { --swatch-input--size: 4rem !important; }

    • Add “Description” title before the description on product page

      Add a custom liquid section in product page after add to cart button. Insert the following liquid in the custom liquid. {% if product.description != '' %} <br> <h3 style="color: #EC1C24; font-weight: 600;">DESCRIPTION & SPECIFICATIONS</h3> {% endif ...

    • Insert product weight into product page

      In custom liquid, insert the following: Weight: {% for variant in product.variants %}{{variant.weight | weight_with_unit }}{% endfor %}