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.
If you have Shopify 2.0 FREE themes, please use our FREE enhanced Shopify UI Elements generator tool.
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> |
Other way is to use the Custom liquid block using the Theme editor.
1. Go to your Online store > Themes > Customize
2. Go to the product template. Under product information, click add a block the find the "custom liquid".
3. Inside the textbox, place the code you have for the textfield but add the code below in the textarea, or input. Make sure to add the code before ">", see the sample code below
| form="product-form-{{ section.id }}" |
See example below and added code is in bold
| <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%" form="product-form-{{ section.id }}"></textarea> </p> |
That is it (",)
33 comments
Hi @Ashley,
You have to create a template if that is what you want. Fortunately, as mentioned, the code still works in higher version as mentioned in the blog.
With the new 9.0 version of dawn I only want to add the text box to certain products. But since we are no longer adding the ui code to the custom product code, these tutorials don’t work. I followed this tutorial and now I have a text box on all my products.
Hi @KAYLA ,
For Dawn 8.0 version, the product form is under the buy-buttons.liquid in the Snippet folder
Hi they just released dawn 8.0 and I am trying to add the text box to product. I cant find this line to put the code under. {%- form ‘product’, product, id: product_form_id, class: ‘form’, novalidate: ‘novalidate’, data-type: ‘add-to-cart-form’ -%}
Is there maybe a new line code that I need to find to place the code for the text box under?
Hi,
Please follow the tutorial here https://youtu.be/bg7l0lZcyOU to create a product template, then you can edit the custom-product section to add the textbox
Hello, is there a tutorial or code on how to add a custom text box to specific products only and not all products?
Hi @Wes,
Please create a new product template, then edit the section you assign to it instead. Watch this on how, https://youtu.be/bg7l0lZcyOU
Hi @Thomaz Szeckir,
Unfortunately, I do not have a warehouse theme so it hard to figure out how the theme is written. It could be in the template folder or section folder
Hi @Vitaliy,
You have to add a javascript code to do this so it listens with the changes of the variants
Is it possible to add conditioning logic to only display on selected variants?
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?