Re: Dawn 2.0 adding a text box to each product page

Solved

Dawn 2.0 adding a text box to each product page

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)
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
3505 705 986

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

- Drop an email   if you are looking for quick fix or any customization
- Email: [email protected]
- Try GEMPAGES a great page builder
- If you want to help me please PAYPAL
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  

StillVaping
Excursionist
24 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
101 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

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

ReyGrajales
Visitor
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
3505 705 986

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

- Drop an email   if you are looking for quick fix or any customization
- Email: [email protected]
- Try GEMPAGES a great page builder
- If you want to help me please PAYPAL
websensepro
Shopify Partner
1272 144 160

@Guleria 

Unable to make this field required, using your code:

 

websensepro_0-1635944077049.png

 

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here

Free Shopify Beginner Tutorial
Guleria
Shopify Partner
3505 705 986

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

- Drop an email   if you are looking for quick fix or any customization
- Email: [email protected]
- Try GEMPAGES a great page builder
- If you want to help me please PAYPAL
websensepro
Shopify Partner
1272 144 160

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

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here

Free Shopify Beginner Tutorial
Kaserz
Visitor
1 0 0

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

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

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
3505 705 986

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

- Drop an email   if you are looking for quick fix or any customization
- Email: [email protected]
- Try GEMPAGES a great page builder
- If you want to help me please PAYPAL
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
3505 705 986

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

- Drop an email   if you are looking for quick fix or any customization
- Email: [email protected]
- Try GEMPAGES a great page builder
- If you want to help me please PAYPAL
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

LauraRiver2020
Visitor
1 0 0

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
Shopify Partner
3505 705 986

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.
 

 

- Drop an email   if you are looking for quick fix or any customization
- Email: [email protected]
- Try GEMPAGES a great page builder
- If you want to help me please PAYPAL
websensepro
Shopify Partner
1272 144 160

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

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here

Free Shopify Beginner Tutorial
jessicat888
Visitor
1 0 0

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
Shopify Partner
1272 144 160

You will have to add CSS code for that

 

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here

Free Shopify Beginner Tutorial