Add Custom Field In Shopify Cart Page
Looking for a way to add a custom field to Shopify cart pages?
While working with any eCommerce platform, you might need to have some extra features or modifications in the default behavior or flow. In Shopify, if you need to collect some extra information from the customer then you need to have the extra input fields added.
In this article, I’ll show you step-by-step how to add custom fields to the Shopify cart page.
For this case, we are considering the Shopify default theme “Debut”. If your store has any other theme then the file's name and code might be different but the overall idea of adding the custom changes will be easy for you to apply in those themes as well.
You can create and add as many custom form fields to your cart page. There is one tool called Shopify UI Elements Generator to easily generate the HTML and Liquid file code required for each form field that you want to add to your cart page.
Go to Shopify UI Elements Generator and select the type of form field, provide the field label. You can see the code generated automatically based on your provided values. We need to put this code on our theme’s cart page .liquid file.
Login to Shopify admin and navigate to Online Store > Themes.
Choose your current theme, click on Actions dropdown > Edit code link. You will be able to see the theme files which we can edit.
Click on Sections and search for cart-template.liquid. Click on it, and you will see the code of the cart page.
Decide the area of the cart page you want to add the custom page (between the <form> and </form> tags). In this example, we will place our copied code for the custom field “Ticket Number” below the shipping text(marked in the above image) you can place it anywhere between the form tags as per your requirements.
Save the file and go to the front end site cart page and refresh it. Now you can see the custom field added to the cart page.
Enter the value and complete the order process.
Now go to Admin Panel > Orders listing. Select the recently created order and check the right side section. You can see our custom cart field value is visible.
If you are using the Shopify Rest API, then also you can see this custom field in order detail’s response under the notes_attributes key.
