How to add phone number in customer sign up page Refresh theme?

How to add phone number in customer sign up page Refresh theme?

Saminusa
Tourist
4 0 1

Hello,

 

How can I add phone number field in the customer sign up page. And also have the customer verify their account using phone number instead of email.

 

thank you in advance,

 

Replies 6 (6)

Samia_Akram22
Shopify Partner
60 10 15

@Saminusa 

Certainly! To include a phone number field in your customer sign-up page and enable account verification through phone numbers instead of emails on a Shopify theme, follow these steps:

1. Adding the Phone Number Field:
- Log in to your Shopify admin panel.
- Access the "Online Store" section and choose "Themes."
- Click on "Actions" for your current theme and select "Edit code."
- Locate the template responsible for customer registration, commonly found in the "Sections" or "Templates" folder.
- Open the relevant file (e.g., `register.liquid`, `create-account.liquid`, etc.).
- Insert the following HTML code to add a phone number field:
html
<label for="customerPhone">Phone Number</label>
<input type="tel" id="customerPhone" name="customer[phone]" required>
- Save the changes made to the file.

2. Enabling Phone Number Verification:
- Shopify doesn't natively support phone number verification, so you'll need a third-party app from the Shopify App Store for this purpose.
- Choose an app that provides phone number verification during account creation (e.g., SMSBump, Voodoo SMS, Vonage, etc.).
- Install the app and follow their setup instructions for integrating phone number verification into your signup process.
- Configure the app's settings to enable phone number verification for customer accounts.

3. Adjusting Account Creation Flow:
- After installing the third-party app:
- Follow the app's guidelines to configure phone number verification for new customer accounts.
- Review the app's documentation for any code adjustments needed in your customer registration template to initiate the phone verification process. The app will likely provide guidance on this.

 

Problem Solved? ✔Accept and Like solutions to help future merchants.
Saminusa
Tourist
4 0 1

Hello,

 

thank you for the quick reply, I will certainly try the steps above ^ and reply back later with an update if it works.

 

Thank you 

Saminusa
Tourist
4 0 1

2 issues came up.

 

1. the phone number field is overlapping the already existing email field on the customer sign up page.

 

2. if customer provides phone number upon signing up, it does not show under "Customer Contact info" in the admin page. only the email shows up for contact info, which means the code added in is just for show and not functional?

Samia_Akram22
Shopify Partner
60 10 15

@Saminusa 

To address the issues you're facing:

1. Overlapping Fields:
- To prevent the phone number field from overlapping the existing email field, you'll need to adjust the layout or styling of the form fields in the `customers/register.liquid` or `sections/register.liquid` file.
- Ensure that the HTML elements for the phone number field are properly structured within the form. Adjust CSS styling or use specific classes/IDs to position the fields properly and prevent overlap.
- For instance, you might need to adjust the CSS styles for the input fields to control their positioning, margins, or padding to avoid overlapping.

2. Phone Number Visibility in Admin Page:**
- By default, Shopify's admin dashboard primarily displays customer contact information such as email for communication purposes.
- If you've added the phone number field to the customer registration form but it's not showing up in the admin page under "Customer Contact info," it's because the default admin view doesn't include the phone number field.
- To make the phone number visible in the admin page:
- Go to the customer details page in your Shopify admin.
- Click on "Edit" for the specific customer whose details you want to view.
- Shopify's default view might not display the phone number in the summary, but you should see the phone number under the "Address" section within the customer's profile.
- If you need the phone number to be more prominent, consider using a Shopify app or customizing the admin view with additional coding to display the phone number in the summary section.

Ensure that the changes you make to the code and styling are correctly saved and applied. Always test these changes in a staging environment or in preview mode to ensure they work as expected before making them live.

If you're encountering difficulties with the code or if the changes aren't reflecting as expected, consider reaching out to Shopify's support or a developer who specializes in Shopify to help troubleshoot and make the necessary adjustments for your specific theme setup.Hope this helps.Thanks

Problem Solved? ✔Accept and Like solutions to help future merchants.
baggio_giacomo
Shopify Partner
12 0 1

Hi @Samia_Akram22  🙂

 

The piece of code to save the phone number on the customer that you've given on the first answer doesn't work

I think you need an app to do so

Saminusa
Tourist
4 0 1

Screenshot 2023-12-28 at 16-10-44 Create Account.csv.png