How can I enable product customization with customer's name?

[AVmaster]

Hi guys,

I would like to create or code an option that allows customers to customize the product with their own name. In the screenshot below it is done exactly as I would like, does anyone know if I can fix this with a certain app or even better with code? So I want it to be immediately shown below the text field what the product will look like.

Kind regards,

AVmaster

[sahilsharma9515]

Hi @AVmaster 

Could you please provide your Store URL and, if applicable, the Password too? So that I can provide you solution specific to your store.

Best Regards,

Sahil

[AVmaster]

https://presentspalace.com/products/birth-month-flower-necklace this is the link, at the moment i dont have the textholder yet. 

[Pawanjain]

Hi @AVmaster  , By using custom field you can add additional field.  those field will be reflected on order as well. 
Using product.liquid file you can achieve this.  

`<p class="cart-attribute__field">
  <label for="your-name">Name</label>
  <input id="your-name" type="text" name="attributes[name]" value="{{ cart.attributes["name"] }}">
</p>`

[AVmaster]

Yes i already have that, but what i want is a live preview of the dynamic input of the customer below the textholder. 
Just like this website: https://annjoliv.com/products/she-flower-name-necklace?variant=47154761859387 

[g33kgirl]

You will probably need Javascript for this.

[AVmaster]

Could you help me with that?

[g33kgirl]

I can, but this would be a paid gig.

[AVmaster]

What would be the cost?

[g33kgirl]

Please DM me and I can message you the cost. 

[Pawanjain]

Hi,

As per above url, we need to do using javascript to populate data. Let me know if you need my help. I will happy to help you.

Thank you.

[AVmaster]

That would be great, how much will that be?

[Pawanjain]

I will update you.

[gr_trading]

Hi @AVmaster 

Can you share the font you are using then this can be code in the theme.

[Pawanjain]

Sure. kindly check below code . 

`<p class="cart-attribute__field">
  <label for="your-name">Name</label>
  <input id="your-name" type="text" name="attributes[name]" value="{{ cart.attributes["name"] }}">
</p>`

 Thanks