How to add customized text field in the product page?

Shopify Discussion
,
1

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!

2

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!

3

Thanks.. will try it out!

1 Like
4

@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?

5

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).”

EasifyAppsZoe_0-1689239111529.png
EasifyAppsZoe_0-1689239111529.png2492Ă—1424 213 KB

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

EasifyAppsZoe_1-1689239173162.png
EasifyAppsZoe_1-1689239173162.png2492Ă—1424 205 KB

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

EasifyAppsZoe_2-1689239202755.png
EasifyAppsZoe_2-1689239202755.png2492Ă—1424 294 KB

EasifyAppsZoe_3-1689239214352.png
EasifyAppsZoe_3-1689239214352.png2492Ă—1424 275 KB

  • Assign these custom options to your relevant products.

EasifyAppsZoe_4-1689239267263.png
EasifyAppsZoe_4-1689239267263.png2492Ă—1418 174 KB

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.

EasifyAppsZoe_5-1689239602699.png
EasifyAppsZoe_5-1689239602699.png2492Ă—1428 200 KB

EasifyAppsZoe_6-1689239647501.png
EasifyAppsZoe_6-1689239647501.png2492Ă—1428 196 KB

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
6

@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
7

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

8

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.

9

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?