How can I add custom field on the checkout page

joe0906
New Member
9 0 0

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?

0 Likes
dmwwebartisan
Shopify Partner
4581 1031 1327

HI  @joe0906 

Please check the link Custom field at checkout 

Thanks!

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
0 Likes
michael-helium
Shopify Expert
184 1 107

@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.

Michael | Business Development @ Helium
Helium builds apps that merchants depend on:
- Customer Fields
- Meteor Mega Menu
adearriba
Tourist
6 0 1

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

0 Likes
chenster
Pathfinder
86 3 7

@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?

Try the free Sales Popup Maker
0 Likes
adearriba
Tourist
6 0 1

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

@adearriba 

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

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Using a free theme? Improve it with copy/paste code snippets clicking here.
◦ Looking to hire an experienced developer? Same day response: ezfycode@gmail.com.
adearriba
Tourist
6 0 1

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.

0 Likes
chenster
Pathfinder
86 3 7

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

Try the free Sales Popup Maker
0 Likes
michael-helium
Shopify Expert
184 1 107

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.

Michael | Business Development @ Helium
Helium builds apps that merchants depend on:
- Customer Fields
- Meteor Mega Menu
0 Likes