All Tutorials

Showing selling plan groups and selling plans on a product page

All Tutorials

Showing selling plan groups and selling plans on a product page

On this page

Showing selling plan groups and selling plans on a product page

Selling plans are used to offer different purchase options for goods and services at checkout. To learn more about selling plans, refer to our Shopify subscriptions overview.

Apps create selling plan groups for a product and selling plans for individual product variants. For example, a selling plan group called "Subscribe & Save" can offer selling plans that allow the customer to choose the "delivery frequency" and "billing frequency" separately.

Subscribe and save example

You can use Liquid to integrate selling plan selections into your theme's product pages. Merchants can offer multiple optional selling plans to customers, or they can specify a selling plan as required for a product, such as "subscription-only" offers.

Show available selling plans within selling plan groups

To apply a selling plan to a variant when adding to the cart, you must provide the product variant.id and selling_plan.id.

The following steps show you how to create a functional component that shows available selling plans within selling plan groups, and allows a customer to select a selling_plan.

  1. In the Sections directory, click product-template.liquid. If your theme doesn't have this file, then click product.liquid in the Templates directory.

  2. Add the following Liquid code within a {% form 'product' %} tag:

    {% for group in product.selling_plan_groups %}
<fieldset>
  <legend>{{ group.name}}</legend>
  {% for selling_plan in group.selling_plans %}
    <input type="radio" name="selling_plan" value="{{ selling_plan.id }}">
    {{ selling_plan.name }}
  {% endfor %}
</fieldset>
{% endfor %}

    When the above section is rendered, it looks similar to the following:

    <fieldset>
 <legend>Pay-as-you-go plans</legend>
   <input type="radio" name="selling_plan" value="2254">
    Every week (save 10%)
   <input type="radio" name="selling_plan" value="6384">
    Every month (save 5%)
  </label>
</fieldset>
<fieldset>
 <legend>Prepaid plans</legend>
  <input type="radio" name="selling_plan" value="2571">
    6-months prepaid (save 15%)
  <input type="radio" name="selling_plan" value="7285">
    1-year prepaid week (save 25%)
</fieldset>

Implement a basic selling plan product template

The following code example includes an implementation of a product page that does the following:

  • Renders prices based on a selected selling plan allocation
  • Conditionally renders a “One-time purchase” purchase option
  • Displays selling plan group options of a selling plan group.
{%- liquid
 assign current_variant = product.selected_or_first_available_variant
 assign current_selling_plan_allocation = current_variant.selected_selling_plan_allocation
 if current_selling_plan_allocation == nil and current_variant.requires_selling_plan
  assign current_selling_plan_allocation = current_variant.selling_plan_allocations | first
 endif
 assign offer = current_selling_plan_allocation | default: current_variant
-%}

{{ product.title }}
{{ offer.price | money }}
{% if offer.compare_at_price > offer.price %}
<s>{{ offer.compare_at_price | money }}</s>
 <span>{% if offer.selling_plan %}Subscription{% else %}Sale{% endif %}</span>
{% endif %}


{% 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>
  <fieldset>
  <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>
      {% for value in option.values %}
        <option>{{ value }}</option>
      {% endfor %}
    </select>
  {% endfor %}
  {% endfor %}
  </fieldset>
{% endform %}

When the above section is rendered, it looks similar to the following:

Product title
$9.00 <s>$10.00</s> Subscription

<form action="..." >
 <input type="hidden" name="id" value="...">
 <input type="hidden" name="selling_plan" value="...">

 <fieldset>
  <legend>Product options</legend>
   <label>Size</label>
   <select>
     <option>Small</option>
     <option>Medium</option>
     <option>Large</option>
   </select>
 </fieldset>

 <fieldset>
   <legend>Purchase options</legend>
   <input type="radio" name="purchase_option"> One-time purchase
   <input type="radio" name="purchase_option"> Subscribe and save
     <label>Delivery frequency</label>
     <select>
       <option>Every week (save 10%)</option>
       <option>Every month (save 5%)</option>
       <option>Every 2 months (save 5%)</option>
     </select>
 </fieldset>
</form>