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

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">