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