Dawn 2.0 adding a text box to each product page

Solved
Jacqueline_Rudd
Tourist
4 1 0

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?

0 Likes
Guleria
Shopify Partner
1781 375 531

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
If helpful then please Like and Accept Solution.
Buy me a coffee ☕ My PayPal
Jacqueline_Rudd
Tourist
4 1 0

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.

0 Likes
Jacqueline_Rudd
Tourist
4 1 0

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

0 Likes
Jacqueline_Rudd
Tourist
4 1 0

This is an accepted solution.

This free app was recommended to me  Variant Option Product Options  

0 Likes
Kellytwins
Tourist
3 0 2

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

0 Likes
Guleria
Shopify Partner
1781 375 531

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
If helpful then please Like and Accept Solution.
Buy me a coffee ☕ My PayPal
0 Likes
CraftacularCrea
New Member
12 0 0

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

0 Likes
Guleria
Shopify Partner
1781 375 531

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
If helpful then please Like and Accept Solution.
Buy me a coffee ☕ My PayPal
0 Likes
CraftacularCrea
New Member
12 0 0

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

0 Likes