How to create bundle on pagefly by custom coding?

				
					<div data-product-id="{{ product.id }}" data-pf-type="ProductVariantSwatches">
  <input
    type="hidden"
    name="id"
    data-product-id="{{product.id}}"
    value="{{ product.selected_or_first_available_variant.id }}"
  >

  {% unless product.has_only_default_variant %}
    {% liquid
      assign swatches = shop.metafields.pfVariantSwatchesV2
      assign keys = swatches.pf_keys | split: '; '
      assign types = swatches.pf_types | split: '; '
      assign length = keys.size | minus: 1
    %}

    {% for option in product.options_with_values %}
      {% assign option_name = option.name %}
      {% assign formatted_option_name = option.name | replace: '"', '&quot;' %}
      {% if keys contains option_name %}
        {% for i in (0..length) %}
          {% assign originalKey = keys[i] %}
          {% assign key = originalKey | replace: '"', '&quot;' %}
          {% assign compareKey = originalKey | url_decode %}
          {% assign compareOptionName = option.name | url_decode %}
          {% assign type = types[i] %}
          {% capture option_name_count_id %}pf_option_name_{{ i }}{% endcapture %}
          {% if compareKey == compareOptionName %}
            <div class="pf-option-swatches" data-swatch-type="label" data-unique-id="{{option.position}}">
              {% for option_value in option.values -%}
                {%- capture option_id -%} pf-sw{{ swatches_count }}-{{ key }}-{{ option_value | remove: '"' | replace: ' ', '-' -}}{%- endcapture -%}

                {%- assign optionValue = option_value | replace: '"', '&quot;' %}
                <div data-option-name="{{key}}" class="pf-vs-label">
                  <input
                    {% if option.selected_value == option_value %}
                      checked
                    {% endif %}
                    type="radio"
                    id="{{option_id}}"
                    name="sw{{swatches_count}}-{{key}}"
                    value="{{optionValue}}"
                    {% for var in product.variants %}
                      {% assign varEsc = var.title | escape %}
                      {% assign optEsc = option_value | escape %}
                      {% if varEsc == optEsc %}
                        data-compareprice="{{ var.compare_at_price | money }}"
                        data-price="{{ var.price | money }}"
                        variant-available="{{ var.available }}"
                      {% endif %}
                    {% endfor %}
                  >

                  <label for="{{option_id}}">
                    <div class="bundles__bar-radio"></div>
                    <div class="sec_title">
                      <div class="title-label">
                        <span class="title">{{ option_value }}</span>
                        {%- if forloop.index >= 2 -%}
                          <span class="bundles__bar-label">Price each</span>
                        {%- endif %}
                      </div>
                      {% for var in product.variants %}
                        {% assign varEsc = var.title | escape %}
                        {% assign optEsc = option_value | escape %}
                        {% if varEsc == optEsc %}
                          <span class="sw-custom-text">
                            {% assign comparePrice = product.variants[forloop.index0].compare_at_price %}
                            {% assign regularPrice = product.variants[forloop.index0].price %}
                            {% assign savings = comparePrice | minus: regularPrice %}
                            {% assign percentageSaved = savings | times: 100 | divided_by: comparePrice | round %}
                            {% if forloop.index == 1 %}
                              50% OFF - Limited time!
                            {% elsif forloop.index == 2 %}
                              Save an EXTRA {{ percentageSaved | append: '%' }}
                            {% elsif forloop.index == 3 %}
                              Save an EXTRA {{ percentageSaved | append: '%' }}
                            {% elsif forloop.index == 4 %}
                              Save an EXTRA {{ percentageSaved | append: '%' }}
                            {% endif %}
                          </span>
                        {% endif %}
                      {% endfor %}
                    </div>
                    <div class="sec_price">
                      {% if forloop.index == 2 -%}
                        <span class="popular_text">MOST POPULAR</span>
                      {%- endif %}
                      {% assign divisor = 1 %}

                      {% if forloop.index == 1 %}
                        {% assign divisor = 2 %}
                      {% elsif forloop.index == 2 %}
                        {% assign divisor = 3 %}
                      {% elsif forloop.index == 3 %}
                        {% assign divisor = 4 %}
                      {% elsif forloop.index == 4 %}
                        {% assign divisor = 6 %}
                      {% endif %}
                      <span class="regularPrice">{{ regularPrice | divided_by: divisor | money }}</span>
                      <span class="comparePrice">{{ comparePrice | money }}</span>
                    </div>
                  </label>
                </div>
              {%- endfor %}
            </div>
          {% endif %}
        {% endfor %}
      {% endif %}
    {% endfor %}
  {% endunless %}
</div>