Dawn theme - Add a text field option to product page

[AmandaMoo]

Hi folks

I sell products that can be customised so need to add a text field area to my product pages - similar to the cart notes but on the product page itself.

I have seen a few tutorials on how to do this but they all seem to require the creation of product.customisable.liquid file from templates, and when I create this - there is no code. I wonder if it is because there doesn't seem to be a product.liquid template for it to copy.

Can anyone help me out with this?

Thank you 🙂

[made4Uo · Accepted solution]

Hi @AmandaMoo,

I have created videos about this, please follow the instructions below.

To create a product template: 

To add a textfield in the product section

[AmandaMoo]

Amazing! Thank you so much for this.

Just one question - I made my line height 4, and when I go onto preview there is an arrow in the corner of the text box that allows the size to be altered - any idea how I get rid of that?

I've added photos of the code and the issue. Thanks so much again!

[made4Uo]

Hi @AmandaMoo,

Thank you for sharing images. Yes. You can do the following to remove the expanding textarea icon

1. From your Admin Page, click Online Store > Themes >Actions > Edit code
2. In the Asset folder, open the base.css
3. Paste the code below at the very bottom of the file.

#personalisation {
    resize: none;
}

[tnguyen]

Hello,

I watched your tutorial and followed it. However when I got to looking for the "add-to-cart" location to paste the code in within the main-product.liquid file, however I could not locate it. 

Am I missing something? I did a search and so now I am at a loss of where to insert the extra code for the additional text fields. Please help!

[made4Uo]

Hi,

If you have newest version of Dawn, the code will be at the buy_buttons.liquid under the Snippet folder

[Hedd]

Where do I drop in code under buy_buttons.liquid on Dawn 11.0, I’ve tried several places but it is not working and I know the code is correct, same code I used in Dawn 2.0. Thanks in advance for your help.

[made4Uo]

Hi @Hedd,

You can try using custom liquid block, and not a section. Follow instructions below

1. Go to your Online store > Themes > Customize

2. Go to the product template, add a block called "custom liquid". 

5. Inside the textbox, place the code you have for the textfield but add the code below in the textarea, or input. 

 form="product-form-{{ section.id }}"

See example in bold

<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%" form="product-form-{{ section.id }}"></textarea>
</p>

[haris2001]

@made4Uo 

"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? 
can u share a picture as well ???

[EasifyApps-Zoe]

Hi @haris2001,

Consider giving the free Easify Product Options app a try for adding a text field to specific products in just a matter of minutes. For a step-by-step guide, please refer to my previous comment in this thread 🤗.

[haris2001]

@EasifyApps-Zoe  hi  thankyou for your suggestion regarding this matter i appreciate. i found the easy 1 step solution yesterday

[made4Uo]

Hi @haris2001,

You can create a product template and add the textfield. You can then use that template to assign your custom products. Regarding showing the textfield when customer placed an order, this is a little complicated. You have to ask the customers to sign in so you can check therir order. I do not know if any app that functions as you requested, therefore, you need to hire someone to do custom coding depending on your theme.

[haris2001]

@made4Uo  hi  thankyou for your suggestion regarding this matter i appreciate. i found the easy 1 step solution yesterday

[haris2001]

@made4Uo 

 
Hello, can you help me? I have added an infinite scroll to my product collection in the liquid file using ajaxinate.min.js. The scroll is working perfectly everywhere. However, I want to add infinite scroll to the "View All" button at the bottom of the featured collection on my home page. What code do I need to add for this, and where should it be added? I am using the Dawn theme version 11.

[code-ratchet]

Hello @made4Uo 

I'm using a the latest version of Dawn, I've created my additional fields, gone into the product liquid page and I'm unable to find the form to add them.

I then saw your comments, I'm a little lost when you create add a block called "custom liquid"

if this basically a new liquid page? 

if then jumps from 2. to 5. so wasn't sure is step 3 and 4 are missing? 

[made4Uo]

Custom liquid is available block under Product information. If you click Add to block, you should be able to see the custom liquid. Then you paste the code you want but add the form code

[BelindaW]

Thanks for that tutorial, it was pretty easy to follow. Is there a way in Dawn 10.0 to make this custom textfield appear only on one product template? I only have a few products that need it.

Thanks

[made4Uo]

Hi @BelindaW 

You need to create a product template and assign it to the said product. See video tutorial below

[subho]

The "engrave" value is not coming in the order webhook response. How to fix this issue? I have developed the theme extension block to inject the product UI. 

[made4Uo]

Hi @subho 

We have a free Shopify UI element generator available that runs smoothly with product page, Cart and even contact form. Please check the video.

[subho]

Thank you so much @made4Uo . Great support. You are doing a great job !!

I have another issue. I have developed an online store with Laravel and integrated it with Shopify. I would like to add the Personalization option for merchants' customers to enter notes. Currently, my merchants are manually editing the Shopify files. I would like to automate this process. I have developed a theme extension for Personalization(I have attached the screenshot here), but merchants still need to install the app and make adjustments. Is there any way to do this from my Laravel store side?

[EasifyApps-Zoe]

Hi @AmandaMoo,

I see that you already received a suggestion on how to create a text field, but I'd like to offer an additional simple solution that requires no coding 🤗. You can achieve this by using the free Easify Product Options app. Let me to demonstrate how you can set up your text field using the app:

1. Create your custom option - Text Area:

2. Assign the Text Area custom option to your target products:

In addition to the Text Area, this app offers many other useful option types, such as number text box, dropdown, radio button, checkbox, image/color swatches, and many more.

If you encounter similar issues in the future or have additional needs related to product options, I recommend considering the Easify Product Options app as a reliable solution 💪.