I see some store can add the ‘section section–custom-fields’ on the checkout page, and I open the checkout.liquid found the ‘section section–custom-fields’ in the {{ content_for_layout }}.
But I can’t edit the {{ content_for_layout }}.
How can I add the ‘section section–custom-fields’ on the checkout page?
checkout.liquid is only accessible to stores on Shopify Plus. (see docs)
If you’re not on Plus, then you’ll have to add fields to the cart page instead. There are a number of ways to handle this, and the Customer Fields app may prove helpful if you need to collect certain data from customers prior to checkout. One thing you might consider is requiring customer accounts before checkout and adding those custom fields to your registration page.
Hello, I just wanted to add that, if you have access to the checkout.liquid file, I am creating a JS library to modify the checkout page with ease. I already have a couple of functionality working that might help you. More is coming soon.
It is free to use: https://github.com/adearriba/ShopifyCheckoutJS
Interesting. What functionality did you make it work? Care to share a screenshot please?
Right now the functionality is:
For example you can add a custom field in the information step that will be saved in the order notes like this:
$checkout.on('load:information', function (e) {
var field = new TextField({
name: 'document',
//Optional properties
type: 'text',
placeholder: 'Enter your document number',
label: 'Document Number',
size: 30,
defaultValue: '',
tooltip: 'We need your document number for regulatory reasons'
});
//Insert before Phone field
$checkout.fields["checkout_billing_address_phone"].insertBefore(field);
})
That is amazing, good job. I am assuming it works exclusively for Plus, correct?
Thank you. 
Yes! It works just for Plus, since you need to add the javascript to checkout.liquid for it to work.
If you have any suggestion for this library, please let me know.
I’m interested to know more! What is the requirement for Shopify app developer to develop app for Shopify Plus?
What requirements do you mean? You should know that in order to list an app on the App Store, it must be available to ALL Shopify merchants (you cannot launch a public app for just Plus stores) unless you’re building a Plus Certified App.
This is a great addition to the checkout page! Awesome job. I’ve been looking for ways to modify the checkout page, but I am stuck with inline item custom fields without the plus membership. My challenge is passing those custom field data into a Shopify webhook that is pushing most of the form data. I would like to have those custom fields be within the webhook post data. If it’s not available could we make an additional HTTP post with the custom fields data to any endpoint? That would be an excellent addition to the library!
What I need:
Ability to add custom fields at checkout
Ability to send those custom data fields to an API/endpoint.
Challenges:
I can only add custom fields to the inline item page.
Those fields are not passed over to the Shopify checkout webhook.
Is this doable without Shopify Plus?
From your library how can I integrate into my checkout.liquid here.
I am very worried about this
“ReferenceError: $checkout is not defined”
Do we need to install these 2 on Shopify template checkout.liquid?
npm install //first time to install dependencies
gulp build //build project
Hi, Alex,
No, you just need to include the checkout.js file that is created in the “/dist” folder.
Best,
Alejandro.
Hello Alex,
I improved a lot with version 2.0 and you can get it now as an NPM package too.
Merged main branch in github: adearriba/ShopifyCheckoutJS
NPM Package: @adearriba /shopify-checkout
Best,
Alejandro.
I need some custom fields on my checkout page, can you help me? Thank you
Hello, I include the resulting file checkout.js in checkout.liqiud and it still doesn’t work. It shows “Uncaught ReferenceError: $checkout is not defined”. Could you please help me. Thank you!