Add Custom Textfield / Dropdown in Dawn Theme Shopify 2.0 - No APP needed
WOW Shopify com IA
files/Channels_-_Growth_Social_Static_Affiliates_Affiliates-Merchants__320x480_7724dbcb-6bd4-46ed-8a59-93eb2012e8b0.png

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.

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. 

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!

Struggling with instructions?

Don't worry, we've got you covered for a reasonable price.

Contact us through "Chat with us" for a quote.

Relax as we handle it for you!

Voltar para o blogue

21 comentários

Hi @Alvin,

Definitely can update the product price. It needs to be connected to a javascript code.

Made4Uo

Hi
Thanks for updated instructions for Dawn theme above 8. Managed to get it to work. Also looked at https://youtu.be/bg7l0lZcyOU to add custom product template.

Is there a way to Update the product price when there is a value entered in the custom text box ?

alvin

Hi @Dana,
Please follow the instructions added in this blog.

@Neeraj Sorry. You have to add an app that works on the backend to do that

Made4Uo

How to fetch these values and send in notifications?

Neeraj

I’m using Dawn 9.0 and I know to add the line item code in buy-buttons.liquid in the Snippet folder for it to show in the cart. My problem is my products do not all have the same line item properties. Where would I put the code for my other products?

Dana

Deixe um comentário