CartGenie’s checkout templates contain all the typical information you need to collect at checkout (such as name, email, phone, shipping address, etc.).
But if you have more personalized information you want to collect, CartGenie makes it super easy to do so! This information is then displayed alongside the order details and sent in order emails.
CartGenie currently supports collecting personalized information from the following fields at checkout:
Input (ex: Pet name, Delivery instructions, VAT or Tax ID number)
Text Area (ex: Gift message, Notes)
Checkbox (ex: Marketing opt-in, Terms & conditions)
Radio Button (ex: Preferred contact method, RSVP)
Select (ex: How did you hear about us?, Feedback)
Creating a custom checkout field in CartGenie just requires adding a custom attribute to your field!
First, open the Webflow designer and go to your Checkout page.
Add your preferred field type(s) on the checkout page (such as an input field, text area field, etc.). You can add a label above the field if you wish or add placeholder text to ensure your customers know what to enter.
Next, click into each field you created and add a custom attribute by going to the settings and find the “Custom Attribute” section.
Name:
data-cg-metaValue:
Enter the name you want the field to be called. (example: “Gift Message”). This will be the label for the data in your CartGenie orders page and in order emails.
Gift Message
There are a few things to note when implementing this on various input types…
Be sure to add the custom attribute on every Checkbox itself (not the label)
If you have multiple checkboxes, give each checkbox a unique custom attribute “value” as a name
The customer selection will be displayed as “On” for checked and null for unchecked.
Be sure to add the custom attribute on every Radio Button itself (not the label)
Be sure all radio buttons for a custom attribute are in the same “Group Name” to ensure only one can be selected
Be sure to set each radio’s “Choice Value” to match your label (or preferred name). This will be the displayed selection on the order page.
CartGenie does not support the “Allow multiple selection” feature. If you need customers to select multiple items in a list, we recommend using checkboxes with separate “values” for labels
You can display custom inputs from checkout on the confirmation page.
To do this, simply add a text field that is blank or with generic text like “Answer goes here”. Then, with this text field selected, add the exact same custom attribute name and value as you did for that specific input field on the checkout page.
Repeat this process for every custom field you’ve added to the checkout page.
Example: for a “Gift Message”
I’ve added a bolded label above the text field to make it clear what the answer is for, but this is not required.
Whatever the customer enters at checkout in the field will be displayed in their order alongside the field title.
If you follow the instructions in Step 3 above, your customer’s answers will be added to the confirmation page for them to see after their purchase is complete.
The personalized information entered at checkout will get automatically displayed on the customer’s individual order beneath shipping and billing information.
Example:
It will also get automatically added to the bottom of order emails (sent to both you and the customer).
These customer inputs will be automatically sent to any order webhooks that you have created so they can be used in 3rd party integrations.