How to set up customizable products in Shopify (no code or apps)

Hey friends, welcome back! 👋

Today, we’re tackling something that a lot of store owners and devs ask about: how to let customers personalize their products on Shopify. Whether that’s engraving a name, uploading a photo, picking a custom size, or anything in between.

The good news? You don’t need an app or a ton of code to do it. We’re going to add custom fields—like text inputs, dropdowns, checkboxes, radio buttons, and even file uploads—right on the product page using Shopify’s built-in system called line item properties.

By the end of this post, you’ll know exactly how to set these up so customers can personalize products before adding them to the cart. And yep—it's all beginner-friendly and free.

Let’s jump in and make your product pages much more powerful! 🚀

‍

⚠️ Heads up: If you're using a paid theme, the steps in this tutorial should mostly work—but just a heads up, some things like form IDs or class names might be a little different. So you might need to tweak a few things to match your theme’s setup. But don’t worry—it’s nothing too crazy, and I’ll point you in the right direction as we go. 🙌

‍

Create a backup for your theme

If you came from my learning Liquid post, you might’ve recognized this step 😁 However, if not, I’ll explain it to you.

Before making any changes to your store’s code, always make sure to create a backup. We can easily do this by duplicating our theme. That way, you’ll have a safety net and can switch back if anything doesn’t go as planned.

To create a duplicate, head over to Online Store > Themes > Theme of Choice > … > “Duplicate”.

Nice! Now that we’ve created a backup of our theme, we’re now ready to start making changes.

‍

Choosing and creating custom field code

Now that we’ve made a duplicate of our theme, we need to choose what field we want to add. There are many options that we can add. For example: short-text, long-text, radio buttons, select dropdown, checkboxes, and file upload.

Decide what field you want to add for your products. Do you need a short-text field for name engravings? Or do you need a long-text field for personalized messages?

After making the decision, we’re now going to grab the code we need for the custom fields. Lucky for us, Shopify has provided us a handy tool for adding custom input fields to our product pages. It’s called the Shopify UI Elements Generator – Line Item Property.

This tool will allow us to create the exact code we need to copy to our product pages.

Here’s how it works:

• On the left side, you choose the settings for your custom field.
  
• On the right side, you’ll see a preview of how the field will look.

⚠️ A quick note: The preview won’t perfectly match how it’ll look in your actual store, but don’t worry—we can tweak the styling later with some basic CSS if needed.

To get started:

1. Choose your field type. For example, I’ll go with short text for now.
2. Add a label. This is the text that shows above the input box—something like “Enter your name”.
3. Check “Required” if you want customers to fill this in before they can add the product to their cart.
4. Check “Show at checkout” if you want this info to appear during checkout.

At the bottom of the page, you’ll see your generated code. Go ahead and copy that code and save it somewhere for now—we’ll need it in just a bit.

👉 And don’t worry—we’re not going to mess with product.liquid! I’ve got a better (and safer) way to get this custom field onto your product page.

“But wait, where’s the file upload field?” you may ask. The UI Elements Generator doesn’t have a file upload option out of the box, but here’s a quick trick:

1. Choose “Text – Short” as your field type.
2. Set your label and other settings as usual.
3. Copy the code, then simply change type=”text” to type=”file”.

Just like that, we now have an upload file field. Awesome! 🔥

Nice! Now you’ve got the code for your custom input field—whether it’s text, a drop-down, or even a file upload. Next up, I’ll show you exactly where and how to add it to your product page

‍

Adding the custom field to the product page

To add the custom field to our product page, we’ll be using one of the theme blocks named “Custom Liquid.” This block will allow us to add the new field without making changes to our theme’s code, simplifying the process.

To get started:

1. Head over to Themes and then Customize.
2. Next, navigate to the product page editor of the Theme Editor
3. On the left-hand side, you’ll find all the sections and blocks of the product page. Hover over the first section until you see “➕ Add block”.
4. Choose Custom Liquid.
5. Paste the code we have generated using the generator. Click save.

Now, to make the custom field work and look seamless with your theme, we need to make some minor adjustments. This will apply to any custom field you add.

Adding the form attribute

We need to add the form attribute to our custom fields. This attribute will allow our custom fields to work properly.

To do this, simply add the following to your input field:

form="product-form-{{ section.id }}"

Below are the final examples for each field type after adding the form attribute. Your code should look like these examples.

For Paid Themes

If you are using a paid theme, the form attribute may look different. Here’s how to find the correct code:

1. Go to your product page in the theme editor and click on the main section to open its settings.
2. In the top-right corner, click the three dots, then select Edit Code.
   
   • (Don’t worry—we’re not changing any code, just checking something.)
3. In the Code Editor, use Ctrl + F (or Cmd + F on Mac) to search for:
   
   • form, form_id, or product_form_id
4. Look through the results and find an <input> tag with a form="..." attribute.
   
   • You might also see {% form 'product' ... id: the_form_id %} — that’s another clue!

Once you’ve found the correct value, add it to your custom field inside the Custom Liquid block—just like in the examples.

Still stuck? Feel free to reach out—we’re happy to help or point you toward a developer 🙂

Text – Short  (Added after “<input ”)

<p class="line-item-property__field">
  <label for="your-message">Your message</label>
  <input form="product-form-{{ section.id }}" required class="required" id="your-message" type="text" name="properties[Your message]">
</p>

Text – Long (Added after “<textarea ”)

<p class="line-item-property__field">
  <label for="your-message">Your message</label> 
  <textarea form="product-form-{{ section.id }}" required class="required" id="your-message" name="properties[Your message]"></textarea>
</p>

Radio Buttons (Added after each “<input ”)

<p class="line-item-property__field">  
  <label>Your message</label><br>  
  <input form="product-form-{{ section.id }}" required class="required" type="radio" name="properties[Your message]" value="Option 1"> <span>Option 1</span><br>  
  <input form="product-form-{{ section.id }}" required class="required" type="radio" name="properties[Your message]" value="Option 2"> <span>Option 2</span><br>  
  <input form="product-form-{{ section.id }}" required class="required" type="radio" name="properties[Your message]" value="Option 3"> <span>Option 3</span><br>
</p>

Select (Added after “<select ”)

<p class="line-item-property__field"> 
  <label>Your message</label><br> 
  <select form="product-form-{{ section.id }}" required class="required" id="your-message" name="properties[Your message]">  
    <option value="Option 1">Option 1</option>  
    <option value="Option 2">Option 2</option>  
    <option value="Option 3">Option 3</option>
  </select>
</p>

Checkbox (Added after every “<input ”)

Checkbox group (Added only on “<input ” with type=”hidden”)

<p class="line-item-property__field"> 
  <label>Your message</label><br> 
  <input required class="required" type="checkbox" id="Option-1" hidden-data="Your-message" onchange="fillHidden('Your-message')" value="Option 1"><label for="Option-1">Option 1</label><br> 
  <input required class="required" type="checkbox" id="Option-2" hidden-data="Your-message" onchange="fillHidden('Your-message')" value="Option 2"><label for="Option-2">Option 2</label><br> 
  <input required class="required" type="checkbox" id="Option-3" hidden-data="Your-message" onchange="fillHidden('Your-message')" value="Option 3"><label for="Option-3">Option 3</label><br> 
  <input form="product-form-{{ section.id }}" type="hidden" id="Your-message" name="properties[Your message]"> 
  <script>/* Code hidden so that the code block doesn't get unnecessarily long*/</script>
</p>

File Upload (Added after “<input ”)

<p class="line-item-property__field"> 
  <label for="your-message">Your message</label>  
  <input form="product-form-{{ section.id }}" required class="required" id="your-message" type="file" name="properties[Your message]">
</p>

Testing our custom field

Now it’s time to test our custom field. This is important before we move on to styling it. 

To start:

1. Go to your product page where the new field is added.
2. Use the custom field, then add the product to your cart.
3. Go to the checkout page by doing a test checkout

At checkout, you should see your new custom field below the product name. 🔥If you really want to make sure it’s working, do a test order and check the order details. The new field should show up below the order item 🙌

If the field isn’t showing, double-check the following:

• Does your new field have the form attribute?
• Does your new field have the “show at checkout” set to true when you were creating the field using the UI Elements Generator?
• If you’ve set the “show at checkout” to be false, the only way to confirm it is by doing a test order.

Doesn’t work? Feel free to reach out—we’re happy to help or point you toward a developer 🙂

Styling our custom field

Woohoo 🥳 We now have our custom field working! It’s now time to style it! Luckily for us, this step isn’t too complicated. We just need to use our theme’s CSS to style our inputs.

⚠️ This step will only work for text fields, as that is the only available built-in styling for free themes. For paid themes, don’t worry; I’ll do my best to point you in the right direction 🙂

1. We’ll need to add <div class=”field”> before our <input> or <textarea> code.
2. Then, add </div> after the <input> or </textarea> code. For example:

<div class=”field”><input form="product-form-{{ section.id }}" …></div>
<div class=”field”><textarea form="product-form-{{ section.id }}" …></textarea></div>

3. Then, after adding the <div> code, we’ll need to add the CSS class to our <input> or <textarea>. The code to add is class=”select__select”.

 <div class=”field”><input class=”select__select” form="product-form-{{ section.id }}" …></div>
 <div class=”field”><textarea class=”select__select” form="product-form-{{ section.id }}" …></textarea></div>

For Paid Themes

If you are using a paid theme, the code to add will look different. Here’s how to find the correct code:

1. Look for an existing input field in your theme (contact form, newsletter, login, etc.).
2. Right-click on it and then click on Inspect Element or Inspect. This will let you see the page’s code, which contains the <input> and the CSS class to copy.
3. In the inspector, you will see the <input> with its attributes, such as form and class. This is our clue!
4. Copy the class over to your new field and test it out!
5. Keep an eye out for a <div> element before the <input>. That is also part of the code to copy to your custom field. Copy the structure and idea behind it to your custom field and then test it out! You can also refer to the instructions for the free theme above to get an idea of what the result should be.

Still stuck? Feel free to reach out—we’re happy to help or point you toward a developer 🙂

Congratulations! You’ve now added a custom field to your product page, styled it, and made sure it works! 🥳 Pat yourself on the back for this one; you did a really good job 🔥

Wrapping Up

And that’s it! 🎉

In this post, we walked through how to add custom fields to your Shopify product pages using line item properties—all without installing any apps or digging deep into complex code. Whether you added a simple text input, a dropdown, or even a file upload field, you now know how to:

1. Choose and generate the right input field
2. Add it safely to your product page
3. Test that it works just like you'd expect
4. Give it a bit of styling to match your store’s vibe

Custom fields are a great way to offer personalized products and give your customers more control at checkout—and now you’ve got the tools to do just that 🥳

If you found this helpful, feel free to check out the rest of the blog for more Shopify tips and tutorials. If you are up for a challenge, I suggest my previous tutorial on adding a size chart to the product page! Or check out my free course on Shopify Speed Optimization.

As always, happy building, and I’ll catch you in the next one! 🚀