Hi everyone,
I’ve added a custom Liquid field to my product page to collect personalized information from customers. The field displays correctly, but I need it to be mandatory—customers shouldn’t be able to add the product to their cart unless they’ve filled it in.
The code:
Name for engraving
Thanks to all.
Hi @CV5 
Use the required attribute
https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/required
Note that a required textarea, or text input, just means any gibberish can be put in to fulfill the requirement of having content.
the parent form may need to have novalidate removed for required attributes to work
https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/noValidate
For other readers make note:
Unless the block is literally inside the product form, which most themes don’t do then the input also needs to be associated to the actual form using the form attribute
https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form
If you need this customization taken care of instead of having to learn to code themes then contact me for services.
Contact info in forum signature.
ALWAYS please provide context, examples: store url, theme name, post url(s) , or any further detail in ALL correspondence.
You will need to add your check on the code which is responsible to adding product in cart. So you check if it’s empty and of it is then not add product.
One way is to disable your atc button initially and when the user does enter something or when text area is not empty you can enable that with code.
Any ways both need customization to the code.
Best
Shadab
Hi @CV5
I guess you might be looking for a coding solution, but just to share another option: you can actually achieve this with an app like Easify Product Options. It lets you add text boxes, dropdowns, image swatches, checkboxes, etc. – and you can even set them as required, so customers can’t skip them.
The good thing is you won’t need to worry about validation or code breaking. Setup is super quick, and you can manage everything right inside your Shopify admin. Might save you a lot of time compared to custom coding.
To ensure your customers fill in the text box, simply mark it as a Required Option.
I hope this answer helps solve the problem. If you need further assistance, feel free to reach out to Easify anytime! 
Hello @CV5
If you’ve added a custom input field (via Liquid) for product personalization, you can make it required with a small tweak.
If it’s a standard input field (like <input> or <textarea>):
Just add the required attribute inside the tag. Example:
<label for="personalized_text">Enter your name</label>
<input type="text" id="personalized_text" name="properties[Personalized Text]" required>
The required attribute will prevent checkout until the field is filled in.
If you want stronger validation (like custom error messages or multiple conditions):
Add a little JavaScript to block the add-to-cart action until the field is complete. Example:
<script>
document.addEventListener("DOMContentLoaded", function() {
const form = document.querySelector("form[action*='/cart/add']");
const input = document.querySelector("#personalized_text");
form.addEventListener("submit", function(e) {
if (!input.value.trim()) {
e.preventDefault();
alert("Please fill in the personalization field before adding to cart.");
}
});
});
</script>
Best practice:
Always use properties[Your Field Name] for custom inputs so the value passes through to the cart and checkout.
That way, you make sure customers can’t bypass the personalization field and you still capture the info in their order.
If you have any issues please let me know.