Shopify Product Text Personalization

I need a quick, clean way for shoppers to add custom text to certain items on my Shopify store. The brief is simple: a “Personalize” button must appear directly on each product page. When clicked, it reveals a single-line text box where customers can enter a name, initials, or short phrase. This is the only form of personalization I’m after—no images or color pickers—so the UI can stay lightweight.

The text customers enter has to flow all the way through to the cart, checkout, and final order details so my fulfilment team sees it without extra steps. My theme’s styling and page speed are both important, so the solution should be injected cleanly with Liquid, JS, and Shopify AJAX APIs rather than heavy third-party widgets. I’d also like a concise code snippet or clear instructions so I can enable or disable the feature per product in the future.

Acceptance criteria:
• “Personalize” button visible on the product page and styled to match the existing theme.
• Clicking it reveals a text box; no page reloads.
• Entered text persists through cart, checkout, and appears in the order admin.
• Works on desktop and mobile and does not conflict with current apps or scripts.

If you’ve done similar Shopify customizations, let me see a quick example or outline how you’ll approach it and I’ll get you access to the store right away.