What's your biggest current challenge? Have your say in Community Polls along the right column.

Re: Adding Order Notes to Order Confirmation Email

Adding Order Notes to Order Confirmation Email

ktaekema
Visitor
1 0 1

Hi There,

We'd like to have the order notes that a customer inputs on their order to show up in the confirmation email they receive. I know I need to use {{ note }} to grab it, but beyond that I'm not sure where I should place it or what the code should look like surrounding it when I add it to the order confirmation. Can anyone help? One shopify guru told us that we needed our theme developer's help to do this but I'm pretty sure this is standard cut and paste code into the order confirmation coding....? I just don't know what to cut and paste....

Replies 22 (22)

Guleria
Shopify Partner
3692 741 1039

Follow these steps
Click on Settings 😆 Notifications 😆 Order confirmation 
or you can reach directly your-store.com/admin/email_templates/order_confirmation/edit
Now here you have template, paste your code a/to need e.g 

Gift Note: {{ note }}

With condition 

{% if note != '' %} 
Note: {{ note }}
{% endif %}


Thanks

- Drop an email   if you are looking for quick fix or any customization
- Email: guleriathakur43@gmail.com Skype: live:navrocks1
- Try GEMPAGES a great page builder
colson1920
New Member
5 0 0

Hi Guleria, 

I followed your code to add notes to order notifications and it worked great, thank you!  One question though, is there any way to format it better.  It does not add any line breaks so the notes are one long string which is hard to read.  Here is an example of what it looks like -  

 

Thank you for your help.

Regards,

Chris

Guleria
Shopify Partner
3692 741 1039

You can use html tags here a/to your need.

- Drop an email   if you are looking for quick fix or any customization
- Email: guleriathakur43@gmail.com Skype: live:navrocks1
- Try GEMPAGES a great page builder
colson1920
New Member
5 0 0

Hi Guliera,

 

I'm sorry I don't understand how to do that.  I don't know html very well but have used html editors to create html code.  In the case of formatting  the Note Variable I don't know where to put the html tags. 

Can you show me the exact html code and where to put it in the following example so that it will honor line breaks in the note box -

{% if note != ' ' %}
Note: {{ note }}
{% endif %}

I'd be happy to make a small donation for your help.

Thanks!

Regards,

Chris

Guleria
Shopify Partner
3692 741 1039
{% if note != ' ' %}
<h2>Note:</h2> <p>{{ note }}</p>
{% endif %}

<h2> tag will make Note in heading and <p> tag break Note message it to new line.
And still you can customize it more with inline css.

- Drop an email   if you are looking for quick fix or any customization
- Email: guleriathakur43@gmail.com Skype: live:navrocks1
- Try GEMPAGES a great page builder
colson1920
New Member
5 0 0

Hi Guleria,

 

I think you misunderstood what I'm trying to do.  I added your code but what I'm trying to accomplish is that if the Note the customer types in is on mulitple lines I would like it to appear that way in the notification.  Right now it is one long text string.  Here is a screenshot - https://www.cloudhq.net/c/a2d0d92109beb0

Is it possible to create line breaks if the note contains multiple lines?

Regards,

Chris

 

 

SylviaB
Visitor
2 0 1

Run into same issue here. looking for a way to print out note with it's original line break as it was entered. If just simply use {{note}}, it removed the original link breaks. do we have a solution here?

colson1920
New Member
5 0 0
No I have not figured out how to do this.
Rosie_Lea_Tea
Tourist
3 0 1

I also cannot work out how to add the line breaks. Does anyone have a fix to this? So close, yet so far!

califluffco
Explorer
49 3 9

Bumping this up since I'd like also to know the solve for this. 

SylviaB
Visitor
2 0 1

Try

{{ note | newline_to_br}} 

instead of just 

{{note}}

 

it works for me and hopefully it works for you too!

colson1920
New Member
5 0 0

Sylvia, that worked perfect to format the notes box with line breaks.   Thank you so much!

Sri28
Shopify Partner
3 0 0

Thank you, the below code worked for me when added to Order Confirmation email.

It shows when notes are added with line breaks and does not show when no notes are added as expected.

{% if note != '' %}
<h3>Note: </h3> {{ note | newline_to_br}}
{% endif %}

Regards

Sri

AbdulAttamimi
Visitor
1 0 0

Hello, could you please tell me where exactly to paste that code? Thank you!

Arturs1
Tourist
4 0 0

Hi,
Any idea how to take this a step further and whenever there are no Order Notes left by a customer, show a default text instead in the order confirmation email? For example, if a customer doesn't leave anything in the Order Notes box, then it would show up in this way in order conf email:

Notes:
You haven't left any notes for your order

Any idea how to achieve something like this? Thanks!

Guleria
Shopify Partner
3692 741 1039

Hello @Arturs1 ,

Before the checkout click, check with the JS whether the customer leaves notes or not. 
If yes do nothing else set value in the notes field.  

 

Thanks  

- Drop an email   if you are looking for quick fix or any customization
- Email: guleriathakur43@gmail.com Skype: live:navrocks1
- Try GEMPAGES a great page builder
Arturs1
Tourist
4 0 0

Hi @Guleria ,
Thanks for a prompt response! Appreciate it a lot!

 

Could you please elaborate on how to check with the JS whether the customer leaves notes or not (before the checkout click)?

I mean, my code I'm currently testing looks like this:

     <p>{% if note != '' %}

            <h3>Order Notes:</h3> {{ note | newline_to_br}}

               {% else %}

               <h3>Order Notes:</h3><br>You have not added any notes

                             {% endif %}</p> <br>

                    
It actually worked in one instance as I was testing this-> I got the result I wanted to achieve, please see attached screenshot from order confirmation email: https://www.dropbox.com/s/pwhv0jx0lp843a7/Screenshot%202022-07-15%20120351.png?dl=0
But then I'm testing this again and again and so far that message is not added anymore even though it is the same piece of code still used, I just slightly adjusted the text that should appear, that's all: https://www.dropbox.com/s/jkla70tqh1g7j6b/Screenshot%202022-07-15%20120544.png?dl=0

Any idea why this happens? Why it doesn't always work? Perhaps some improvements to that piece of code is necessary? ->

<p>{% if note != '' %}

            <h3>Order Notes:</h3> {{ note | newline_to_br}}

               {% else %}

               <h3>Order Notes:</h3><br>You have not added any notes

                             {% endif %}</p> <br>

Please let me know if you have any ideas. Appreciate your insights a lot! Thanks!

Arturs1
Tourist
4 0 0

Hi @Guleria, 

 

I'm ready to leave you a decent tip if you can help me to sort this out. More like to pay you not just to tip, to be honest. This problem is really annoying and quite frankly I have already wasted too much time on it. I mean, seems that I'm really close to sorting it out since occasionally it works exactly as intended, which is

  • Show the order notes in order confirmation email whenever a customer leaves some notes on the cart page;
  • Show the generic text (You have not added any notes regarding this order) in order confirmation email whenever a customer doesn't leave any order notes;

    You can find the piece of code above- the one I'm inserting in the order confirmation email. It works occasionally (as seen in the dropbox link provided in my previous msg on this forum thread), but then running the next text without changing a single detail in code - it suddenly doesn't work. I have no explanation for this because 2 tests I run back-to-back are completely the same- the same product I'm adding to cart, the same browser etc.etc.- and it one occasion it doesn't work while in the other one it works.

    Please let me know if you have any ideas. As I mentioned, I'm ready to pay for sorting this out. Thanks!
Guleria
Shopify Partner
3692 741 1039

@Arturs1 I don't think you followed the instructions I shared for your issue.
I said before checkout click ( have you ever seen checkout button on  order confirmation email ) 
Checkout button is available on cart page or cart drawer. You have to make it conditional there.

 

- Drop an email   if you are looking for quick fix or any customization
- Email: guleriathakur43@gmail.com Skype: live:navrocks1
- Try GEMPAGES a great page builder
Arturs1
Tourist
4 0 0

@GuleriaFair enough, but I have  no idea how to check with the JS whether the customer leaves notes or not before the checkout click. Could you elaborate on how to achieve that in practice?
Thanks!


Perennial
Shopify Partner
1472 115 234

Kate_Seiz
Tourist
7 0 3

Setting

Notification

Order confirmation.

 

Scroll down to find the code for billing address, and you can add your note code in straight after it so it will appear like this:

Screenshot 2022-09-19 110019.png

 

{% if billing_address %}
<td class="customer-info__item">
<h4>Billing address</h4>
{{ billing_address | format_address }}
</td>
{% endif %}
</tr>
</table>
<table class="row">
<p>Order notes: {{ order.note }}</p>
</table>
<table class="row">

 

I initially tried using {{ note }} but while the order note showed up in test emails and in the preview, it didn't actually show up in real time customer email order confirmations. {{ order.note }} worked for me.