How to add a subscription product to the cart?

I’m trying to set up the Appstle Subscription plugin for Shopify, but I can’t figure out how to add a subscription product to the cart. Regular products get added, but the subscription doesn’t. It’s a simple subscription, without any variations or time intervals. Here is the code with subscription and regular product:

{% assign subscriptions = collection.products | sort: 'created_at' | where: 'type', 'Subscription' %}
{% assign products = collection.products | sort: 'created_at' %}

<div class="container">
  <div class="shop-catalog__row">
    {% if subscriptions != blank %}
      <ul class="list-reset shop-catalog__products">
        {% for product in subscriptions %}
          <li class="product flex">
            <div class="product__info">
              <h3 class="product__title">{{ product.title }}</h3>
              <div class="product__description">
                {{ product.metafields.custom.text_in_card_on_catalog_page | metafield_tag }}
              </div>
              <div class="product__actions flex">




              <!-- subscription -->
              <form method="post" action="/cart/add">
                {% if product.available %}
                <input name="id" value="{{ product.variants.first.id }}" type="hidden" />
                <button class="btn-reset button button-buy">BUY NOW</button>
                {% endif %}
              </form>


              <a href="/products/{{ product.handle }}" class="btn-reset button">DISCOVER MORE</a>
              </div>
            </div>
            {% if product.featured_image != blank %}
              <div class="product__img">
                {{ product.featured_image | image_url: width: 810 | image_tag }}
              </div>
            {% endif %}
          </li>
        {% endfor %}
      </ul>
    {% endif %}
    {% if products != blank %}
      <ul class="list-reset shop-catalog__products">
        {% for product in products %}
          {% if product.type != 'Subscription' %}
            <li class="product flex">
              {% if product.featured_image != blank %}
                <div class="product__img">
                  {{ product.featured_image | image_url: width: 810 | image_tag }}
                </div>
              {% endif %}
              <div class="product__info">
                <h3 class="product__title">{{ product.title }}</h3>
                <div class="product__description">
                  {{ product.metafields.custom.text_in_card_on_catalog_page | metafield_tag }}
                </div>
                <div class="product__actions flex">
                  <form method="post" action="/cart/add">
                    <input
                      name="id"
                      value="{{ product.variants.first.id }}"
                      type="hidden" />
                    <button class="btn-reset button button-buy">BUY NOW</button>
                  </form>
                  <a href="/products/{{ product.handle }}" class="btn-reset button">DISCOVER MORE</a>
                </div>
              </div>
            </li>
          {% endif %}
        {% endfor %}
      </ul>
    {% endif %}
  </div>
</div>


{% schema %}
  {
    "name": "Catalog",
    "tag": "section",
    "class": "shop-catalog",
    "disabled_on": {
      "groups": ["header", "footer"]
    },
    "settings": [],
    "presets": [
      {
        "name": "Catalog"
      }
    ]
  }
{% endschema %}

I added a subscription product using the Appstle Subscription plugin to the cart form in my Shopify store. I expected the subscription product to be added to the cart just like a regular product, but instead, it doesn’t get added, while regular products do.

The subscription is not working because subscription products need as minimum requirement product id and selling plan id, Just add this extra input:

          <!-- subscription -->
          <form method="post" action="/cart/add">
            {% if product.available %}
            <input name="id" value="{{ product.variants.first.id }}" type="hidden" />
            <input name="selling_plan" value="{{ product.variants.first.selling_plan_groups.selling_plans.first.id }}" type="hidden" />
            <button class="btn-reset button button-buy">BUY NOW</button>
            {% endif %}
          </form>

For more information about the object subscriptions see the shopify docs here

This code will works well on a product without variants and with a single subscription plan.