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.
After clicking on the Create form button, you will be directed to the Template page to select the form template. Each template would have different types which are suitable for your needs, such as Delivery instructions, Customer Survey, Gift Message, etc.
You can choose Blank Form to personalize the form.
Please kindly enter an internal name for the form (e.g., "Blank Form"). This name is for internal reference only and will not be visible to customers.
Priority: Set a priority number to determine the order of forms if multiple forms have the same condition. Lower priority numbers appear before higher ones.
Display settings: You can manage to hide the form on Point-of-Sale (POS) system or Online store by choosing those options.
Display conditions: You can add multiple conditions for each form.
All rules pass: The form can only be shown if all conditions are met.
Any rule passes: If customer reaches one of these conditions, the form will be displayed.
Schedule settings:
Start date: Define when the form should begin displaying.
Set end date: Enable this option to schedule when the form will stop displaying.
Enable repeat: Check this box to repeat the form display on specific days. You can choose the days of the week for recurring schedules.
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.
Heading content: enter the heading title here.
Text size: custom sizes for the title as Small, Medium, and Large.
Text alignment: align heading title as Left, Center, and Right.
Field width: Two options are full width with the space at the checkout section and half-width.
Conditional field: This section allows the field only to appear if it passes the requirement (can add only one conditional field for each element).
Select parent field: Choose a field to trigger the child field.
Is: Enter the parent field value.
Done: Finish customizing this field.
Similar to the Heading field, but Text block could be modified in color and style.
Content: enter the text block content here. You can write much more than the Heading field.
Text size: custom sizes for the title as Extra small, Small, Base, Medium, Large, and Extra Large.
Text color: choose the color for the content with Normal, Accent, Subdued, Info, Success, Warning, and Critical.
Text style: make the text bold or italic with Normal, Stress, Offset, and Strong.
Text alignment: align heading title as Left, Center, and Right.
Field width: Two options are full width with the space at the checkout section and half-width.
Conditional field: This section allows the field only to appear if it passes the requirement (can add only one conditional field for each element).
Select parent field: Choose a field to trigger the child field.
Is: Enter the parent field value.
Done: Finish customizing this field.
Field label: enter the content here to let your customer know which kind of information they should leave.
Field type: this field has 3 types that are text, number and phone.
Max length: Enter the maximum of characters that you allow customer to add in this field. You can leave it blank for no limit.
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.
Field width: Two options are full width with the space at the checkout section and half-width.
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.
Conditional field: This section allows the field only to appear if it passes the requirement (can add only one conditional field for each element).
Select parent field: Choose a field to trigger the child field.
Is: Enter the parent field value.
Done: Finish customizing this field.
It is the same as the Text Field, but we can write more content and have fewer customization options.
Field label: Enter the content here to let your customer know which kind of information they should leave.
Max length: Enter the maximum of characters that you allow customer to add in this field. You can leave it blank for no limit.
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.
Field width: Two options are full width with the space at the checkout section and half-width.
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.
Conditional field: This section allows the field only to appear if it passes the requirement (can add only one conditional field for each element).
Select parent field: Choose a field to trigger the child field.
Is: Enter the parent field value.
Done: Finish customizing this field.
Field label: Enter the name for Date Picker.
Field width: Two options are full width with the space at the checkout section and half-width.
Exclude date picker: Enable this option to exclude date picker.
Exclude specific date.
Exclude days of week.
Exclude date range.
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.
Conditional field: This section allows the field only to appear if it passes the requirement (can add only one conditional field for each element).
Select parent field: Choose a field to trigger the child field.
Is: Enter the parent field value.
Done: Finish customizing this field.
Field label: Enter the content here.
Checked by default: Auto tick in this checkbox.
Field width: Two options are full width with the space at the checkout section and half-width.
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.
Conditional field: This section allows the field only to appear if it passes the requirement (can add only one conditional field for each element).
Select parent field: Choose a field to trigger the child field.
Is: Enter the parent field value.
Done: Finish customizing this field.
Field label: Enter the display name for the field.
Checked by default: Auto turn on the toggle button.
Text alignment: align heading title as Left, Center, and Right.
Field width: Two options are full width with the space at the checkout section and half-width.
Conditional field: This section allows the field only to appear if it passes the requirement (can add only one conditional field for each element).
Select parent field: Choose a field to trigger the child field.
Is: Enter the parent field value.
Done: Finish customizing this field.
Field label: Enter the content here.
Allow multiple choices: At default, customers can only choose one option. If you tick this box, they can select several options.
Options: Enter your content in this field and click Add option to create more options below.
Field width: Two options are full width with the space at the checkout section and half-width.
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.
Conditional field: This section allows the field only to appear if it passes the requirement (can add only one conditional field for each element).
Select parent field: Choose a field to trigger the child field.
Is: Enter the parent field value.
Done: Finish customizing this field.
Field label: Enter the content here.
Options: Add your content to that field and click Add option to create more options below.
Field width: Two options are full width with the space at the checkout section and half-width.
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.
Conditional field: This section allows the field only to appear if it passes the requirement (can add only one conditional field for each element).
Select parent field: Choose a field to trigger the child field.
Is: Enter the parent field value.
Done: Finish customizing this field.
Add-on Product is to recommend customers add one more product before submitting checkout.
Field label: enter the content here. You can use it as a heading for Extra Product.
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.
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.
Disable None option: Once you disable this option, customers can not deselect the product option (only show if you enable the Multiple product options.
Show product image: Choose this option to show the product image.
Show product title: Choose this option to show the product name.
Show product price: Choose this option to show the product price.
Field width: Two options are full width with the space at the checkout section and half-width.
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.
Conditional field: This section allows the field only to appear if it passes the requirement (can add only one conditional field for each element).
Select parent field: Choose a field to trigger the child field.
Is: Enter the parent field value.
Done: Finish customizing this field.
Title: enter the title and then upload your image.
Image width & height: Modify your image width and height.
Button link: Add your link so that when customers click on the image, our app will open a link.
Image fit: Choose the stretch for the image.
Alignment: align the image as Left, Center or Right.
Field width: Two options are full width with the space at the checkout section and half-width.
Conditional field: This section allows the field only to appear if it passes the requirement (can add only one conditional field for each element).
Select parent field: Choose a field to trigger the child field.
Is: Enter the parent field value.
Done: Finish customizing this field.
A line to separate those fields.
Size: Adjust the line size with Small, Base, Large, and Extra Large options.
Field width: Two options are full width with the space at the checkout section and half-width.
Conditional field: This section allows the field only to appear if it passes the requirement (can add only one conditional field for each element).
Select parent field: Choose a field to trigger the child field.
Is: Enter the parent field value.
Done: Finish customizing this field.
Field label: enter the content here. You can use it as a heading for Extra Product.
Start year & End year: Choose a range year that your customer could add to the field.
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.
Operator options.
Require age must be: Enter the specific age.
Error message: Add a message to show up when this age is invalid.
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.
Conditional field: This section allows the field only to appear if it passes the requirement (can add only one conditional field for each element).
Select parent field: Choose a field to trigger the child field.
Is: Enter the parent field value.
Done: Finish customizing this field.
If you have further questions or need help, don't hesitate to let us know.
Let's explore the features of Custom Fields extension.
Template
After clicking on the Create form button, you will be directed to the Template page to select the form template. Each template would have different types which are suitable for your needs, such as Delivery instructions, Customer Survey, Gift Message, etc.
You can choose Blank Form to personalize the form.
Custom Field name
Please kindly enter an internal name for the form (e.g., "Blank Form"). This name is for internal reference only and will not be visible to customers.
Advance settings
Priority: Set a priority number to determine the order of forms if multiple forms have the same condition. Lower priority numbers appear before higher ones.
Display settings: You can manage to hide the form on Point-of-Sale (POS) system or Online store by choosing those options.
Display conditions: You can add multiple conditions for each form.
All rules pass: The form can only be shown if all conditions are met.
Any rule passes: If customer reaches one of these conditions, the form will be displayed.
Schedule settings:
Start date: Define when the form should begin displaying.
Set end date: Enable this option to schedule when the form will stop displaying.
Enable repeat: Check this box to repeat the form display on specific days. You can choose the days of the week for recurring schedules.
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.
1. Heading
Heading content: enter the heading title here.
Text size: custom sizes for the title as Small, Medium, and Large.
Text alignment: align heading title as Left, Center, and Right.
Field width: Two options are full width with the space at the checkout section and half-width.
Conditional field: This section allows the field only to appear if it passes the requirement (can add only one conditional field for each element).
Select parent field: Choose a field to trigger the child field.
Is: Enter the parent field value.
Done: Finish customizing this field.
2. Text block
Similar to the Heading field, but Text block could be modified in color and style.
Content: enter the text block content here. You can write much more than the Heading field.
Text size: custom sizes for the title as Extra small, Small, Base, Medium, Large, and Extra Large.
Text color: choose the color for the content with Normal, Accent, Subdued, Info, Success, Warning, and Critical.
Text style: make the text bold or italic with Normal, Stress, Offset, and Strong.
Text alignment: align heading title as Left, Center, and Right.
Field width: Two options are full width with the space at the checkout section and half-width.
Conditional field: This section allows the field only to appear if it passes the requirement (can add only one conditional field for each element).
Select parent field: Choose a field to trigger the child field.
Is: Enter the parent field value.
Done: Finish customizing this field.
3. Text field
Field label: enter the content here to let your customer know which kind of information they should leave.
Field type: this field has 3 types that are text, number and phone.
Max length: Enter the maximum of characters that you allow customer to add in this field. You can leave it blank for no limit.
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.
Field width: Two options are full width with the space at the checkout section and half-width.
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.
Conditional field: This section allows the field only to appear if it passes the requirement (can add only one conditional field for each element).
Select parent field: Choose a field to trigger the child field.
Is: Enter the parent field value.
Done: Finish customizing this field.
4. Text Field Multiline
It is the same as the Text Field, but we can write more content and have fewer customization options.
Field label: Enter the content here to let your customer know which kind of information they should leave.
Max length: Enter the maximum of characters that you allow customer to add in this field. You can leave it blank for no limit.
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.
Field width: Two options are full width with the space at the checkout section and half-width.
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.
Conditional field: This section allows the field only to appear if it passes the requirement (can add only one conditional field for each element).
Select parent field: Choose a field to trigger the child field.
Is: Enter the parent field value.
Done: Finish customizing this field.
5. Date picker
Field label: Enter the name for Date Picker.
Field width: Two options are full width with the space at the checkout section and half-width.
Exclude date picker: Enable this option to exclude date picker.
Exclude specific date.
Exclude days of week.
Exclude date range.
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.
Conditional field: This section allows the field only to appear if it passes the requirement (can add only one conditional field for each element).
Select parent field: Choose a field to trigger the child field.
Is: Enter the parent field value.
Done: Finish customizing this field.
6. Checkbox
Field label: Enter the content here.
Checked by default: Auto tick in this checkbox.
Field width: Two options are full width with the space at the checkout section and half-width.
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.
Conditional field: This section allows the field only to appear if it passes the requirement (can add only one conditional field for each element).
Select parent field: Choose a field to trigger the child field.
Is: Enter the parent field value.
Done: Finish customizing this field.
7. Switch
Field label: Enter the display name for the field.
Checked by default: Auto turn on the toggle button.
Text alignment: align heading title as Left, Center, and Right.
Field width: Two options are full width with the space at the checkout section and half-width.
Conditional field: This section allows the field only to appear if it passes the requirement (can add only one conditional field for each element).
Select parent field: Choose a field to trigger the child field.
Is: Enter the parent field value.
Done: Finish customizing this field.
8. Choice list
Field label: Enter the content here.
Allow multiple choices: At default, customers can only choose one option. If you tick this box, they can select several options.
Options: Enter your content in this field and click Add option to create more options below.
Field width: Two options are full width with the space at the checkout section and half-width.
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.
Conditional field: This section allows the field only to appear if it passes the requirement (can add only one conditional field for each element).
Select parent field: Choose a field to trigger the child field.
Is: Enter the parent field value.
Done: Finish customizing this field.
9. Dropdown
Field label: Enter the content here.
Options: Add your content to that field and click Add option to create more options below.
Field width: Two options are full width with the space at the checkout section and half-width.
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.
Conditional field: This section allows the field only to appear if it passes the requirement (can add only one conditional field for each element).
Select parent field: Choose a field to trigger the child field.
Is: Enter the parent field value.
Done: Finish customizing this field.
10. Add-on Product
Add-on Product is to recommend customers add one more product before submitting checkout.
Field label: enter the content here. You can use it as a heading for Extra Product.
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.
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.
Disable None option: Once you disable this option, customers can not deselect the product option (only show if you enable the Multiple product options.
Show product image: Choose this option to show the product image.
Show product title: Choose this option to show the product name.
Show product price: Choose this option to show the product price.
Field width: Two options are full width with the space at the checkout section and half-width.
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.
Conditional field: This section allows the field only to appear if it passes the requirement (can add only one conditional field for each element).
Select parent field: Choose a field to trigger the child field.
Is: Enter the parent field value.
Done: Finish customizing this field.
11. Image
Title: enter the title and then upload your image.
Image width & height: Modify your image width and height.
Button link: Add your link so that when customers click on the image, our app will open a link.
Image fit: Choose the stretch for the image.
Alignment: align the image as Left, Center or Right.
Field width: Two options are full width with the space at the checkout section and half-width.
Conditional field: This section allows the field only to appear if it passes the requirement (can add only one conditional field for each element).
Select parent field: Choose a field to trigger the child field.
Is: Enter the parent field value.
Done: Finish customizing this field.
12. Divider
A line to separate those fields.
Size: Adjust the line size with Small, Base, Large, and Extra Large options.
Field width: Two options are full width with the space at the checkout section and half-width.
Conditional field: This section allows the field only to appear if it passes the requirement (can add only one conditional field for each element).
Select parent field: Choose a field to trigger the child field.
Is: Enter the parent field value.
Done: Finish customizing this field.
13. Date of birth
Field label: enter the content here. You can use it as a heading for Extra Product.
Start year & End year: Choose a range year that your customer could add to the field.
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.
Operator options.
Require age must be: Enter the specific age.
Error message: Add a message to show up when this age is invalid.
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.
Conditional field: This section allows the field only to appear if it passes the requirement (can add only one conditional field for each element).
Select parent field: Choose a field to trigger the child field.
Is: Enter the parent field value.
Done: Finish customizing this field.
If you have further questions or need help, don't hesitate to let us know.
Updated on: 19/01/2025
Thank you!