Have your say in Community Polls: What was/is your greatest motivation to start your own business?
Our Partner & Developer boards on the community are moving to a brand new home: the .dev community forums! While you can still access past discussions here, for all your future app and storefront building questions, head over to the new forums.

Re: Checkout Extensibility | Populate Customer Fields

Solved

Checkout Extensibility | Populate Customer Fields

jchops
Shopify Partner
10 2 2

Is it possible to populate the customers email, first name and last name fields during checkout based on the line item properties? Wondering if we can do this via a custom app but as far as I can tell we cannot manipulate the DOM.

Accepted Solution (1)
Liam
Community Manager
3108 344 889

This is an accepted solution.

Sorry - yes you're right this only allows you to edit the line items. It looks like the only way to prefill is to pass parameters via a checkout link, but you won't know the parameters until customers perform an action on the storefront. 

Liam | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

View solution in original post

Replies 9 (9)

Liam
Community Manager
3108 344 889

Hi Jchops,

 

I'm not sure how the line item properties would give you data to pre-fill the checkout fields - can you explain the use case further here?

Liam | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

jchops
Shopify Partner
10 2 2

Hi Liam,

 

Customers fill out this information when adding certain items to their cart.

 

Best,


Jared

Liam
Community Manager
3108 344 889

Hi again Jared,

 

Would the Cart Transform API help with achieving this effect?

Liam | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

jchops
Shopify Partner
10 2 2

Hm, not sure how that would allow us to populate the email, first name and last name of the customers information in checkout?

Liam
Community Manager
3108 344 889

This is an accepted solution.

Sorry - yes you're right this only allows you to edit the line items. It looks like the only way to prefill is to pass parameters via a checkout link, but you won't know the parameters until customers perform an action on the storefront. 

Liam | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

jchops
Shopify Partner
10 2 2

Oh! Actually this may work (well a slight variation of it), thank you!

oContis_Studio
Shopify Partner
9 0 2

Hi @Liam as of now, is this still the best way of prefilling checkout inputs? 
I find it strange that this is nowhere documented, officially. 

Also when i do it on my side, it seems to work on the first checkout load, however, if customer goes back to storefront and then back to checkout, the prefills are gone. 

 

Mind in my case, i am appending the url params by hijacking the submit event on the cart page. So basically i look for a local storage item and if it is there, i listen for the submit event from cart to hijack the redirect and add the url params. This seems to work but only on the first try. 

My assumption is that shopify's checkout session details preceed the url params, could that be right?

Is there anything planned to support this in the future? 

 

We have a very simple scenario where customers go through a quiz which saves some data to localStorage and we would like to pass that info to the checkout inputs so they don't have to do it again on checkout. 

Let me know what you think. 

Kind regards

London based, creative studio, dedicated to delivering exceptional E-commerce solutions for Shopify Plus merchants and brand owners
https://ocontis.studio/

jamalali81
Shopify Partner
25 0 4

Did you manage to solve this?

 

I am trying to dynamically update the shipping address zip code. I have tried this but nothing seems to be happening:

 

await api.applyShippingAddressChange({
type: 'updateShippingAddress',
address: {
zip: state.deliveryArea[1]
}
});

 

Any help would be much appreciated!

Liam
Community Manager
3108 344 889

Hi Jamalali81,

 

Currently the method where you pass parameters via a checkout link is the only way to pre-fill fields. 

Liam | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog