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.
1. Go to Shopify UI elements generator. Link here.
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' -%} |
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>
That is it (",) If you want custom designs, just message me in "chat with us."