How to set up the Phone Input block

What the Phone Input block does

The block adds Shopify’s phone field to checkout with your label. When the buyer enters a number and leaves the field, Checkout Ninja saves it to the cart as an attribute or cart metafield, and it carries through to the order.

When to use it

• Get a recipient’s number for gift orders, so the courier can call the person receiving the parcel.
• Collect a second contact, such as a site manager for a B2B delivery.
• Ask for a number only in some checkouts, using visibility conditions on the block.

Before you start

• Decide the attribute name for the number, for example recipient_phone. The Phone Input doesn’t fall back to a default name, so set one.

Set it up

1. In Checkout Ninja, go to Blocks and click Create New Block. Then click Start Fresh, or open an existing block you want to add it to.
2. Click Add block and choose Phone Input.
3. Enter a Label, for example Recipient phone.
4. Under Where to store the value, choose Attribute and enter Name of the attribute. Or choose Metafield and enter a Namespace and Key.
5. Click Done. Check that Status is Active, then click Save and copy the Block ID.
6. Click Open Checkout Editor. Add the Custom Block app block where you want the field, paste the Block ID and save.

Settings reference

Setting	What it does	Default
Label	The field’s label in checkout.	Phone
Default Value	Not used in checkout in the current version. The field starts empty.	Empty
Required	Yes stops an empty value being saved. It shows no error and doesn’t block checkout.	Blank (not required)

Where to store the value

Setting	What it does	Default
Attribute → Name of the attribute	Saves the number as a cart attribute. It appears on the order under Additional details.	None, set one
Metafield → Namespace and Key	Saves the number as a cart metafield, written as namespace.key.	None

Verify it worked

1. Open your checkout. The phone field shows with your label.
2. Enter a number, click outside the field, and place a test order.
3. Open the order in Orders. With attribute storage, the number is under Additional details with your attribute name.
4. Negative check: Shopify’s own contact and shipping phone fields are unaffected and still behave as before.

Limitations

• Shopify Plus only for placement in the checkout steps. That’s a Shopify rule for all checkout apps.
• The block doesn’t block checkout, even with Required set to Yes.
• With Required on, clearing the field keeps the previous number saved, because empty values aren’t written.
• Default Value isn’t applied in checkout.
• The number isn’t copied to the customer record or used for Shopify SMS notifications.

Troubleshooting

The number isn’t on the order. Check Where to store the value has a name. A blank name means nothing is saved. The value is saved when the buyer leaves the field.

A buyer removed their number, but it’s still on the order. With Required set to Yes, an empty value isn’t saved, so the last number stays. Set Required to No if buyers should be able to clear it.

The field is empty even though I set a Default Value. Default Value isn’t used in checkout in the current version. Put example formatting in the Label instead.