3 Steps you need to add a new field to your Shopify checkout page?
Hi, my friend,
I needed to add some custom fields on the checkout page for the orders that will be shipped to certain countries, so that is a requirement to continue with their orders. I needed to use the content of these fields for some stuff on the backend, for e.g: exporting orders and sorting by that field value.
We gonna learn today how we can add a custom field to our Shopify checkout page, we’ll do one example, let’s add a field where the customers can file their age.
NB: This is only for Shopify Plus Merchants.
So, It was the idea to manipulate the “company” field, but wait what if anyone wants to add a company name to his shipping information? well, we did get rid of this option due to the importance of this field.
So, what is left is to have a custom field added to the checkout form, we will add our field right before the “Shipping Information” section.
To achieve that, we needed some Javascript magic, as you’ll see below the steps.
STEP 1: we need to identify the selector we will use…
We got the selector as follows: .section — shipping-address.
STEP 2: Update the checkout template to add our code, to do that:
- Login to your Shopify Admin.
- Goto Online Stores > Themes.
- On the opened page, next to the theme you want to work on, click on Actions then Edit code.
- From the files on the sidebar, collapse the “Layout” folder:
5. Click on Checkout.liquid. (This is only for Shopify Plus stores). The checkout.liquid checkout needs to be enabled on your Shopify’s side. You can contact Shopify support here to enable this. Or click here to edit the live theme.
STEP 3: Now, after we opened the Checkout.liquid file, we can add our code, At the bottom before the </body> tag, add the following code:
<script type="text/javascript">
let shippingSection = document.querySelector(".section--shipping-address");
if(shippingSection){
let customSection = document.createElement("div");
customSection.classList.add("section");
customSection.innerHTML = `
<div class="section section--custom-fields">
<div class="section__header">
<h2 class="section__title" tabindex="-1">
Additional information
</h2>
</div>
<div class="section__content">
<div class="fieldset">
<div class="field field--required field--show-floating-label">
<div class="field__input-wrapper"><label class="field__label field__label--visible" for="age">Age</label>
<input placeholder="Your age?" id="age" onkeypress="return inputAgeVerify(event)" class="field__input" autocomplete="off" aria-required="true" type="text" name="checkout[attributes][age]">
</div>
</div>
</div>
</div>
</div>`;
shippingSection.parentNode.insertBefore(customSection, shippingSection);
}
function inputAgeVerify(evt){
let charCode = (evt.which) ? evt.which : evt.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;
return true;
}</script>
That's it, all set go to your checkout to verify the new input.
