Articles on: Smart checkout

Add Custom Fields to Contact Forms at Checkout

Plans: All Plans Platforms: Shopify

Overview



AfterShip Personalization’s Smart Content feature allows you to add extra Custom Form Fields to the checkout page to gather additional customer information and personalize their shopping experiences to a great extent.

You can mark some fields on your checkout pages as required or optional.

What you’ll learn



In this article, we will show you:

Custom fields setup
Widget installation
FAQs

Custom fields setup



Log in to your AfterShip Personalization admin dashboard
Navigate to Smart checkout > Checkout page > Smart content > Custom fields
Click Edit




A custom field editor will open



a. Convert the status to Enabled to display the configured custom form fields on the checkout page
b. Configure display rule

If you wish to display the custom form to all customers, select Show to all customers
If you want to display the custom form to a specific set of customers, select Show to specific customers

c. Set up Conditions. Click Add conditions

Conditions represent the eligibility criteria of the customers to whom the custom form fields will be shown.

The following conditions are currently available.

TypeLogicDefinition
Cart value=, >, <, ≥, ≤The total value of the product(s) in the cart
No. of products in cart=, >, <, ≥, ≤The total number of products in the cart
Products in cartContain any of, Do not containYou can select specific products to be included or excluded from the cart
Country/regionIs any of, Is none ofCountry or region of the customer(s) to whom the product(s) will be shipped You can select specific countries and regions from where the products will be shipped/delivered or vice-versa
Date and timeIs before, Is after, Is between (Date range), Is recurring (Date range and day frequency)Date and time when the custom form fields will *be shown to the customers and when it will end or for long it will run The timezone is based on your Shopify settings


Merchants can set up conditions like

Custom form fields will be displayed to the customers at checkout IF CONDITION A and CONDITION B are met (Both conditions should be met)
Custom form fields will be displayed to the customers at checkout IF CONDITION A and CONDITION B or IF CONDITION C and CONDITION D are met (Either set of the conditions (A+B or C+D should be met)
Custom form fields will be displayed to the customers at checkout IF CONDITION A or CONDITION B are met (Either A or B should be met)
Custom form fields will be displayed to the customers at checkout IF CONDITION A or CONDITION B or CONDITION C or CONDITION D are met (Either of the conditions A, B, C or D should be met)
Custom form fields will be displayed to the customers at checkout IF CONDITION A or CONDITION B and CONDITION C are met (Either A or B+C should be met)
Custom form fields will be displayed to the customers at checkout IF CONDITION A and CONDITION B or CONDITION C are met (Either A+B or C should be met)

Action

If the conditions configured by you are met, the corresponding action would be to display the custom form fields created by you on the checkout page.

d. Once conditions are set, define the Introduction settings of the custom fields



Set the font size
Give a title to the custom form. The character limit is 200

e. Set up form fields. You can choose from 4 types of custom fields to create a custom form at checkout



All the added fields will display under Fields



Click the trash bin icon to delete a field
Drag-and-drop the fields to change their order

f. Follow the widget installation steps on the Shopify checkout editor to display the custom fields at checkout.

g. Hit Save

Types of form fields



Free text: You can ask a question, and the customer can write the answer in a text format



For Free text, you can choose Phone, Email, and ID as field formats.

- Phone and email data will be validated by our system for the correct format
- Text and ID will be validated using the regex pattern added by you for input validation

Select the checkbox to make the field required for checkout
Edit field Prompt text explaining what information is expected
Configure whether you want the field to be displayed in full-width or half-width


Checkbox: The field checkbox would be pre-checked when the customer first lands on the checkout box. Select the Field required if you still want the customer to check the box to checkout.


Add what information you want in the Title field


Choice list: Ask questions with multiple choice answers for customers to select from.



Select the Allow customers to select multiple choices if you are looking for a broader perspective on the question asked
Select the checkbox to make the Field required for checkout and customers to opt for only one choice
Input the question in the Title field
Add the choices one by one. Click Add choice for every new choice you want to add
Select the drag-and-drop icon to change the order of the choices
Click the trash icon to delete a choice

Dropdown list: Allows respondents to choose an option from a list of options displayed in the dropdown menu. The dropdown menu is visible once the respondent clicks on the downward arrow.



Select the checkbox to make the Field required for checkout and customers to opt for only one choice
Input the question in the Title field
Configure whether you want the field to be displayed in full-width or half-width
Add the choices one by one. Click Add choice for every new choice you want to add
Select the drag-and-drop icon to change the order of the choices
Click the trash icon to delete a choice

Widget installation



Merely enabling the Custom Fields on AfterShip Personalization will not activate the form on checkout. You need to install the AfterShip Personalization app on the Shopify checkout editor to enable and display the Contact form you’ve configured on the checkout page.



Step 1: Enable the widget in AfterShip


Enable the Custom fields status in the AfterShip Personalization admin and customize its settings.

Step 2: Open the Shopify checkout editor


Select the page where you want to show the custom fields, and in the left panel, click Add app.

Step 3: Select AfterShip Smart Content


Step 4: Select the content type


Click the dropdown menu and choose Custom fields.

Step 5: Allow the app to block checkout


Tick the checkbox to ensure your custom fields work properly at checkout.

Step 6 (optional): Include the app in Shop Pay


Tick the checkbox if Shop Pay is activated for your store.

Step 7: Adjust the widget's location

Drag and drop the widget to your desired location in the left panel. Use the preview in the top right to ensure it looks perfect.



Step 8: Save your Shopify theme

If you have any queries, please contact our support team for quick assistance.


FAQs



1. Can we sync custom field data to the customer data in Shopify?



The additional information gathered via custom fields is automatically synced to Shopify Metafields. If you wish to further sync the Metafields to customer data in the form of Tags, you can use Shopify Flow to set up a specific workflow.



If you have any queries, feel free to connect with our support team for quick assistance.

Updated on: 23/05/2024

Was this article helpful?

Share your feedback

Cancel

Thank you!