How can I add custom field on the checkout page

[joe0906]

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?

[dmwwebartisan]

HI  @joe0906 

Please check the link Custom field at checkout 

Thanks!

[michael-helium]

@joe0906 

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.

[adearriba]

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

[chenster]

---

@adearriba wrote:

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?

[adearriba]

Right now the functionality is:

• Differentiate load events for each step/page of checkout
• Error event for any exception that was not catch in load handlers
• Modify fields inside Information and Payment (billing address fields) steps
  • Add/remove error message and state
  • Create new fields (text, checkbox, dropdowns) and saving the data in checkout attributes
  • Insert a field before/after a field
  • Add tooltips for text fields
• Retrieve the Shipping methods inside the load:shipping event
  • Add a description to shipping methods
  • Get/set shipping method checked status
  • Event when a shipping method is changed with the selected shipping method information
• Retrieve the Payment methods inside the load:payment event
  • Add a description to payment methods with content boxes
  • Get/set payment method checked status
  • Event when a payment method is changed with the selected payment method information

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);
})

[diego_ezfy]

@adearriba 

That is amazing, good job. I am assuming it works exclusively for Plus, correct?

[adearriba]

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.

[chenster]

I'm interested to know more! What is the requirement for Shopify app developer to develop app for Shopify Plus? 

[michael-helium]

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.

[SP4mata]

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.

[dadbelly]

Is this doable without Shopify Plus?

[AlexBoy]

From your library how can I integrate into my checkout.liquid here.

I am very worried about this

"ReferenceError: $checkout is not defined"

[adearriba]

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.

[AlexBoy]

---

@adearriba wrote:

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

---

Do we need to install these 2 on Shopify template checkout.liquid?

npm install //first time to install dependencies
gulp build //build project

[adearriba]

Hi, Alex,

No, you just need to include the checkout.js file that is created in the "/dist" folder.

Best,

Alejandro.

[Louiszzz]

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!

[Diegor]

I need some custom fields on my checkout page, can you help me? Thank you