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. This guide illustrates how to show selling plans on the storefront and implement a basic selling plan product template.
How it works
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.
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.
Requirements
To be eligible to use Shopify subscriptions, merchants must meet the qualifying criteria.
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
.
In the Sections directory, click
product-template.liquid
. If your theme doesn't have this file, then clickproduct.liquid
in the Templates directory.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>