Custom Product Bundles in Shopify [Without any App]

Make sure to follow me on FACEBOOK

<!-- Bundles by @devumairjaved -->
<div class="bundle-options">
  {% for variant in product.variants %}
    <label class="bundle-box">
      <input type="radio" name="bundle-option" value="{{ variant.id }}" {% if forloop.first %}checked{% endif %}>
      <div class="bundle-content">
        <div class="bundle-title">
          {% case forloop.index %}
            {% when 1 %} Buy 1
            {% when 2 %} Buy 2, Get 1 Free!
            {% when 3 %} Buy 3, Get 2 Free
          {% endcase %}
        </div>
        {% assign original_price = variant.compare_at_price | money %}
        {% assign discounted_price = variant.price | money %}
        {% assign discount = variant.compare_at_price | minus: variant.price | money %}

        {% if variant.compare_at_price > variant.price %}
          <div class="savings-badge">You Save {{ discount }}</div>
        {% endif %}
        <div class="prices">
          {% if variant.compare_at_price > variant.price %}
            <span class="original-price">{{ original_price }}</span>
          {% endif %}
          <span class="discounted-price">{{ discounted_price }}</span>
        </div>
      </div>
    </label>
  {% endfor %}
</div>

<style>
  .bundle-options {
    display: flex;
    flex-direction: column;
    gap: 15px;
  }
  .bundle-box {
    border: 2px solid #7dbb45;
    border-radius: 8px;
    background-color: #7dbb4520;
    padding: 10px 15px;
    display: flex;
    align-items: center;
    cursor: pointer;
    position: relative;
    transition: border-color 0.3s;
  }
  .bundle-box input[type="radio"] {
    margin-right: 15px;
    transform: scale(1.2);
  }
  .bundle-box:hover {
    border-color: #8a2be2;
  }
  .bundle-title {
    font-size: 1.6rem;
    font-weight: bold;
    margin-bottom: 8px;
  }
  .savings-badge {
    background-color: #333;
    color: #fff;
    font-size: 1.4rem;
    padding: 3px 8px;
    border-radius: 15px;
    position: absolute;
    top: -10px;
    right: -10px;
  }
  .prices {
    font-size: 1.6rem;
  }
  .original-price {
    text-decoration: line-through;
    color: #ff000070;
    margin-right: 10px;
font-size:0.8em
  }
  .discounted-price {
    color: #fff;
    font-weight: 900;
font-size:1em;
background-color: #7dbb45;
padding:3px 5px; border-radius: 5px
  }
</style>

<script>
  document.addEventListener('DOMContentLoaded', function () {
    const radios = document.querySelectorAll('input[name="bundle-option"]');
    const hiddenVariantInput = document.querySelector('input.product-variant-id[name="id"]');

    if (!hiddenVariantInput) {
      console.warn('Hidden variant input not found!');
      return;
    }

    function updateVariantId(variantId) {
      hiddenVariantInput.value = variantId;

      // Dispatch change event to notify any JS listening on the variant change
      hiddenVariantInput.dispatchEvent(new Event('change', { bubbles: true }));
    }

    radios.forEach(radio => {
      radio.addEventListener('change', function () {
        updateVariantId(this.value);
      });
    });

    // Initialize on page load with the selected radio
    const checkedRadio = document.querySelector('input[name="bundle-option"]:checked');
    if (checkedRadio) {
      updateVariantId(checkedRadio.value);
    }
  });
</script>