Adding reCharge Product with Variants on non-Product Pages

[betasl]

Hi team,

I've been trying to figure this issue out.

Want the ability to add reCharge Products to the cart, on Non-Product Pages. Currently i'm using a customized version of Debut Theme.

I've been able to add Recharge Products with only default variants to the cart, however when there are variants the regular version (non Auto-Renew) of the product is sent to the Cart.

Here is my add to cart button code for my customised product-grid-card which displays the product on the /page/.

<div class='collection-atc'>
    <form action="/cart/add" method="post" enctype="multipart/form-data" id="AddToCartForm" class="quick-add-to-cart small--hide clearfix">
    <!-- Begin ReCharge code -->
    {% if product.available %}{% include 'subscription-product' %}{% endif %}
    <!-- End ReCharge code -->
        {% if product.variants.size > 1 %}
          <select id="product-select-{{ product.id }}" name='id' class="text-center">
          {% for variant in product.variants %}
          {% if variant.available %}
            <!-- Begin ReCharge code -->
    {% if product.available %}{% include 'subscription-product' %}{% endif %}
    <!-- End ReCharge code -->
            <option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }}</option>
          {% else %}
            <option disabled="disabled">
            {{ variant.title }} - {{ 'products.product.sold_out' | t }}
            </option>
          {% endif %}
          {% endfor %}
          </select>
          {% else %}
            <input type="hidden" name="id" value="{{ product.variants.first.id }}" />
          {% endif %}
          {% if product.available %}
            <button type="submit" name="add" id="AddToCart" class="btn btn-mini text-center" onclick="ga('send', 'event', 'Quick Add To Cart', '{{ product.type }}', '{{ product.title }}');">Add To Cart</button>
          {% else %}
            <h6>Out of Stock</h6>
          {% endif %}
        </form>
        </div>

Any help or insight with this would be appreciated.