With the Dawn theme, adding a custom product attribute or textbox was made simple. You can add multiple Shopify UI elements, just make sure the name and ID are unique. Follow instructions below.
Note: If you have the Dawn-Debut product page, this is also going to work.
If you have a different theme. This will not be applicable but doable. Send me a message if you need help.
1. Go to Shopify UI elements generator.
2. Choose the line-item-property. Make sure you click the "show at checkout" if you want the information shown upon check-out. Click "copy to clipboard"
3. Go to your Online store > Themes > Actions > Edit code
4. Go to Section folder and open the main-product.liquid
5. Find this code below . It is should be under the "{%- when 'buy_buttons' -%}
{%- form 'product', product, id: product_form_id, class: 'form', novalidate: 'novalidate', data-type: 'add-to-cart-form' -%} |
For Dawn version 8.0 and above, please open the buy-buttons.liquid under the Snippet folder then find the same code.
6. Paste the code after the {% form ...... %}. See image below, where to paste it.

See customize code for custom style.
Add the code in blue to your Shopify UI Element code
For text-short (see image below how it looks):
<p class="line-item-property__field"> <label for="your-name">Your name</label><br> <input id="your-name" type="text" name="properties[Your name]" style="width: 100%; line-height: 2;"> </p> |

For text-long (see image below how it looks):
<p class="line-item-property__field"> <label for="your-name">Your name</label><br> <textarea id="your-name" name="properties[Your name]" style="width:100%"></textarea> </p> |

For drop-down (see image below how it looks):
<p class="line-item-property__field"> <label>Your name</label><br> <select id="your-name" name="properties[Your name]" style="font-size: 1.5rem; width: 100%; padding: 2%;"> <option value="Red">Red</option> <option value="White">White</option> <option value="Blue">Blue</option> </select> </p> |

Add a file uploader.
<p class="line-item-property__field"> <label>Upload your image here </label> <input type="file" name="pic" accept="image/*"> </p> |
To make the inputs required. You have to find the code below:
{%- form 'product', product, id: product_form_id, class: 'form', novalidate: 'novalidate', data-type: 'add-to-cart-form' -%} |
Then delete the novalidate: 'novalidate'. Then add the required attribute to your input.
Example:
<p class="line-item-property__field"> <label>Upload your image here </label> <input type="file" name="pic" accept="image/*" required> </p> |
That is it (",)
21 comments
Hi @Alvin,
Definitely can update the product price. It needs to be connected to a javascript code.
Hi
Thanks for updated instructions for Dawn theme above 8. Managed to get it to work. Also looked at https://youtu.be/bg7l0lZcyOU to add custom product template.
Is there a way to Update the product price when there is a value entered in the custom text box ?
Hi @Dana,
Please follow the instructions added in this blog.
@Neeraj Sorry. You have to add an app that works on the backend to do that
How to fetch these values and send in notifications?
I’m using Dawn 9.0 and I know to add the line item code in buy-buttons.liquid in the Snippet folder for it to show in the cart. My problem is my products do not all have the same line item properties. Where would I put the code for my other products?