Custom Field

Custom Field

Our Custom Fields extension helps to collect more information of your customers on the checkout page, such as Delivery instructions, Customer surveys, etc.
Let's explore the features of Custom Fields extension.

1. Template

You can create more information fields by adding a new field or just use our sample templates (and then modify them).
Each template would have different types which are suitable for your needs, such as Delivery instructions, Customer Survey, or Gift Message templates. 


You can choose the "Blank" option to create your own custom fields.

2. Form Settings.



  1. Form name: Enter the name for this form to easily manage. (Please click on advance setting to set up condition for each form)
  2. Priority: Only works if multiple forms have the same condition. Which form has higher priority number will be displayed.
  3. Display conditions: You can add multiple conditions for each form.
    1. All rules pass: The form can only be shown if all conditions are met.
    2. Any rule passes: If customer reaches one of these conditions, the form will be displayed.

3. Fields

There are 12 types of draggable items in the app setting. Click "Add new field" to add them. To arrange those fields, you can hold and drag them easily. 


3.1. Heading



  1. Heading content: enter the heading title here.
  2. Text size: custom sizes for the title as Small, Medium, and Large.
  3. Text alignment: align heading title as Left, Center, and Right. 
  4. Field width: Two options are full width with the space at the checkout section and half-width.
  5. Conditional field: This section allows the field only to appear if it passes the requirement (can add only one conditional field for each element).
    1. Select parent field: Choose a field to trigger the child field.
    2. Is: Enter the parent field value.
  6. Done: Finish customizing this field.

3.2. Text block

Similar to the Heading field, but Text block could be modified in color and style.


  1. Content: enter the text block content here. You can write much more than the Heading field.
  2. Text size: custom sizes for the title as Extra small, Small, Base, Medium, Large, and Extra Large.
  3. Text color: choose the color for the content with Normal, Accent, Subdued, Info, Success, Warning, and Critical.
  4. Text style: make the text bold or italic with Normal, Stress, Offset, and Strong.
  5. Text alignment: align heading title as Left, Center, and Right. 
  6. Field width: Two options are full width with the space at the checkout section and half-width.
  7. Conditional field: This section allows the field only to appear if it passes the requirement (can add only one conditional field for each element).
    1. Select parent field: Choose a field to trigger the child field.
    2. Is: Enter the parent field value.
  8. Done: Finish customizing this field.

3.3. Text field


  1. Field label: enter the content here to let your customer know which kind of information they should leave.
  2. Field type: this field has 3 types that are text, number and phone.
  3. Max length: Enter the maximum of characters that you allow customer to add in this field. You can leave it blank for no limit.
  4. Hide max length warning message: If you enable this option, the app will not show the warning message when your customers add more characters than the limit of this field.
  5. Field width: Two options are full width with the space at the checkout section and half-width.
  6. Is required: Tick this option to be unable to skip this label, but you will need to enable the App Behavior in the checkout editor first. Follow this tutorial to enable it.
  7. Conditional field: This section allows the field only to appear if it passes the requirement (can add only one conditional field for each element).
    1. Select parent field: Choose a field to trigger the child field.
    2. Is: Enter the parent field value.
  8. Done: Finish customizing this field.

3.4. Text Field Multiline

It is the same as the Text Field, but we can write more content and have fewer customization options.


  1. Field label: Enter the content here to let your customer know which kind of information they should leave.
  2. Max length: Enter the maximum of characters that you allow customer to add in this field. You can leave it blank for no limit.
  3. Hide max length warning message: If you enable this option, the app will not show the warning message when your customers add more characters than the limit of this field.
  4. Field width: Two options are full width with the space at the checkout section and half-width.
  5. Is required: Tick this option to be unable to skip this label, but you will need to enable the App Behavior in the checkout editor first. Follow this tutorial to enable it.
  6. Conditional field: This section allows the field only to appear if it passes the requirement (can add only one conditional field for each element).
    1. Select parent field: Choose a field to trigger the child field.
    2. Is: Enter the parent field value.
  7. Done: Finish customizing this field.

3.5. Date picker


  1. Field label: Enter the name for Date Picker.
  2. Field width: Two options are full width with the space at the checkout section and half-width.
  3. Exclude date picker: Enable this option to exclude date picker.
    1. Exclude specific date.
    2. Exclude days of week.
    3. Exclude date range.
  4. Is required: Tick this option to be unable to skip this label, but you will need to enable the App Behavior in the checkout editor first. Follow this tutorial to enable it.
  5. Conditional field: This section allows the field only to appear if it passes the requirement (can add only one conditional field for each element).
    1. Select parent field: Choose a field to trigger the child field.
    2. Is: Enter the parent field value.
  6. Done: Finish customizing this field.

3.6. Checkbox


  1. Field label: Enter the content here.
  2. Checked by default: Auto tick in this checkbox.
  3. Field width: Two options are full width with the space at the checkout section and half-width.
  4. Is required: Tick this option to be unable to skip this label, but you will need to enable the App Behavior in the checkout editor first. Follow this tutorial to enable it.
  5. Conditional field: This section allows the field only to appear if it passes the requirement (can add only one conditional field for each element).
    1. Select parent field: Choose a field to trigger the child field.
    2. Is: Enter the parent field value.
  6. Done: Finish customizing this field.

3.7. Choice list


  1. Field label: Enter the content here.
  2. Allow multiple choices: At default, customers can only choose one option. If you tick this box, they can select several options.
  3. Options: Enter your content in this field and click "Add option" to create more options below.
  4. Field width: Two options are full width with the space at the checkout section and half-width.
  5. Is required: Tick this option to be unable to skip this label, but you will need to enable the App Behavior in the checkout editor first. Follow this tutorial to enable it.
  6. Conditional field: This section allows the field only to appear if it passes the requirement (can add only one conditional field for each element).
    1. Select parent field: Choose a field to trigger the child field.
    2. Is: Enter the parent field value.
  7. Done: Finish customizing this field.

3.8. Dropdown



  1. Field label: Enter the content here.
  2. Options: Add your content to that field and click "Add option" to create more options below.
  3. Field width: Two options are full width with the space at the checkout section and half-width.
  4. Is required: Tick this option to be unable to skip this label, but you will need to enable the App Behavior in the checkout editor first. Follow this tutorial to enable it.
  5. Conditional field: This section allows the field only to appear if it passes the requirement (can add only one conditional field for each element).
    1. Select parent field: Choose a field to trigger the child field.
    2. Is: Enter the parent field value.
  6. Done: Finish customizing this field.

3.9. Add-on Product

Add-on Product is to recommend customers add one more product before submitting checkout.


  1. Field label: enter the content here. You can use it as a heading for Extra Product.
  2. Multiple product options: tick on this checkbox so that you can recommend to customers more products and they can choose one of them to purchase. If you don't tick on this option, you can only recommend one product item.
  3. Select extra products: Click on this label then the app will show the first 20 items. You can type the product's full name to find it quickly.
    1. Disable None option: Once you disable this option, customers can not deselect the product option (only show if you enable the Multiple product options.
    2. Show product image: Choose this option to show the product image.
    3. Show product title: Choose this option to show the product name.
    4. Show product price: Choose this option to show the product price.
  4. Field width: Two options are full width with the space at the checkout section and half-width.
  5. Is required: Tick this option to be unable to skip this label, but you will need to enable the App Behavior in the checkout editor first. Follow this tutorial to enable it.
  6. Conditional field: This section allows the field only to appear if it passes the requirement (can add only one conditional field for each element).
    1. Select parent field: Choose a field to trigger the child field.
    2. Is: Enter the parent field value.
  7. Done: Finish customizing this field.

3.10. Image


  1. Title: enter the title and then upload your image.
  2. Image width & height: Modify your image width and height. 
  3. Button link: Add your link so that when customers click on the image, our app will open a link.
  4. Image fit: Choose the stretch for the image.
  5. Alignment: align the image as Left, Center or Right.
  6. Field width: Two options are full width with the space at the checkout section and half-width.
  7. Conditional field: This section allows the field only to appear if it passes the requirement (can add only one conditional field for each element).
    1. Select parent field: Choose a field to trigger the child field.
    2. Is: Enter the parent field value.
  8. Done: Finish customizing this field.

3.11. Divider

A line to separate those fields.


  1. Size: Adjust the line size with Small, Base, Large, and Extra Large options.
  2. Field width: Two options are full width with the space at the checkout section and half-width.
  3. Conditional field: This section allows the field only to appear if it passes the requirement (can add only one conditional field for each element).
    1. Select parent field: Choose a field to trigger the child field.
    2. Is: Enter the parent field value.
  4. Done: Finish customizing this field.
3.12. Date of birth


  1. Field label: enter the content here. You can use it as a heading for Extra Product.
  2. Start year & End year: Choose a range year that your customer could add to the field.
  3. Enable age validation: Click on this label then the app will show the first 20 items. You can type the product's full name to find it quickly.
    1. Operator options.
    2. Require age must be: Enter the specific age.
    3. Error message: Add a message to show up when this age is invalid.
  4. Is required: Tick this option to be unable to skip this label, but you will need to enable the App Behavior in the checkout editor first. Follow this tutorial to enable it.
  5. Conditional field: This section allows the field only to appear if it passes the requirement (can add only one conditional field for each element).
    1. Select parent field: Choose a field to trigger the child field.
    2. Is: Enter the parent field value.
  6. Done: Finish customizing this field.

If you have further questions or need help, don't hesitate to let us know.


    • Related Articles

    • Custom Branding

      To make your Checkout Page have more brand color, Checkout Branding would help you re-style it easily. A. Design System 1. Color 1.1. Canvas This color setting applies to the body background (Mostly affects top of checkout page). For example when ...

    • Custom Plan Explanation

      Our custom plan is designed to meet the specific needs of merchants who have unique requirements for their Checkout customization. We offer a variety of options to choose from, so you can select a plan that perfectly suits your needs and budget. ...

    • Custom Banner

      This feature is to create a delivery announcement at Checkout page. 1. General settings Banner Style: Choose style and color for the banner. Title: Enter your content here to announce customer about their cart. The title will be bold and different ...

    • Custom Cart

      Normally, Shopify does not allow users to change the product quantity and variant when they're on the Checkout page. So customers have to turn back to the Cart page just to adjust it, which wastes too much time and may cause them to feel too ...

    • How to set up multiple Custom Fields?

      You can create multiple Custom Fields forms in our Checkout Plus app. However, you only can use up to 5 Custom Fields forms in your checkout page. Each form you created will have an unique ID. You can find this Form ID after creating the form ...