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