Phone

The Phone option type allows customers to enter a phone number as part of their product selection or configuration. This option is especially useful for products or services that require contact information, such as appointments, deliveries, or customer support.

---

Basic option settings

1. Option Name

This is the internal name for the Phone option within the app’s settings. It helps you manage and organize the option but does not appear on the storefront product page.

2. Label on Product

This is the text that appears above the Phone input field on the product page. It provides context or instructions for the customer, such as "Enter your contact number" or "Phone number for delivery."

3. Label on Cart

This is the text that appears on the Cart summary screen, Checkout, and Order detail page, next to the phone number entered by the customer. It ensures the customer’s phone number is clearly displayed with their order details, such as "Phone: [phone]."

4. Add-On Product

This feature allows you to apply an additional charge based on the phone number provided. While not commonly used for phone numbers, it could apply if a premium service requires a phone contact.

5. Select Default Country

This setting allows you to set a default country for the phone number input, automatically providing the appropriate country code. Customers can still change the country code if needed, but this simplifies the process for the majority of users.

6. Conditional Logic

This feature allows you to set rules that determine when the Phone field should be shown or hidden based on other customer selections. For example, the Phone option might only appear if the customer selects a delivery service that requires a phone contact.

How to set up Conditional logic for your options

---

Advanced settings

1. Required Field

This setting ensures that the customer must enter a phone number before proceeding with their purchase. If enabled, the Phone field becomes mandatory.

2. Hide "Label on Product"

This option allows you to hide the label that typically appears above the Phone input field on the product page, streamlining the interface if the label is unnecessary.

3. Tooltip

This setting allows you to provide additional information in a pop-up message when the customer hovers over the information icon. It provides brief, contextual information without cluttering the interface.

4. Help Text

This setting displays directly beneath the Text option, offering more detailed explanations or instructions. It remains visible as users interact with the form, providing ongoing support and clarity.

5. Placeholder

This is the text displayed inside the Phone input field before the customer enters their number. It acts as a prompt or example, such as "[phone]" or "Enter your phone number."

6. Class Name

This setting allows you to assign a custom CSS class to the Phone field. This enables you to apply specific styling or behavior to the field based on your design needs.