How to setup Recurring Membership app?

Question: How to setup Recurring Membership app?

Solution:

    Follow the below steps to install and set up the Recurring Membership app:-

    This guide will show you how to set up a membership app in your shopify storefront, create recurring membership plans and set up on the store. Follow the steps below to get started.

    Step 1 – Open App Dashboard

    Login to your shopify store, in left sidebar find Apps click on it

    Click on membership subscription orders app

    Step 2 – Create Free or Paid Plan

    Create a free or paid subscription plan

     

    Step 2(a)

    Create a free plan and add details below

    Step 2(b)

    Create Paid Recurring Plan

    First connect your payment gateway. Goto Settings > Connect Payment Gateway

     

    Now go to Plans > Add Paid Plan

     

    Step 3 – Setup form fields

    Create a custom form for members to capture more detail. Use drag and drop form builder.

     

    Step 4 – Advance settings

    Advance design settings for the form and membership buttons

     

    Step 5 – Show/Hide pages, collection to members

    Restricted Access: Show or hide specific collection, pages,add to cart button, price and blog to specific subscribed members only. All rules you create will be applied to only the subscribed members of this plan only. 

     

    Step 6 – Recurring members order

    Members Order: Select products to be ordered on every membership renewal. It can be recurring order or single order.

     

    Step 7 – Members product Discount

    Members Product Discount: Setup collection wise discount for the members on the store. For ex: Give Wholesale members 20% off on selected collections.

     

    Step 8 – Embed code for membership form

    Embed Code: Once you save the above details, you will see this embed code field. You need to add this shortcode on the member page on Shopify editor mode. 

    Button Code: Use this code, if you just need a button on your page and on click, it will open form in popup.

    Form Code: Use this code, if you want to show a direct form on a page and also you can edit HTML version for the designing purpose.

     

    Log in to Shopify store and go to Apps > Membership Subscription Order and create a plan accordingly.

    Choose from below plans and proceed to create according to your requirements.

    • FREE PLAN – It can be created for free membership registrations.
    • PAID PLAN – Recurring and One time (Stripe account details are mandatory to accept payments)

    membership-1Step 1. Add plan details, includes

    Plan Name: Membership name for internal use.
    Plan Tag: It will get assigned to the Shopify customer who will subscribe to any particular plan.
    Plan Interval: Membership plan of a particular time interval will be created.
    Currency code: Currency code of the plan amount can be added.
    Plan Amount: Amount for membership plan can be added here.

    membership-2

    Step 2. Add plan Fields: First Name, Last Name, Email Address and Password are Shopify mandatory fields for creating a customer which can’t be removed. You can add many other fields in the form as per the requirements which your members to fill in the form.

    membership-3

    Step 3. Update Settings: Customize and design the other settings of form and button from here. You can also integrate the plan with MailChimp.

    membership-4

    Step 4. Member orders: Automatic order of a few products can be placed, once the customer subscribes to a specific membership. Orders can be recurring or one-time.

    membership-5

    Step 5. Plan Rules: Set rules to show or hide any page/collection/cart button/price for current plan members.

    > Working criteria –

    If you want to hide any collection from all customers except current plan members then add a condition like

    Show → Collection → Choose collections  

    If you want to show any collection to all customers except current plan members then add a condition like

    Hide → Collection → Choose collections  

    membership-6

    NOTE – This step can be skipped as the code is automatically injected after the app installation to your theme. You can just review the code inserted in your theme.

    Step 1.  From Shopify Admin, go to the Online Store > Themes > Actions(Published Theme) > Edit Code(Published Theme).

    membership-add-code-1

     

    Step 2. Open theme.liquid file under Layouts and paste below code after the <body tag.

    <!-- aaa: Memberships -->
    {% if customer %}
    <div class="aaa_customer_id" hidden> {{ customer.id }}</div>
    {% endif %}
    <!-- end aaa code -->

    membership-add-code-10

     

    Also, check if the below code is available in the theme.liquid file before </body> tag. If not, then add it.

    <input type="hidden" name="aaamembership_customer_logged_id" value="{{customer.id}}" id="aaamembership_customer_logged_id">

    membership-add-code-11

    Step 3. Open blog.liquid under Templates and paste below code at the top of the file. Ignore this step if code is auto-injected or already available.

    <!-- AAA: Memberships (blog) -->
    {% include 'aaa_mem_helper' with 'blog' %}
    <!-- end AAA code -->

    membership-blog-code

     

    Step 4. Open collection.liquid file under Templates and paste below code at the top of the file. Ignore this step if code is auto-injected or already available.

    <!-- AAA: Memberships (collection) -->
    {% include 'aaa_mem_helper' with 'collection' %}
    <!-- end AAA code -->

    membership-add-code-12

    Step 5. Open page.liquid under Templates and paste below code at the top of the file. Ignore this step if code is auto-injected or already available.

    <!-- AAA: Memberships (page) -->
    {% include 'aaa_mem_helper' with 'page' %}
    <!-- end AAA code -->

    membership-add-code-13

    Step 6. Open product.liquid file under Templates and paste this code at the top of the page.  Ignore this step if code is auto-injected or already available.

    <!-- AAA: Memberships (product) -->
    {% include 'aaa-product-page-filter' %}
    <!-- end AAA code -->

    membership-add-code-14

    Plan Rules are selected to show/hide products, collections and pages for specific members. View below image –

    membership-6

    NOTE – If using plan rules in any membership plan then follow below steps for the setup otherwise skip it.

    Step 1.  From Shopify Admin, go to the Online Store > Themes > Actions(Published Theme) > Edit Code(Published Theme).

    membership-add-code-1

     

    Step 2.  Open collection-template.liquid file under Sections and search for the keyword “for”. Some below-related line of code will appear.

     {% for product in collection.products %}

    Then, paste this code after the for loop –

    <!-- AAA: Memberships (collection products) -->
    {% include 'aaa-collection-product-filter' %}
    {% if aaa_hide_item == true %}
    {% continue %}{% endif %}
    <!-- end AAA code -->

    NOTE:  If for loop or some related code is not found in the file then there must be some snippets included and you can find that file under Snippets and paste the code there.

    Step 3. Now, open file product-template.liquid file under Sections. Find the add to cart button by searching for keyword “cart”.

    NOTE: Some themes may have an add to cart button outside of this file. You can find it in files under Snippets like product-form.liquid.

     

    3. a.) Copy and paste below code at the beginning of the file and save

    {% include 'aaa-plan_rule' %}

    3.b.) Wrap the cart button with below code

    {% if aaa_cart_hide_item == false %}
    Addtocartbutton here ...
    {% endif %}

    membership-add-code-3

     

    3.c.) In the same file, search for {{ current_variant.price | money }} or price keyword or some relevant code which is printing the value of current price and wrap it with the below code. 

    NOTE: Some themes may have this code outside of the file. You can find it in files under Snippets like product-price.liquid.

    {% if aaa_price_hide_item == false %}
    price code stuff...
    {% endif %}

    membership-add-code-4

    In the plan settings, three options are available-

    1. Get HTML code: This code will provide the HTML code of the form. 
    2. Get Button: This code will provide the Button code. After clicking that button a popup with form will appear.
    3. Auto inject code snippet on pages: This feature will inject the button code in any existing page you select.  membership-7

    Paste the copied HTML or Button code in a page –

    membership-add-code-17

    IF YOU ARE FINDING IT DIFFICULT TO SETUP THEN PLEASE CONTACT US FOR FREE SETUP at neha@aitrillion.com

    Did this article answer your question?