Dawn Theme - Add required custom text field on product page

Solved

Dawn Theme - Add required custom text field on product page

Roxolot
Explorer
66 4 13

I would like to add a text field on the product page, which is necessary to add the product to the shopping cart. I have inserted the following code using the Liquid Section. It works as far as it goes, but you can add the product to the shopping cart without the text. I would also be grateful if someone could help me to make the design of the text field smaller.

picture1.png

<label for="message" class="form__label">Message:</label>
<div class="field">
  <textarea id="message" class="text-area field__input" placeholder="Message" name="properties[Message]"form="product-form-{{ section.id }}"></textarea>
</div>
Accepted Solutions (2)

made4Uo
Shopify Partner
3840 716 1177

This is an accepted solution.

Hi @Roxolot 

 

Please follow the instructions below.

 

Add required in your code

Changed code:

 

<label for="message" class="form__label">Message:</label>
<div class="field">
  <textarea id="message" class="text-area field__input" placeholder="Message" name="properties[Message]"form="product-form-{{ section.id }}" required></textarea>
</div>

 

 

1. From you Admin page, go to Online store > Themes > Click the three dots on the theme you want to edit > Edit code
2. Find the form, in Dawn updated version it is in the buy_buttons.liquid under Snippet folder. 

3. Delete the novalidate: 'novalidate', see image below

 

made4Uo_0-1686005880772.png

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free

View solution in original post

made4Uo
Shopify Partner
3840 716 1177

This is an accepted solution.

Hi @Roxolot 

 

You can edit the width, height, and bottom space by adding the code below in your base.css

 

product-form .field {
    margin-bottom: 1rem;
    height: 50%;
    width: 50%;
}

 

To add 10 character limit you can add maxlength. See the adjusted code below

 

<label for="message" class="form__label">Message:</label>
<div class="field">
  <textarea id="message" class="text-area field__input" placeholder="Message" name="properties[Message]"form="product-form-{{ section.id }}" required maxlength="10"></textarea>
</div>
If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free

View solution in original post

Replies 13 (13)

made4Uo
Shopify Partner
3840 716 1177

This is an accepted solution.

Hi @Roxolot 

 

Please follow the instructions below.

 

Add required in your code

Changed code:

 

<label for="message" class="form__label">Message:</label>
<div class="field">
  <textarea id="message" class="text-area field__input" placeholder="Message" name="properties[Message]"form="product-form-{{ section.id }}" required></textarea>
</div>

 

 

1. From you Admin page, go to Online store > Themes > Click the three dots on the theme you want to edit > Edit code
2. Find the form, in Dawn updated version it is in the buy_buttons.liquid under Snippet folder. 

3. Delete the novalidate: 'novalidate', see image below

 

made4Uo_0-1686005880772.png

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free
Roxolot
Explorer
66 4 13

@made4UoThat works. Do you have any idea how I can change the design of the text field? I would like to adjust the height and width and have a gap between the checkout button and the text field. How can I limit the input to 10 alphabetical characters?

picture1.png

made4Uo
Shopify Partner
3840 716 1177

This is an accepted solution.

Hi @Roxolot 

 

You can edit the width, height, and bottom space by adding the code below in your base.css

 

product-form .field {
    margin-bottom: 1rem;
    height: 50%;
    width: 50%;
}

 

To add 10 character limit you can add maxlength. See the adjusted code below

 

<label for="message" class="form__label">Message:</label>
<div class="field">
  <textarea id="message" class="text-area field__input" placeholder="Message" name="properties[Message]"form="product-form-{{ section.id }}" required maxlength="10"></textarea>
</div>
If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free
TiffanyB22
Visitor
2 0 0

Hi,

Is there a way to only make this visible on certain product pages? I have some items that don't need customisation and some that do.

Thanks,

Tiffany

TiffanyB22
Visitor
2 0 0

I've worked it out, but thank you.

Roxolot
Explorer
66 4 13

I think a possible solution is to create a new product template and just add the the customisation section to the deafult product template. After that u can add the template without the customisation in the product section.

mariemaximec
Visitor
1 0 0

hi, can you help me with that ? i want the text box only on one of my product how can i remove it from all others ? 

 

haris2001
New Member
6 0 0

"Hi, I want to add a custom text field on the product page for customized products in the Dawn theme version 11 of Shopify. However, I want the text field to not be displayed on all products, only on customized ones. Is it possible to achieve this using a tag loop? Also, I want the text field message to be shown after an order is placed. Could you please guide me on where to add the code?"

Thank you for providing the information in English! If you need further assistance with this, feel free to let me know.

banterbox
Visitor
2 0 0

This works for add to cart button, but still if the fields are empty, and there's a buy now button below the add to cart button, the products are directly going to checkout while the input fields are empty. How to fix that ?

AliReviews
Shopify Partner
773 90 356

Hello @Roxolot ,

 

You can try to replace the previous code with this code below:

<label for="message" class="form__label">Message:</label>
<div class="field">
  <textarea id="message" class="text-area field__input" placeholder="Message" name="properties[Message]" form="product-form-{{ section.id }}"></textarea>
</div>
<script>
  document.getElementById('product-form').addEventListener('submit', function(event) {
    var message = document.getElementById('message').value.trim();
    if (message === '') {
      // Set a default value for the message if it's empty
      document.getElementById('message').value = 'No message';
    }
  });
</script>

 

Hope this can help.

Ali Reviews team.

- Was my answer helpful? Please hit Like or Mark it as solution!
- Ali Reviews - The must-have Shopify app that empowers you to effortlessly collect, display, and manage product reviews.
- Start your FREE trial today!

INA_MSWEB
Shopify Partner
1266 143 163

Hi @Roxolot 


I hope you are doing good and welcome to the Shopify Community!
I am San from MS Web Designer.

You can use this app to add a Custom Text Field on Product Page:

https://apps.shopify.com/variant-option-product-options 

 

 

 

Regards,

San

If it’s helpful to you, please mark it as a solution.  


Need Help with Shopify Design, Migration, Speed, or Custom tasks?  
email: hi@mswebdesigner.com
Try Our Conversion Booster app to get more sales | Connect Our Founder Linkedin

EasifyApps-Zoe
Shopify Partner
582 14 45

Hi @Roxolot,

While you already received a solution, I'd like to offer another simple alternative to create a custom text field on your product page without any coding required. This way, you and other members can consider it for future use 😊.

You can achieve this by using the Free version of the Easify Product Options app. Follow these steps to set it up quickly:

  • Create a new option set:

EasifyAppsZoe_0-1691403360153.png

 

  • Add a text field using either Text Area (for longer fields) or Text Box (for shorter fields). Set it as required, and also add placeholder, help text, tooltip for the field if you want:

EasifyAppsZoe_1-1691403469863.png

 

  • Select the products on which you want to display the custom text fields on their product pages, and you're all set!

EasifyAppsZoe_2-1691403516973.png

 

As you can see, creating a text field with the Easify Product Options app is straightforward and efficient. Keep this option in mind for any similar issues in the future 👍.

EASIFY - MAKING SHOPIFY SIMPLE & SWEET!
Easify Product Options: Create custom product options 10X faster & easier!
Easify Product Attachments: Effortlessly add downloadable PDF files (or any other format) to Shopify pages!
Try for Free | 24/7 Live Chat Support

Made4uo-Ribe
Shopify Partner
6999 1665 2058

Hi to future readers, 

 

We created an enhanced Shopify UI elements generator tool that works on product page, cart page, and also the contact form. This is easy to use, no code needed, and the good part is, it is FREE. You do not need an app to do this, as long as you have Shopify 2.0 FREE themes. Please check the video below

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.