Personalization text box in Horizon

[Half-Geisha]

I'm using the Horizon theme and I want to add a text box to the product so customers can enter their personlisation text for the product. I got the 'sidekick' to create the text box block for me, which looks great, but the data entered is not showing in the cart. Could someone help me with what code I need to change/add to make sure this carries through to the cart?

[oscprofessional]

Hi @Half-Geisha ,

Make sure that the input is inside the form that adds products to the cart

<input type="text" id="custom-text" name="properties[Personalisation]" placeholder="Enter your text here">

[Half-Geisha]

That's my problem. The files are very different in Horizon compared with Dawn, which I was previously using and has this coded and working properly. I have no idea where to put the code for either the product or cart. I can't get anything to work.

[Easify-Jennifer]

Hi @Half-Geisha 

If you're trying to add a text box for personalization and want the entered text to show up in the cart, I'd recommend trying Easify Product Options. It lets you add custom input fields like text boxes with no coding needed, and the customer’s input will automatically appear in the cart, checkout, and order details.

It’s a super easy way to handle personalizations without having to mess with theme code or troubleshoot why custom fields aren’t carrying over. Here's how it works: 

• This is the result:

• This is the cart page: You can see all your options here

• This is the app setting:

To enable font preview, just click on the Font preview in text field and choose the text field you want

I hope this answer helps solve the problem. If you need further assistance, feel free to reach out to Easify anytime! 🤗

[Anish_]

Hi @Half-Geisha ,

 Add this code in  buy-buttons.liquid block file  in horizon  theme inside the form tag after the first input .

<input class="grt" value="" name="properties[Custom Text]" type="text" placeholder="Enter your text" id="grt">

<style>

.grt { border: 1px solid #ccc; padding: 10px 15px; width: 100%; max-width: 400px; font-size: 16px; border-radius: 8px; text-align: center; outline: none; transition: all 0.3s ease; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);}
.grt:focus { border-color: #007bff; box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); background-color: #f9f9ff;}
.grt::placeholder { color: #888; }

</style>

here is the screenshot for better implementation