Add custom text input field to Shopify Plus checkout

[AesthetiCare]

We would like to add a custom text input field on the "Information" step of the checkout. We've looked through countless forum threads but can't see an actual answer, so if someone could explain with an example that would be greatly appreciated.

On the "Information" step, just above "Shipping address" we would like a field for Purchase Order Number. Nothing fancy, just the text "Purchase Order Number" and a text input field.

Thanks for your help.

[Dynasort]

Hello @AesthetiCare ,

Looks like you need to create a cart attribute field in checkout.liquid. As you probably already know, editing this file is only for Plus Stores, and you may have to reach out to Shopify to get access to it if you can't create it in the theme editor.

Here's a pretty good write up on how to create it and what HTML input to put in there.

https://community.shopify.com/c/Shopify-Design/Cart-Use-cart-attributes-to-collect-more-information/...

[AesthetiCare]

We explicitly said in the checkout, not the cart. We've come across that post before and it doesn't seem to help.

[AesthetiCare · Accepted solution]

This code is the solution:

$(document).on(`page:load page:change`, function() {
  if (Shopify.Checkout.step == 'contact_information'){
    
  //create text input variable
  	var input = 
        	'<div class="section section--purchase-order">' +
				'<div class="section__header">' +
      				'<h2 class="section__title">' +
          				'Purchase Order Number'+
      				'</h2>' +
    			'</div>' +

    			'<div class="section__content">' +
    				'<div class="fieldset">' +
    					'<div class="field__input-wrapper"><label class="field__label field__label--visible" for="checkout_purchase_order_number">Purchase Order Number</label>' +
        					'<input placeholder="Purchase Order Number"  autocorrect="off" class="field__input" aria-required="true" size="30" type="text" value="" name="checkout[attributes][purchaseOrderNumber]" id="checkout_purchase_order_number">' +
    					'</div>' +
    				'</div>' +
				'</div>';
                                       
    //append Purchase Order html content
	$(".section--contact-information:first").after(input);
    //listen for changes on the text input
    $("#checkout_purchase_order_number").change(function(){
  		var obj = $("#checkout_purchase_order_number").val();
      //store value in session storage
    	sessionStorage.setItem("purchase_order_number", obj);
	});
    //get the session storage value and display in text input
    var savedObj = sessionStorage.getItem("purchase_order_number");   
    if (savedObj !== null) {        
    $("#checkout_purchase_order_number").val(savedObj);
      
    }
  }
  
});

If you're using jQuery like we are, you need to make sure to include a link to it in checkout.liquid.

[apbecerra]

Hi, 

I am trying to add two new fields in the checkout section of my store.

I saw your answer however I cannot find the checkout.liquid in my code. Would you know where I can find it?

Thanks!

Andrea

[Dynasort]

Hello @apbecerra ,

Checkout.liquid is usually only available to Shopify Plus plan stores. If you're on Plus, and you still don't see the file, you'll need to contact Shopify and ask them to enable it. Usually just takes a few minutes via their live chat.

[coolblueh2o]

Thank you - but where/how do I place this, and how do I link to it?

[AesthetiCare]

I created a custom JS file in the Assets folder called 'custom.js' which contained the code in the solution. After this I edited the checkout.liquid file to add in the below code just before the closing body tag:

{{ 'custom.js' | asset_url | script_tag }}

[coolblueh2o]

Thank you so much for responding! I tried that to no avail...

Is there more I need to do? 

Here is the end of my checkout.liquid code:

------------------------------------

..............</div>

{{ tracking_code }}
<script async type="text/javascript" src="https://static.klaviyo.com/onsite/js/klaviyo.js?company_id=J4xNRc&module=CONSENT_AT_CHECKOUT"></script>

{{ 'po_number.js' | asset_url | script_tag }}

</body>
</html>.............

------------------------------------

And here is the Actual Result vs Desired Result...

 

 

  

[AesthetiCare]

You may not have jQuery linked in checkout.liquid, make sure it's in the <head> of checkout.liquid like below - note you may be using a different version of jQuery/ or using CDN in which case it would be slightly different:

<!DOCTYPE html>
<html lang="{{ locale }}" dir="{{ direction }}" class="{{ checkout_html_classes }}">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, height=device-height, minimum-scale=1.0, user-scalable=0">
    <meta name="referrer" content="origin">

    <title>{{ page_title }}</title>

    {{ content_for_header }}

    {{ checkout_stylesheets }}
    {{ checkout_scripts }}
    {{ 'jquery-3.6.0.min.js' | asset_url | script_tag }}
  </head>
  <body>