Hey everyone.
we sell custom video messages on our site as a product but i need to get the customers info before, full name, email address and what they want said in the video.
can anyone help me with adding these boxes that are required to fill said info in before they can add to cart.
many thanks
Hi @Hstoltman ,
You can definitely add it via custom code, but there are apps that do it for free if you don’t need to charge extra for it. I don’t work for this company, but last time I had to do it, I used this app:
Regards,
Rodrigo
Hello @Hstoltman ,
Yes this is very common on Shopify, and the good news is Shopify already supports this natively.
What you need are Line Item Properties added to your product form.
Go to your theme code
Online Store → Themes → Edit code
Open:
main-product.liquid
OR
product-form.liquid
OR
sections/main-product.liquid
Paste this before the Add to Cart button
<div class="custom-video-fields">
<label for="full-name">Full Name *</label>
<input
type="text"
id="full-name"
name="properties[Full Name]"
required>
<label for="email">Email Address *</label>
<input
type="email"
id="email"
name="properties[Email Address]"
required>
<label for="message">What should be said in the video? *</label>
<textarea
id="message"
name="properties[Video Message]"
required></textarea>
</div>
Save and test
thank you for the reply, will this be set to just the one product i need it (video message) and not all other products?
is this possible
cheers
Yes this is absolutely possible, and it’s the correct way to do it.
You can apply the required input fields ONLY to your Video Message product and not affect any other products at all.
Use Product Handle (Most Common)
If your video product handle is, for example:
custom-video-message
Wrap your fields like this:
{% if product.handle == 'custom-video-message' %}
<div class="custom-video-fields">
<label>Full Name *</label>
<input type="text" name="properties[Full Name]" required>
<label>Email Address *</label>
<input type="email" name="properties[Email]" required>
<label>What should be said in the video? *</label>
<textarea name="properties[Video Message]" required></textarea>
</div>
{% endif %}
Or
Option 2: Use Product Tag (More Flexible)
This is better long-term if you may add more video products later.
Step 1: Add a tag to the product
In Shopify Admin → Product → Tags:
video-message
Step 2: Condition in Liquid
{% if product.tags contains 'video-message' %}
<!-- Custom fields here -->
{% endif %}
and justy to confirm this is to be put in either of these?
main-product.liquid
OR
product-form.liquid
OR
sections/main-product.liquid
many thanks
Yes , This is as per your requirement.
Hi @Hstoltman 
The issue you’re facing is that Shopify, by default, doesn’t provide a way to require customers to enter personal information (name, email, video content, etc.) before adding a product to the cart, which makes it easy for orders to be missing important details during processing. With Easify Product Options, you can neatly solve this right on the product page.
Here’s an example I’ve created so you can see how it works:
Specifically, you just need to attach an Option Set to the video product and add fields such as Full name, Email address, and What you want said in the video as Text field / Textarea, while enabling Required so customers must fill them out before adding the product to the cart. The customer experience will be exactly like the demo: the entire form appears right below the quantity selector - clear, clean, and easy to understand.
In addition, you can enable Character count for each input field to limit the number of characters as desired - for example, restricting the video message to a specific length. The character counter is displayed in real time as customers type, helping them easily control their content and avoid entering text that’s too long.
All the information entered by customers is fully saved in the order, so when processing it, you always know exactly who the video is for, which email it should be sent to, and what content needs to be read.
This experience is clear and straightforward for customers, while also helping you avoid missing information or having to follow up by email after an order is placed. The app is also very easy to use - no coding required. Everything can be set up through an intuitive interface in just a few minutes and is beginner-friendly.
Hi @Hstoltman,
Go to Online Store → Theme → Edit them.
Paste this Code.
<div id="custom-fields-container" style="margin-bottom: 20px;">
<p class="line-item-property__field">
<label for="full-name" style="display: block; font-weight: bold; margin-bottom: 5px;">Full Name:</label>
<input required id="full-name" type="text" name="properties[Full Name]" form="{{ 'product-form-' | append: section.id }}" style="width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px;" >
</p>
<p class="line-item-property__field">
<label for="customer-email" style="display: block; font-weight: bold; margin-bottom: 5px; margin-top: 15px;">Email Address:</label>
<input required id="customer-email" type="email" name="properties[Email]" form="{{ 'product-form-' | append: section.id }}" style="width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px;">
</p>
<p class="line-item-property__field">
<label for="video-instructions" style="display: block; font-weight: bold; margin-bottom: 5px; margin-top: 15px;">Video Instructions:</label>
<textarea required id="video-instructions" name="properties[Message]" form="{{ 'product-form-' | append: section.id }}" style="width: 100%; height: 100px; padding: 10px; border: 1px solid #ccc; border-radius: 4px;" ></textarea>
</p>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Function to check validation
function validateFields() {
const fullName = document.getElementById('full-name').value.trim();
const email = document.getElementById('customer-email').value.trim();
const message = document.getElementById('video-instructions').value.trim();
if (!fullName || !email || !message) {
alert('Pleace feild the Details!');
if(!fullName) document.getElementById('full-name').focus();
else if(!email)
Thanks!
hello there,
thank for the reply, will this allow me to add character count to the last box?
Hi @Hstoltman,
I hope you are doing well. If you’re open to trying a third-party app without coding, you can try the Inkybay – Product Personalizer app.
With Inkybay’s product option feature, you can create a text input field for both short and long text directly on the product pages, allowing customers to type in their personalization details before they add to cart. Also, you can make the text filed as required field. All customer inputs are automatically included in the order file generated by Inkybay. You can even set dynamic pricing, either for the full text or per character, depending on your needs.
Inkybay also lets you create different product options like file attachment option, custom free size option, swatch image, etc., and display them as drop down option, radio buttons, swatch, checkboxes, etc.
The best part is that no coding is required, and a simple setup. It offers a free 21-day trial so you can explore it and see how it works for your product.
