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 (",)