Dawn 2.0 adding a text box to each product page

[Jacqueline_Rudd]

I am trying to upgrade to the new Dawn 2.0 Theme.  I need to have the option of adding a text box to each product page, similar to what Etsy uses for its "Personalization" box, so customers can provide more information required to complete their order.   e.g the 'name' they require to be embroidered. 

This information submitted needs to be displayed on the checkout page and with the order for admin.   I will use the new 'meta fields' to provide different instructions for each product . 

Can anyone help me with code?

[Guleria]

Hello @Jacqueline_Rudd,

1. Go to Online Store->Theme->Edit code
2.  Sections->main-product.liquid  now here search for this code

{%- when 'buy_buttons' -%}

and just after of this add this one

<div class="line-item-property__field Personalization_field">
              <label for="personalization">Personalization</label>
              <textarea rows="6"  required class="required" id="personalization" name="properties[Personalization]"></textarea>
            </div>

3. Asset->base.css-> paste bellow code in bottom of file

  .Personalization_field {
    float: left;
    width: 100%;
}
.Personalization_field label {
    float: left;
    width: 100%;
}
  .Personalization_field textarea {
    width: 100%;
}

Thanks

[Jacqueline_Rudd]

Wow!  That works great 🙂  Just a petty thing but if I wanted to change the title 'Personalization " to "Add your personalisation (optional)" do I just replace all the code where the word is "personalization"  to the new title.  

Also please can you confirm if any text is submitted that it appears on the checkout page for the customer and also on the order details page for admin.

[Jacqueline_Rudd]

I've managed to change the title and tried testing 'add to cart'.  How do i get the inputed text to be displayed on the checkout page .  Thanks for your help

[Jacqueline_Rudd · Accepted solution]

This free app was recommended to me  Variant Option Product Options  

[StillVaping]

Hello, I hope I am not mistaken in posting here. I would also like to add a text box but to the cart page in case a customer has a note to leave me before proceeding to payment as is the case in the Venture theme

[LaseMakers]

Hi!!

I tried this code and it worked great on my products pages client can leave their comments, but the problem is that the comment doesn't appear on the order detail on admin, or confirmation email.

Is their a way for it to appear on the order details on admin, so I will know what the clients need?

Really appreciate your help.

Best regards,

Carolina

[Jamiedded]

Hi. I am stuck in here go as now my customers have been checking out and o don’t know what they want ? 

[ReyGrajales]

Hi @Guleria !! thank you for your help. I used this code in my page but i can't see the text in the buy page, can you help me please?

[Guleria]

For all to whom option is not available in cart, order confirmation and order details
Use field inside the form tag For further queries please drop and email to my inbox or follow this article https://community.shopify.com/c/shopify-design/product-pages-get-customization-information-for-produ... 

Thanks

[websensepro]

@Guleria 

Unable to make this field required, using your code:

[Guleria]

Hello @websensepro ,

As I know html required attribute is not working with ajax. If you want to to make it required use custom JS or disable Dawn theme ajax.

Thanks

[websensepro]

@Guleria Can you refer to any documentation to make this happen via JS?

[Kaserz]

Is there any way we can turn a button on the product page to customize instead of a second buy now send to checkout option like Etsy has. I want the button not a text box so that they can check out as Is or customize with an additional charge. 

[KMArm]

Hi @Guleria ! 

I'm finding that I'm seeing the customization as the title of my product as well. Do we know why it may duplicate?

[Jamiedded]

Hi. I Followed these steps, however my website has gone live and I’ve had lots of orders but the comment box hasn’t pulled through to my orders so. I can’t see what they wrote ?? 

[Kellytwins]

Thank you for posting those instructions.  Is there a way to do this if you only have some items that need personalization?

[Guleria]

Hello @Kellytwins 

Yes with metafield you can add an option ture/false in product page. And just before of the my code use that metafield as a condition.

like if product metafield is true then show this code else leave do nothing and page will work as it is.

Thanks

[CraftacularCrea]

 

@Guleria @Just to jump on this thread.

is there a way with dawn2.0 to add these text field boxes to just one of my products? 

I only have one of many products that needs personalisation just like below

[Guleria]

Hello @CraftacularCrea ,

Yes it's possible. For fields follow the instructions which I shared in my first comment ( just you have to add multiple rest there is no difference ) and to make it available on specific  product follow the last reply I made in the same post.  

Thanks

[CraftacularCrea]

@Guleria thank you I will try my best but I am very new to Shopify and only have basic knowledge of editing code

[LauraRiver2020]

Hi @Guleria , that has worked to add in the extra boxes but I dont understand how I get it on only some of my products as not all of my items need to be personalised

Thanks

[Guleria]

Hello @LauraRiver2020 ,

They are many way to do it.
1) Using alternate template
2) Build a logic with tags

3) Build a logic with metafile 

I recommend metafield. Enable a true/false metafield and call it in the code you added in main-product.liquid
The logic will be if product metafile is true, your code will works else do nothing.
 

[websensepro]

@LauraRiver2020 Check out this video tutorial here https://youtu.be/m5Ya1fHAKq4 where you can learn how to add If conditions

[jessicat888]

Hi - Thanks very much for your tip so far. Do you know if it's possible to change the colour of the box as it's framed in black but my text for my website is dark blue? Thanks, Amy

[websensepro]

You will have to add CSS code for that