Dawn Theme - Add required custom text field on product page

[Roxolot]

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.

<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>

[made4Uo · 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 · 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

[Roxolot]

@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?

[made4Uo · 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>

[TiffanyB22]

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]

I've worked it out, but thank you.

[Roxolot]

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]

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]

"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]

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 ?

[irene-vintage]

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.

[INA_MSWEB]

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

[EasifyApps-Zoe]

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:

• 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:

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

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 👍.

[Made4uo-Ribe]

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