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
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 %}{%- 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>
{%- 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.
Next➡️
💡Tips for Membership V2