Shopify themes, liquid, logos, and UX
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.
Solved! Go to the solution
This is an 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.
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.
We explicitly said in the checkout, not the cart. We've come across that post before and it doesn't seem to help.
This is an 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.
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
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.
Thank you - but where/how do I place this, and how do I link to it?
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 }}
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...
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>
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024