Add Membership Plans to Storefront | Showcase Plans with Membership V2 by AiTrillion

Setup membership plan to the front store

Introduction

Managing memberships effectively is crucial for creating a seamless experience for your customers and boosting engagement. This article will walk you through the step-by-step process of setting up Membership V2, ensuring you get the most out of its features to enhance your customer experience and streamline operations.


Here are the steps to add a membership plan at the front store:

Step 1: Log in to Shopify, click on Online Store >> Themes, and click on the Customize button.


Step 2: Click on the down arrow button next to the Home option, and from the dropdown, click on Product as shown below

Info
Note: Membership product or membership plans doesn't work with product variants




Step 3: Click on Add block >> Apps >> Membership product block and click on the Save button.


You can now view the membership as a product with its membership option details.



Info

Note: If you are getting an error - Variant can only be purchased with a selling plan. - Click here


You will also be able to see the recurring subtotal for the membership



Note: If you are automatically getting a membership option from Shopify, as shown in the image below, you need to configure the settings as demonstrated in the image following the one below.


Go to main-product.liquid and remove the code below

{%render 'selling-plans' %}



You can also make a membership page, as shown in the image below


Here are the steps to manually installation for Shopify old themes:

Step 1: Copy the code below

  <!-- ========== Membership product block code Start ============== -->

{% comment %} {{ product | json }} {% endcomment %}

{% assign onetime_membertag = false %}
{% for tag in product.tags -%}
  {% if tag contains 'ait-membership-manual-v2-product' %}
      {% assign onetime_membertag = true %}
  {% endif %}
{%- endfor -%}

{%- if product.selling_plan_groups.size > 0 -%}
  <product-subscriptions data-module="product/subscriptions" class="ait-membership-product-section">
   
    {%- assign product_variant = product.selected_or_first_available_variant -%}

    {%- for group in product.selling_plan_groups -%}
      {%- liquid
        assign plan_allocation = false

        for selling_plan_allocation in product_variant.selling_plan_allocations
          if group.id == selling_plan_allocation.selling_plan_group_id
            assign plan_allocation = selling_plan_allocation
            break
          endif
        endfor

        assign percentage_amounsht = false

        for price_adjustment in plan_allocation.selling_plan.price_adjustments
          assign percentage_amount = price_adjustment.value | plus: 0
          break
        endfor
      -%}

      <div class="aitmembership_widget aitmembership_member_widget">
      <div class="aitmemberip_widget_title">Membership options</div>
        {%-  if forloop.first -%}
          {% comment %}
          <div class="onelitime">
            <input
              type="radio"
              name="purchase_option"
              id="selling_group_{{- group.id -}}_onetime"
              value="onetime"
              class="absolute left-0 -translate-y-1/2 top-1/2"
              checked
            >
            <label for="selling_group_{{- group.id -}}_onetime"
              >{{- 'products.product.selling_plans.one_time_purchase' | t }}{{ plan_allocation.compare_at_price | money -}}
            </label>
          </div>
        {% endcomment %}
        {%- endif -%}

        {%- for selling_plan in group.selling_plans -%}
          {%- if selling_plan.id -%}
          {%- unless percentage_amount == false %}
            <div class="aitmembership_membership_wrapper">
              <div class="aitmembership_membership_radio_wrapper">
              {% comment %}
              <input type="radio" id="appstle_selling_plan_label_20" name="selling_plan" value="{{ selling_plan.id | default: '' }}" checked="">
              {% endcomment %}
                <label for="aitmembership_selling_plan_label_20" class="aitmembership_radio_label">
                <span class="aitmembership_membership_image">                
                  <img src="https://app.aitrillion.com/assets/images/aitmembership_icon.svg" width="20" height="20"/>                  
                </span>
                    <span class="aitmembership_subscribe_save_text">Join now</span>
                </label>
                <div class="aitmembership_membership_amount_wrapper">
                  <span class="aitmembership_membership_amount"><span class="transcy-money money">{{ plan_allocation.price | money }}</span></span>
                </div>
            </div>
            <div class="aitmembership_subscribe_option ">
              <input
                type="radio"
                name="purchase_option"
                id="selling_group_{{- group.id -}}_subscription"
                value="{{ selling_plan.id }}"
              >
   
              <label for="selling_group_{{- group.id -}}_subscription">
                {{ group.name }}
                {{ plan_allocation.price | money }}
                  <span style="font-size: 14px;">
                    {%- if percentage_amount != false and percentage_amount != 0 -%}
                      {%- assign original_price = plan_allocation.compare_at_price | times: 1.0 -%}
                      {%- assign discounted_price = plan_allocation.price | times: 1.0 -%}
                      {%- assign savings_amount = original_price | minus: discounted_price -%}
                      {%- if savings_amount == 0 -%}
                        (Save 100%)
                      {%- elsif savings_amount > 0 -%}
                        {%- assign savings_percentage = savings_amount | divided_by: original_price | times: 100 | round -%}
                        (Save {{ savings_percentage }}%)
                      {%- endif -%}
                    {%- endif -%}
                  </span>
              </label>
   
              <div class="hidden w-full pt-2 peer-checked:block">
                <div class="relative inline-block border-b border-gray-700 border-solid">
                  <select
                    name="purchase_option_values"
                    id="selling_group_{{- group.id -}}_options"
                    class="pr-4 text-sm bg-transparent appearance-none"
                  >
                    {%- for plan in group.selling_plans -%}
                      <option
                        value="{{- plan.id -}}"
                        {% if forloop.first %}
                          selected
                        {% endif %}
                      >
                        {{- plan.name -}}
                      </option>
                    {%- endfor -%}
                  </select>
   
                  <svg
                    class="absolute right-0 w-2.5 -translate-y-1/2 top-1/2"
                    xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 16 16"
                  >
                    <g fill="currentColor"><path d="M14.769,5.36a1,1,0,0,0-1.41-.128L8,9.7,2.641,5.232A1,1,0,1,0,1.359,6.768l6,5a1,1,0,0,0,1.282,0l6-5A1,1,0,0,0,14.769,5.36Z"></path></g>
                  </svg>
                </div>
              </div>
            </div>
            <input type="hidden" name="selling_plan" value="{{ selling_plan.id | default: '' }}">
            </div>
          {%- endunless -%}
          {%- endif -%}
        {%- endfor -%}
      </div>
    {%- endfor -%}
  </product-subscriptions>

{% elsif onetime_membertag == true %}

<div class="aitmembership_widget aitmembership_member_widget aitmembership_onetimemanual">
      <div class="aitmemberip_widget_title">Membership options</div>
            <div class="aitmembership_membership_wrapper">
              <div class="aitmembership_membership_radio_wrapper">
             
                <label for="aitmembership_selling_plan_label_20" class="aitmembership_radio_label">
                <span class="aitmembership_membership_image">                
                  <img src="https://app.aitrillion.com/assets/images/aitmembership_icon.svg" width="20" height="20">                  
                </span>
                    <span class="aitmembership_subscribe_save_text">Join now</span>
                </label>
                <div class="aitmembership_membership_amount_wrapper">
                  <span class="aitmembership_membership_amount"><span class="transcy-money money">{{ product.price | money }}</span></span>
                </div>
            </div>
            <div class="aitmembership_subscribe_option ">              
              <label for="">
                {{ product.title }} {{ product.price | money }}
                  <span style="font-size: 14px;"></span>
              </label>
            </div>
           
            </div>
</div>

{% else %}
 
{%- endif -%}
<style>
    .aitmembership_membership_radio_wrapper {
        display: flex;
        align-items: center;
    }
    .aitmembership_membership_wrapper {
        flex-direction: column;
        justify-content: center;
        display: flex;
        position: relative;
        padding: 20px 20px;
        border-radius: 5px;
        margin-bottom: 30px;
        margin-top: 10px;
        background: #F4F6F8 !important;
        border-radius:10px;
    }
    .aitmembership_membership_amount_wrapper {
        margin-left: auto;
        text-align: right;
    }
    .aitmembership_membership_radio_wrapper {
        display: flex;
        align-items: center;
    }
      .aitmembership_membership_radio_wrapper input[type='radio'] {
        display: none;
    }
   .aitmembership_membership_radio_wrapper .aitmembership_subscribe_save_text{
      font-family: inherit; font-size: 18px; font-weight: 400; line-height: inherit; letter-spacing: inherit; text-align: left;
    }
    .aitmembership_membership_amount .transcy-money.money{
     font-family: inherit; font-size: 18px; font-weight: bold; line-height: normal; letter-spacing: inherit; text-align: left;
    }
    label.aitmembership_radio_label {
        display: flex !important;
        align-items: center;
        margin: 0;
        padding: 0;
        background: none;
        font-size: 16px;
    }
    span.aitmembership_membership_image {
        padding: 10px;
        background: white;
        margin-right: 10px;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        box-shadow: 0 10px 20px 0 rgb(0 0 0 / 15%);
    }
    .aitmembership_subscribe_option {
        margin-left: 50px;
        margin-top: 5px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }
      .aitmembership_subscribe_option [type="radio"] {
        display: none;
    }
      .aitmembership_subscribe_option label {
        font-family: inherit; font-size: 14px; font-weight: 400; line-height: noinheritrmal; letter-spacing: inherit; text-align: left;
    }  
    .aitmembership_widget_title {
        font-size: 16px;
    }
    @media (max-width:768px){
      .aitmembership_membership_wrapper{
        padding:16px 16px
      }
    }
</style>
  <!-- ====================== Membership product blockcode End======================================== -->


Step 2: Go to Shopify Admin >> Online Store >> Themes >> Actions (Published theme) >> Edit Code.



Step 3: Add a new snippet ait_Membership-Product-block under Snippets and paste the copied code. Then save the file.


Step 4: Find the product form in the file main-product.liquid under Sections and paste the code below before it.

{% render 'ait_Membership-Product-block' %}



Step 5: Then, save the file.




Important Notes:

  • Ensure the membership plan is active and properly configured before adding it to the front store.
  • The membership product must be available on the Online Store sales channel to display on the storefront.
  • If the membership plan is not visible, verify that the product is created and synced correctly in Shopify.
  • Theme customization may be required to display membership plans properly, especially for custom or heavily modified themes.
  • Always place the membership section or code in the correct template (product page or desired page) for proper visibility.
  • If you are editing theme code, take a backup of your theme before making changes.
  • After adding the membership to the front store, test the flow to ensure customers can view and purchase the plan successfully.
  • Clear cache or check in an incognito window if changes are not reflecting.
  • For best results, ensure there are no conflicting apps or scripts affecting the display or functionality. 

Next ⏭️


    • Related Articles

    • Create a Membership Plan or Product

      Introduction The process of creating a plan or membership product, often referred to as "Membership," entails establishing structured offerings that provide exclusive benefits or access to customers in exchange for recurring payments. These plans can ...

    • Enable membership module and setup supported payment gateway

      Introduction This article walks you through enabling the Membership V2 module and setting up a supported payment gateway in your store. Before offering membership plans to your customers, it’s important to ensure that the module is properly activated ...

    • Membership General Settings: Membership Product Not Being Added to the Cart

      Introduction If your membership product is not being added to the cart, it can prevent customers from completing their purchase and accessing membership benefits. This issue is usually related to configuration settings and theme compatibility. In ...

    • Setup Membership Button At Shopify Store (Membership V1)

      Introduction For setting up the membership subscription button, you will have to copy its embed code from the app dashboard and add/paste in your theme where ever you want to show it. Here are the steps to setup membership button at Shopify store -: ...

    • Enable manual membership to the front store for custom payment gateway

      Introduction In this article, you will learn to enable the manual membership to the front store for a custom payment gateway Here are the steps to enable manual membership to the front store: Step 1: Go to Membership V2 >> Membership plans Step 2: ...