Add a plan at the front store (Membership V2)

Add a plan at the front store (Membership V2)

Introduction

In this article, we'll delve into the process of seamlessly integrating membership plans into your front store.
​

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 Customize


​

Step 2. Click on the Home option and from the dropdown, click on Product as shown below

NoteπŸ“: Membership doesn't work with product variants



​Step 3. Click on Add block >> Apps >> Membership product block and click on Save

You can now view the membership as a product, as shown in the below image.


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

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


Note:πŸ“If you are automatically getting a membership option from Shopify, as depicted 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 below code

{%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 below code before it.

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

Step 5: Then Save the file.


​


    • Related Articles

    • How to setup Membership V2 at front store

      Introduction Managing memberships effectively is crucial for creating a seamless experience for your customers and boosting engagement. This guide will walk you through the step-by-step process of setting up Membership V2, ensuring you get the most ...

    • 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: ...

    • Setup Affiliate V2 at the Front store

      Introduction In this article, you will learn how to setup Affiliate V2 at the front store Overview?️ If App block is available on your theme If App block is not available on your theme App block is available on your theme Here are the steps to do ...

    • Add automatic discount code to store (Membership V2)

      Introduction Introducing direct discount codes to your store can be a powerful tool for attracting customers and boosting sales. In this article, we'll walk you through the process of seamlessly integrating direct discount codes into your store, ...

    • How To Create Free Plan In Membership?

      The AiTrillion Membership + Subscription app gives you the option to create a FREE PLAN. It can be created for free membership registrations. Follow the below steps for guidance – Step 1. Go to Membership > Membership plan Step 2. Choose Add Free ...