How to add customized text field in the product page?

Topic summary

A Shopify store owner seeks to add a conditional text field on product pages that appears only when customers select a “Customize (+$5)” option from a dropdown menu.

Solutions Offered:

  • Manual code implementation: A tutorial link was shared for adding custom text fields through code modifications. However, one user reported that while the field displays correctly, the custom text doesn’t carry through to the cart or order confirmation.

  • Easify Product Options app: A free app solution was recommended that supports:

    • Dropdown options with pricing
    • Text box/area fields for customization
    • Conditional logic to show/hide fields based on selections
    • Alternative input types (checkbox, switch) for binary choices
  • Video tutorial: A YouTube guide demonstrates adding custom fields without apps, though specifics weren’t detailed in the thread.

Outstanding Issues:

  • The code-based solution has a data persistence problem where custom text isn’t saved to orders
  • Multiple users requested guidance on applying customization fields to specific products or collections only, rather than store-wide implementation

The discussion remains open with unresolved questions about selective product application and the cart data issue.

Summarized with AI on October 29. AI used: claude-sonnet-4-5-20250929.

Hello.. So I am trying to see if anyone out there was able to figure out how to add customized text field in the product page. I already have the customize drop down menu:: one (none $0) and the other (customize +$5).

So what I need help in is:: when I click on (customize +$5), how can I add a text box that would pop up in order to insert a customized word? Is there a free code out there that I can pop in? Would appreciate any help! Thanks!

Hi @Bakisisters

Please have a look at this tutorial: Product Pages - Get Customization Information For Products
This will allow your customers to add the custom text. In the Shopify order admin, you will see the text entered.

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any questions!

Thanks.. will try it out!

1 Like

@AvadaCommerce I followed this tutorial and successful implemented the code. I am able to type in custom text on the products that I want. But that text is lost moving forward. There is no record of the text in the cart or after the order is placed. Can you assist with this?

Hi @Bakisisters ,

I’m curious to know how you resolved your issue. Additionally, I have a suggestion that might help you and other members in the future. Consider using the free Easify Product Options app. It’s a user-friendly solution for creating custom options and showing/ hiding certain options as you want :hugs: .

Here’s a quick demonstration of how you can set it up:

  • Add a Dropdown option with two values: “None ($0)” and “Customize (+$5).”

  • Add a Text Box or Text Area option so customers can enter a customized word.

  • Set up Conditional Logic to display the Text Box option only when customers select the “Customize” value from the dropdown.

  • Assign these custom options to your relevant products.

Furthermore, regarding the Dropdown, considering that you only have 2 options available, namely “None” and “Customize,” I recommend exploring alternative option types that may be more suitable. Options like Checkbox or Switch could be considered instead of a Dropdown.

That’s it! It’s a straightforward process that takes just a few minutes. Give the app a try now and see the difference it can make :raising_hands: !

2 Likes

@Bakisisters I created a video to show how you can add extra custom product fields without any app. Please watch it here https://www.youtube.com/watch?v=EK7USO8FJ4s and let me know if it helps.

1 Like

Hi @Bakisisters watch @KabirDev comment to easily integrate custom text fields into your Shopify product.

Absolutely great tutorial. I was hoping there was a version for specific collection or specific products only. Otherwise, this works for everyone who only offer customized products.

Great tutorial and very easy to follow. I’d like to know if it would be possible to add this functionality to individual products rather than to all?

Hi,

I’m not sure if you’ve already sorted this out since the question was posted some time ago, but here’s some help in case you’re still looking for a solution.

To make a text box appear only when the customer selects “customize +$5,” you’ll need a bit of custom coding. You typically have to add a text input inside your product form and use a small script to detect when the dropdown changes, then show or hide the text box accordingly.

From what we’ve seen, coding this kind of conditional text field can get quite complicated to create. You can make this much easier with a product personalization app like Teeinblue. It lets you add custom text fields and extra charges for personalization. You can also show the custom text fields only when a specific option is selected, and even display a live preview for customers to see their designs instantly, no manual coding needed.

This is an example using our Addon charge feature. The “Name 3” text box only shows when a customer choose “+1 name +$5.00.”

Hope this helps!