Make a selection

Create Drop-down Menus as Custom Registration Fields

Laurel
Laurel
  • Updated

Bold Memberships currently supports text and multi-line text inputs for custom registration fields such as size and color. With some slight changes to the liquid code on your theme, you can create a dropdown menu for your custom registration fields.

Note: This customization involves adjusting some liquid code in your theme. If you are not comfortable with completing this on your theme, one of our partners could create this for you as a paid customization on your store. Please request this through HeyCarson via this form.

 

 

Setup

To create dropdown menus for custom registration fields, please follow these steps:

  1. Duplicate your theme.

  2. From the Shopify admin, select Apps.

  3. 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; this is used later.

    Note Plan Tag

  8. Note the order of the Registration Fields; this is used later.

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

    note the field order

  9. From Shopify's 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.

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