Adding extra field for a shipping method

Highlighted
New Member
4 0 0

Hello,

I am looking for a way how to customize the "Shipping method" stage in the checkout process.

Currently we have there a selection of several shipping methods. Now I have to add a new shipping method (automated post stations) that has an extra field for user to specifie: dropdown with a long list of post station locations. User would have to choose the station where they want the goods to be delivered to, before moving further to payment method.

The list of post stations can be retrieved from the service provider's API, so that would be a JavaScript code that populates that dropdown.

Please suggest, how to:

- Add custom JavaScript code to the page that would then activate when that particular shipping method is selected
- Store the value from the custom dropdown in the order dataset so that it can be used in the next stage (where the selected shipping method is shown at the top), and in the order info that is stored when the custom has confirmed their order. 

0 Likes
Highlighted
Shopify Staff
Shopify Staff
816 50 103

Hi there!

Don here from Shopify!

Thanks for outlining your particular position here on our merchant forums. :)

It would not actually be possible to edit the code of the checkout area in any way for security reasons so the process you had hoped to put in place would not be feasible for now.

You might instead be able to accomplish what you need by setting up more shipping rates that would correspond to each of these collection stations you refer to.

It might also be possible to combine this with order notes from the cart page to help your customers specify where they would like to collect from?

While it's not possible to edit the checkout area as outlined, it could still be the case that you might be able to get a custom solution created by an Expert Developer to capture this information before the checkout flow?

I trust this information will help clarify what is and is not possible here even if we did not manage to arrive at a complete solution.

All the best!

Regards,
Don

Don | Social Care @ 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 the Shopify Help Center or the Shopify Blog

0 Likes
Highlighted
New Member
4 0 0

Thanks, Don!

Unfortunately there are too many stations, so adding all of them to the shipping rates list is not practical solution.

Implementing custom field along the order notes field (with a help of JavaScript) could somewhat work, but it's quite confusing to put the options there, especially if the customer does not have plans to use that shipping method.

I plan to experiment with this approach:

https://freakdesign.com.au/blogs/news/18544989-adding-javascript-to-shopify-checkout

Although it's hacky as hell, and perhaps will work only until you guys close that window, perhaps it's worth a try.

0 Likes