Adding custom *required Text box at checkout for customer

[PolEssentials]

**Solved - embedded Easify app and it's worked a treat!**

Hi there, 

I've transitioned from Square and I'm looking for a way to include a mandatory text box at checkout where customers can enter their social media names. If they prefer not to share, they should be able to enter "N/A."

Or is there also an option to attach this requirement to the product page itself?

Additionally, how will the information from either of these options appear in the Order Confirmation emails so that I can easily reference it later?

I'm using Dawn theme; currently on the Basic plan ($65 + fees) since the full access plan with Square was $45 per month, and I'm still in the process of building my business.

The standard checkout notes box is too inconspicuous, and nearly all customers are overlooking it. Previously, when I had this feature set up with Square, it helped me foster a strong customer community. I would like to recreate that experience with Shopify's checkout process.

Thank you,

Nicole

[rajweb]

Hi @PolEssentials ,

  Adding a Mandatory Text Box on Product Pages:

Since Shopify restricts direct checkout field customization on lower-tier plans, adding the field on the product page ensures customers must provide their social media names before checkout.

Follow these steps:

1. Go to Admin > Products > Add New Product or Edit an Existing Product.

2. Use Shopify's line item properties to collect additional information (like the social media handle).

Code Implementation:

follow these steps:

1. Go to Online Store > Themes > Edit Code.

2. Open the product-form  or main-product.liquid file (this varies slightly based on the version).

3. Add the following code inside the <form>  tag where other inputs (like quantity) are defined:

<div class="social-handle-field">
    <label for="social-handle">Enter Your Social Media Handle (or type 'N/A'):</label>
    <input 
        type="text" 
        id="social-handle" 
        name="properties[Social Media Handle]" 
        required 
        placeholder="e.g., @yourhandle or N/A" 
        style="width:100%; padding:10px; margin-top:5px;"
    />
</div>

Now, when a customer fills out this form, their input will appear on the cart page and be passed along with the order.

Displaying the Information in Order Confirmation Emails:

To ensure the social media handle appears in order confirmation emails, follow these steps:

1. Go to Admin > Settings > Notifications > Order Confirmation.

2. In the email template editor, add the following line where you'd like the field to appear:

{% if additional_details.Social Media Handle %}
  <p><strong>Social Media Handle:</strong> {{ additional_details.Social Media Handle }}</p>
{% endif %}

this solution ensures customers provide their social media information and that it appears in order details for easy reference. Let me know if you encounter any challenges!

If I was able to help you, please don't forget to Like and mark it as the Solution!

Best Regard,

Rajat Sharma

[Zel_Minimate]

Hi there, 

You can achieve that with Mini: Custom Fields Personalizer app easily. It allows you to create multiple fields if needed and apply them to selected products/collections. You can also make them required or limit character input for textbox etc. 

Please let me know if you have any questions! 

Best regards,
Zel