Add Custom Textfield / Dropdown in Dawn Theme Shopify 2.0 - No APP needed

Add Custom Textfield / Dropdown in Dawn Theme Shopify 2.0 - No APP needed

See Other Products

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. 

product-attribute

 

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>


text-short

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>

 

 

text-long

 

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>


drop-down

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

Copied!
Back to blog

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

Made4Uo

Is it possible to add conditioning logic to only display on selected variants?

Vitaliy

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.

Thomaz Szeckir

Hi! This is very helpful, but I would like to only apply the engraving option to certain items. How do I do this?

Wes

@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

Made4Uo

Leave a comment