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. 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> |
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 (",)
5 comments
Hello, I saw your video “Add Custom Textbox or Dropdown to Dawn Product Page – No APP needed” but I can’t find the place where I have to put the code, I am using the WareHouse theme.
Hi! This is very helpful, but I would like to only apply the engraving option to certain items. How do I do this?
@LAUREN – You might have paste the code in a wrong place. You should be able to see the code on checkout.
@DANIELA M OSORIO – You have to make a template and section for it. I have a video tutorial here on how. https://youtu.be/bg7l0lZcyOU
Hi there, I have followed all of these steps but the information entered by customers isn’t showing up in the back end (i.e. in the orders under admin or in the email confirmation that gets sent to me). Is there somewhere else the information would be displayed? Thanks!
this was so helpful and really easy to do compared to some of the other tutorials, thank you. i wanted to ask if there was a way to add it to just one product as opposed to all of the products?