Dawn 2.0 adding a text box to each product page

Solved
Jacqueline_Rudd
Tourist
4 1 1

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?

Accepted Solution (1)

Accepted Solutions
Jacqueline_Rudd
Tourist
4 1 1

This is an accepted solution.

This free app was recommended to me  Variant Option Product Options  

View solution in original post

Replies 25 (25)
Guleria
Shopify Partner
2236 459 676

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

Want to modify or custom changes on store hire me.
Email: guleriathakur43@gmail.com, Skype: navrocks1

Try GEMPAGES a great app with drag and drop features to design landing/product/individual pages.
Jacqueline_Rudd
Tourist
4 1 1

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
Tourist
4 1 1

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
Tourist
4 1 1

This is an accepted solution.

This free app was recommended to me  Variant Option Product Options  

Kellytwins
Tourist
6 0 3

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

There is no beauty without some strangeness
Guleria
Shopify Partner
2236 459 676

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

Want to modify or custom changes on store hire me.
Email: guleriathakur43@gmail.com, Skype: navrocks1

Try GEMPAGES a great app with drag and drop features to design landing/product/individual pages.
CraftacularCrea
Excursionist
26 0 4

2B244D03-4A42-4D51-9003-D0D606C8C164.png

@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
Shopify Partner
2236 459 676

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

Want to modify or custom changes on store hire me.
Email: guleriathakur43@gmail.com, Skype: navrocks1

Try GEMPAGES a great app with drag and drop features to design landing/product/individual pages.
CraftacularCrea
Excursionist
26 0 4

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

StillVaping
Excursionist
14 0 3

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
Shopify Partner
98 1 28

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

ReyGrajales
New Member
1 0 1

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
Shopify Partner
2236 459 676

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

Want to modify or custom changes on store hire me.
Email: guleriathakur43@gmail.com, Skype: navrocks1

Try GEMPAGES a great app with drag and drop features to design landing/product/individual pages.
KMArm
Tourist
6 0 1

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?

 

Screen Shot 2021-10-05 at 8.37.31 PM.png

websensepro
Shopify Partner
109 4 10

@Guleria 

Unable to make this field required, using your code:

 

websensepro_0-1635944077049.png

 

Guleria
Shopify Partner
2236 459 676

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

Want to modify or custom changes on store hire me.
Email: guleriathakur43@gmail.com, Skype: navrocks1

Try GEMPAGES a great app with drag and drop features to design landing/product/individual pages.
websensepro
Shopify Partner
109 4 10

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

Jamiedded
New Member
2 0 1

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

Jamiedded
New Member
2 0 1

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