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

    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?