Re: In Checkout Shipping Address Need to Add Customer Mobile Number Field

In Checkout Shipping Address Need to Add Customer Mobile Number Field

LionEV
Visitor
2 0 0

Dear Friends,

 

In my store Checkout Page Shipping Address Column need to add one extra field for Mobile Number, Can you guide me how to add?

 

Thanks & Regards,

VIjay

 

Replies 3 (3)

LucasBoxstuff
Visitor
1 0 0

Hi VIjay,

 

Maybe visit the site: http://www.boxstuff.nl

 

they wrote an excellent blog about instagram marketing.

 

Ecommpremium
Shopify Partner
512 43 93

Dear Vijay,

To add an extra field for the mobile number in the shipping address column on your store's checkout page, you'll need to make some changes to your Shopify theme's code. Here's a step-by-step guide to help you through the process:

  1. Login to your Shopify admin dashboard.
  2. From the left-hand sidebar, click on "Online Store" and then select "Themes."
  3. On the Themes page, locate the theme you're currently using and click on "Actions."
  4. In the dropdown menu, select "Edit Code."

Now you will need to make modifications to the code files:

  1. In the list of files on the left-hand side, click on "cart.liquid" or "cart-template.liquid" (depending on your theme).
  2. Look for the form code that handles the shipping address. It is typically located within a <form> tag or a section related to the checkout form.
  3. Find the code for the existing fields (such as name, address, etc.) and add the following code snippet after the relevant field:

 

<div>
  <label for="shipping_phone">Mobile Number</label>
  <input type="text" id="shipping_phone" name="checkout[shipping_phone]" value="{{ cart.shipping_phone }}" required>
</div>

 

 

Make sure to adjust the name attribute and the id attribute if necessary.

  1. Save the changes.

Now, you need to make sure the mobile number field is shown on the checkout page:

  1. In the list of files on the left-hand side, click on "checkout.liquid" or "checkout-template.liquid" (depending on your theme).
  2. Locate the form code for the shipping address, usually inside a <form> tag or a section related to the checkout form.
  3. Add the following code snippet after the relevant field:

 

 

 

{% if form.errors contains 'checkout[shipping_phone]' %} <div class="errors"> {{ 'Please enter a valid mobile number.' | t }} </div> {% endif %}

 

 

 

This code will display an error message if the mobile number field is not filled correctly.

  1. Save the changes.

After following these steps, the mobile number field should be added to the shipping address column on your store's checkout page. Remember to thoroughly test the checkout process to ensure everything is working as intended.

If you encounter any issues during the process or if the changes don't reflect as expected, it's always a good idea to reach out to Shopify's support for further assistance.

Best regards,

Ecommpremium

- Did we solve your issue? Like & Mark As Solution to help the community
- SKYPE: ahsanaliawan
- 300+ Video Tutorials
-Website
LionEV
Visitor
2 0 0

Dear Sir,

 

Thank you for your prompt reply, I was tried to add your code but unable to find the exact file, In my template having cart.liquid & cart-template.liquid both dont have checkout form fields.