How can I display the membership selling plans on my membership product?

Once you've configured your membership perks and pricing, you'll want to add the selling plans (pricing options) to your membership product within Shopify. There are 3 ways to do this, all explained in detail on the Installation tab of the membership details page, as well as in the tutorial below. If you have any trouble at all with the installation process, don't hesitate to contact us for additional assistance.

App Embed

The easiest way to add selling plans to your membership product page is via an App Embed. This is a special widget that you enable within your Shopify theme that will attempt to automatically add selling plans to your membership product. You can access the App Embed directly by clicking the button on the Installation tab. 

Note that the button will open a generic product page. Be sure to select your membership product so you can see how the selling plans look. Make sure to save your changes after you're done editing!

To return to the App Embeds directly in the future, start by going to the Customize section of your theme, clicking "Theme Settings" at the bottom of the left column, then clicking "App Embeds" at the top of the right column.

Below is an example of where the App Embed shows up and what it may look like within your theme.

Online Store 2.0

If your theme supports Shopify's new Online Store 2.0 format, you can add the selling plans into your theme the same way you would add blocks and sections.

Start by opening your theme's Customize section and navigating to your membership product. On the left side, click either "Add section" or "Add block" and select "Membership Selling Plans".

You can also optionally add a "Membership Price" block that will update the price based on the selling plan selected.

Below is an example of where the App block shows up and what it may look like within your theme.

Advanced

If you'd prefer to add selling plans directly using HTML, you can use the code below. Paste it into your product form within your product template to display the selling plans.

<script type="application/json" id="selling-plan-json-{{ block.id }}">
  {{ product | json }}
</script>

{% assign selling_plan_selected = blank %}
{% assign has_selling_plans = false %}
{% for variant in product.variants %}
  {% if variant.id == product.selected_or_first_available_variant.id %}
    {% for allocation in variant.selling_plan_allocations %}
      {% assign selling_plan_selected = allocation.selling_plan.id %}
      {% break %}
    {% endfor %}
  {% endif %}
  {% if variant.selling_plan_allocations.size > 0 %}{% assign has_selling_plans = true %}{% endif %}
  {% if selling_plan_selected != blank %}{% break %}{% endif %}
{% endfor %}

{% if has_selling_plans %}
  <fieldset class="selling-plan-fieldset" id="selling-plan-fieldset-{{ block.id }}" data-id="{{ block.id }}">
    <legend>{{ block.settings.heading }}</legend>


    {% for variant in product.variants %}
      <div data-variant="{{ variant.id }}" class="selling-plans {% if variant.id != product.selected_or_first_available_variant.id %}selling-plan-hide{% endif %}">
        {% for allocation in variant.selling_plan_allocations %}

          {% assign selling_plan_frequency = blank %}
          {% for option in allocation.selling_plan.options %}
            {% if option.name == 'Charged every' %}
              {% capture selling_plan_frequency %}every {{ option.value }}{% endcapture %}
            {% endif %}
          {% endfor %}

          <label for="selling_plan_{{ block.id }}_{{ allocation.selling_plan.id }}" class="selling-plan-label">
            <input type="radio" name="selling_plan_option" id="selling_plan_{{ block.id }}_{{ allocation.selling_plan.id }}" value="{{ allocation.selling_plan.id }}" {% if selling_plan_selected == allocation.selling_plan.id %}checked="checked"{% endif %} data-price="{{ allocation.per_delivery_price | money_with_currency }} {{ selling_plan_frequency }}">
            {{ allocation.per_delivery_price | money }} {{ selling_plan_frequency }}
          </label>
        {% endfor %}
      </div>
    {% endfor %}
  </fieldset>
{% endif %}