Top

Create Drop-down Menus as Custom Registration Fields

Recurring Memberships currently supports text and multi-line text inputs for custom registration fields such as size and color.

To create drop-down menus for custom registration fields, follow these steps:

  1. Duplicate your theme.
  2. From "Shopify Admin", select Apps.

    Select Apps 

  3. Select Recurring Memberships.

    Select Recurring Memberships 

  4. Select Plans.

    select plans 

  5. Select Settings (the gear icon) next to the plan with which you want to use drop-downs.

    select settings 

  6. Select Edit.

    select edit 

  7. Note the Plan Tag; you will use it later.note the plan tag 
  8. Note the order of the Registration Fields; you will use it later.

    Note: Your first custom field is number 1, the second custom field is number 2, etc.

    note the field order 

  9. From "Shopify Admin", select Online Store.

    select online store 

  10. Select Actions.

    Select Actions 

  11. Select Edit code.

    Select Edit code 

  12. Under "Templates", select page.liquid.

    select page.liquid 

  13. Copy and paste this code at the end of the file:
    <!--Bold Membership Options-->
    <script>
    
    jQuery(window).load(function(){
    
    //Registration Field Customization
    setTimeout(function(){
    
    //script settings
    var planTag = 'Plan Tag';
    var fieldNumber = 2;
    var required = true;
    
    //create dropdown
    var field = jQuery('#customFields_' + planTag).find('input').eq(fieldNumber - 1);
    var field_id = field.attr('value_id');
    field.replaceWith('<select id="field_' + field_id + '" value_id="' + field_id + '" name="n_' + field_id + '" class="answer' + (required == true?' required':'') + '"></select>');
    
    }, 1000);
    
    });
    
    </script>
    <!--End Membership Options-->

    copy and paste this code 

  14. Under "//script settings", change Plan Tag to the tag you noted in step 7.

    change the plan tag 

  15. Next to "var fieldNumber", change 2 to the field number.

    change the field number 

  16. Next to "var required", change or leave true.

    Note: true means the field is required, false means it is optional.

    change the required variable 

  17. above }, 1000); paste this code for the first value for the drop-down:
    //create dropdown option
    jQuery('#field_' + field_id).append(jQuery('<option>', {
    
    value: 'Silver',
    text: 'I would like Silver!'
    
    }));

    copy and paste this code 

  18. Change "value" to the first value for the drop-down.

    change the value 

  19. Change "text" to the display text for the first drop-down.

    change the text 

  20. Repeat steps 17 - 19 for each drop-down box value.

    Repeat steps 17 - 19 for each drop-down box value 

  21. Select Save.

    select save 

That's it!

Note: If you have multiple fields you wish to change into drop-down menus you can repeat these steps for each field.

Next Steps