Attaching sellings plans and other attributes to Shopify forms via the Liquid API

Learn how to add subscriptions to Shopify forms along with other visible and hidden attributes for the item being added to cart

Rob Johnson

By Rob Johnson

Sun Sep 17 2023

Liquid API

If you're using a native Shopify theme directly on Shopify, you can use the Liquid API. You can insert input fields directly into the product form, such as selling_plan which will be included in the form submission.


{% form 'product', product %}
  <input type="hidden" name="id" value="{{ current_variant.id }}">
  <input type="hidden" name="selling_plan" value="{{ current_selling_plan_allocation.selling_plan.id | default: '' }}">

  <fieldset>
    <legend>Product options</legend>

    {% for option in product.options_with_values %}
      <label>{{ option.name }}</label>

      <select>
        {% for value in option.values %}
          <option>{{ value }}</option>
        {% endfor %}
      </select>
    {% endfor %}
  </fieldset>

  <!-- Pass the product object as JSON so it can be used to update selling plan information using JavaScript -->
  <fieldset class="selling-plan-fieldset" data-product={{ product | json }}>
    <legend>Purchase options</legend>
    {% unless product.requires_selling_plan %}
    <input type="radio" name="purchase_option"> One-time purchase
    {% endunless %}

    {% for group in product.selling_plan_groups %}
      <input type="radio" name="purchase_option"> {{ group.name}}

      {% for option in group.options %}
        <label>{{ option.name }}</label>

        <select data-position="{{ option.position }}">
          {% for value in option.values %}
            <option>{{ value }}</option>
          {% endfor %}
        </select>
      {% endfor %}
    {% endfor %}
  </fieldset>
{% endform %}

You can also add in customer line item properties with the following HTML which will pass through when the form is submitted.

<input type="text" name="properties[Engraving]">

You can do the same thing with hidden properties which won't be visible to the customer by prefixing the value= with an underscore _ and using type="hidden" on the input field you can hide the line item property on the form also.

<input type="hidden" name="properties[_cohort]" value="cohort_1">
# commerce 14 # seo 5 # tools 6 # amazon 1 # sql 4 # shopify 9 # javascript 13 # projects 4 # css 2 # git 2 # php 3 # analytics 4 # monitoring 2 # api 6 # python 2 # aws 2