Custom message in order confirmation email based on product variant

David_Shaheen
Tourist
16 0 1

I would like to be able to add some liquid code to the order confirmation email that displays a sentence of text with a link when a certain product variant is ordered. I have an eBook variant and when it's ordered, I want to include a link insturcting how to view the different formats.

Can someone point me in the direction of the correct liquid formula/variable for this? Once I get a start, I can usually figure out the Liquid code and where to insert it.

It would be something like this:

If ebook variant is ordered, display xxxxxlink

end if

 

Replies 20 (20)
KarlOffenberger
Shopify Partner
1873 184 863

Hi David,

If your variant title is "Ebook" then you'd need to edit the Settings > Notifications > Order confirmation email template and inside the line items loop, add this bit of code with whatever you see fit in between the condition:

{% if line.variant.title == 'Ebook' %}
  Display download instructions here...
{% endif %}

It is important this be added within the line items loop because a customer could order several e-books and each line should display download instruction links.

In case you do not want to display this on the line item level I can provide you with another code bit that would achieve the same but outside of the line ite loop.

Hope this helps.

Liked this post? You might also like our fantastic upsell apps Candy Rack, Last Upsell post-purchase and Candy Cart or offer free gifts with Gift Box. All made with ❤️  and care by Digismoothie
David_Shaheen
Tourist
16 0 1

Thanks I tried this and it displayed on all my orders, even without the eBook. I also tried it using variant SKU. Maybe I'm inserting in the wrong place. Can you describe what you mean by the "line item loop?" I actually don't want this to be next to the item toward the bottom of confirmation where the products are listed as line items for fear they will not see it. I want it listed in the top part of the confirmation after the "Thank you" and the contingent shipping text. I want it above the line where the "Order Summary" starts. Look below:

{% capture email_title %}Thank you for your purchase! {% endcapture %}
{% capture email_body %}
  {% if requires_shipping %}
    Hi {{ customer.first_name }}, we're getting your order ready. We will notify you when it ships.
  {% endif %} 

<br />
<br />

{% if line.variant.title == ‘Ebook’ %}
eBook Install/Viewing Instructions: https://www.amandavernon.com/ebookinstructions
{% endif %}

{% endif %}
{% endcapture %}

When I did this or used the SKU code or even used the "contains" operator, it always displayed this even when someone only ordered paperback book.

Do you see any issues? I'd love to customize several products' confirmation messages.

KarlOffenberger
Shopify Partner
1873 184 863

Okay, in that case you want to find the line

<p>{{ email_body }}</p>

And right beneath that add this

{% assign includes_ebook = false %}
{% for line in subtotal_line_items %}
  {% if line.variant.title == 'Ebook' %}{% assign includes_ebook = true %}{% endif %}
{% endfor %}

{% if includes_ebook == true %}
  <p>Display download instructions.</p>
{% endif %}

Now I say below the line I mention above because you were adding it too soon above the HTML document.

Hope this helps!

Liked this post? You might also like our fantastic upsell apps Candy Rack, Last Upsell post-purchase and Candy Cart or offer free gifts with Gift Box. All made with ❤️  and care by Digismoothie
David_Shaheen
Tourist
16 0 1

I think I'm confused by this sentence: Now I say below the line I mention above because you were adding it too soon above the HTML document.

But I do want the link above the body...I want it below the line about shipping. See image below:

https://drive.google.com/open?id=1uKCk4cad7GKzmXtDJCiSurhWcMnM0SvC

From what you listed it seems like it would be down below in the summary.

Also, why doesn't your original code work? it seems simple...if this...display that. Why is the false part necessary? Why do you also have to say what happens if false.

KarlOffenberger
Shopify Partner
1873 184 863

That's where it will be following the instructions of my previous post.

Liked this post? You might also like our fantastic upsell apps Candy Rack, Last Upsell post-purchase and Candy Cart or offer free gifts with Gift Box. All made with ❤️  and care by Digismoothie
David_Shaheen
Tourist
16 0 1

I'm sorry, I'm still confused. Are you saying to enter the first code above (in the location I had it) and the 2nd code you gave beneath this line: <p>{{ email_body }}</p>

 

KarlOffenberger
Shopify Partner
1873 184 863

No, do not add the first code at all - it won't work in that location. And no worries if it's confusing - it is 1AM here and I am probably confusing everyone by now 😉

Only add the second code in the location I mention in my second post which is right after the

<p>{{ email_body }}</p>

Above bit is already in the template so you can Ctrl+F to find it.

Liked this post? You might also like our fantastic upsell apps Candy Rack, Last Upsell post-purchase and Candy Cart or offer free gifts with Gift Box. All made with ❤️  and care by Digismoothie
David_Shaheen
Tourist
16 0 1

But entering the code in that body location will put the instruction link down in the body right? I want it in the top location under the shipping line that I showed you (above the view your order button.

 

 

KarlOffenberger
Shopify Partner
1873 184 863

It will be here...

Liked this post? You might also like our fantastic upsell apps Candy Rack, Last Upsell post-purchase and Candy Cart or offer free gifts with Gift Box. All made with ❤️  and care by Digismoothie
David_Shaheen
Tourist
16 0 1

How do you know it will be there since you are saying to put the code in a toally different location down in body? Also, so you know, I already have some liquid code from my digital downloads integration that displays with a download link when a digital product is purchased. And, I would want this "insturctions" code that I'm asking you about to be *BELOW* that. So, given that, where would you put the instuction code? See the top part of my code below. That's why I'm asking how you know about the location because I want to make sure the "instructions text" is below the digital download link.

{% capture email_title %}Thank you for your purchase! {% endcapture %}
{% capture email_body %}
  {% if requires_shipping %}
    Hi {{ customer.first_name }}, we're getting your order ready. We will notify you when it ships. Estimated delivery for paperback book is December 2018 (if applicable).
  {% endif %} 
<br />
<br /> 
{% capture downloads %}{% for line in line_items %}{% if line.variant.metafields.dda.digital %}1{% endif %}{% endfor %}{% endcapture %}{% if downloads.size > 0 %}Your digital downloads: https://transactions.sendowl.com/orders/shopify_return/xxxx?order_id={{ id }}&email={{ email }}
{% endif %}
{% endcapture %}

 

KarlOffenberger
Shopify Partner
1873 184 863

I know because you cannot display content that isn't in a <body /> element. That and because I tried it before posting my answer - i.e. verified it and even sent a screenshot. And because the code you are showing me of the digital downloads integration is a Liquid {% capture %} which only assigns a string to a variable (called downloads in your case).

Now I don't mean to be rude, but I am trying to help you here for free and you can take my word for it, try it out as per my step by step instructions above andconfirm for yourself that it works... or you can leave it and ask someone else. But debating over why and how I know what I know is a little off topic 😉

Best wishes

Liked this post? You might also like our fantastic upsell apps Candy Rack, Last Upsell post-purchase and Candy Cart or offer free gifts with Gift Box. All made with ❤️  and care by Digismoothie
David_Shaheen
Tourist
16 0 1

Thanks Karl, I take no offense...I undertand how my questions could come accross as off topic (and feel free not to respond or leave me a link where I can hire you). But, the reason I asked is so that I can know the "rule" so I would be able to do it myself next time. In your last response, you did give me a rule about text only displaying in body content. That is good to know. Did you know I actually included my instructions inside the digital download code and it did appear (but for all downloads, not just eBook). See below.

{% capture downloads %}{% for line in line_items %}{% if line.variant.metafields.dda.digital %}1{% endif %}{% endfor %}{% endcapture %}{% if downloads.size > 0 %}Your digital downloads: https://transactions.sendowl.com/orders/shopify_return/xxxx?order_id={{ id }}&email={{ email }}
<br />
<br />
eBook Install/Viewing Instructions: https://www.amandavernon.com/ebookinstructions
{% endif %}
{% endcapture %}

But obviously that's not ideal, but it proves that text did work there.

The reason I asked about where the text would show up is because...how do I know (using your method) if my instructions would appear above or below the shipping line (when applicable) or above or below the digital downloads code (when applicable). I need to know precisely where the code will show up in relation to the other text up top. Once I know that I think I will be good to go. 

I appreciate your patience and am open to hiring you in future, if that's something you offer.

KarlOffenberger
Shopify Partner
1873 184 863

Hi David,

I am not a Shopify Expert or for hire - I simply enjoy helping out on forums and free of charge. So that plug to Shopify Experts wasn't made in self-interest.

As for knowing the "rules" of editing HTML so you understand and can make such changes yourself - I totally commend that approach. That said, I can provide a quick overview.

Most templates in Shopify are a mixture of Liquid and HTML. Liquid is a templating language developed by Shopify that allows you to access variables. Most are pre-defined by Shopify depending on the template, such as order, product, collecition, page objects which have properties such as product.title or variant.sku. You cannot make custom database queries and are limited to using whatever is there. You can read more about these here and for a quick incomplete view here. Of course, you can define your own variables in Liquid too, but like I mentioned before, you won't be able to do database queries, queries to external resources such as APIs or anything of that sort.

Liquid is also used for control flow using conditional statements (if, if-else, unless, case) or iterration (for-in) so you can determine how your template is rendered.

Which brings us to the part where actual HTML is rendered. HTML is a declarative "language" for defining documents and adhers to following structure

<!DOCTYPE html>
<html>
  <head>
    <title>Document's title</title>
  </head>
  <body>
  </body>
</html>
  • The DOCTYPE defines the version of HTML used in your document and must come before any other tags. It itself is not an HTML tag.
  • The html element is the root of an HTML document
  • The head is an element that contains children declaring meta information about the document such as
  • The title element which defines the title of a document
  • The body element contains the visible document content

For more introductory material about HTML visit w3schools and there are also a lot of online video tutorials or free courses to get you up to speed.

So with all this in mind, we can tackle the email template we have been editing. If you look at the code of the entire template, you will notice it has this structure

{% capture email_title %}Thank you for your purchase! {% endcapture %}
{% capture email_body %}
  {% if requires_shipping %}
    Hi {{ customer.first_name }}, we're getting your order ready to be shipped. We will notify you when it has been sent.
  {% endif %}
{% endcapture %}


<!DOCTYPE html>
<html lang="en">
  <head>
    <title>{{ email_title }}</title>
  </head>

  <body>
    <table class="body">
      <tr>
        <td>
          <table class="header row">
          </table>

          <table class="row content">
          </table>

          <table class="row section">
          </table>

          <table class="row section">
          </table>

          <table class="row footer">
          </table>

          <img src="{{ 'notifications/spacer.png' | shopify_asset_url }}" class="spacer" height="1" />

        </td>
      </tr>
    </table>
  </body>
</html>

I have removed a lot of the content for brevity. So let's have a look at what is going on here.

First you will notice some code within {% %} or {{ }}. These are Liquid markup denotations. The {% %} are called tag markups which are used for logic and do not resolve to any text. The {{ }} are called output markup and these do resolve to text so that if you were to have a variable called foo with a text value assigned to it and wanted to show it in your template, you'd write {{ foo }} where you want it to be shown.

{% assign foo = 'Hello world' %}
{{ foo }}

In the email template, before the DOCUMENT declaration, we see some Liquid code that captures sme variables (assigns watever is in between the capture statements to a string variable). We can do this before the DOCUMENT because Liquid is interpreted on the server i.e. Liquid code won't be visible nce the browser receives the rendered template.

That's also why you see your integration piece of code up there. It is assigning some variables for later use within the template - but it isn't actually "printing" them just yet to the HTML document.

Let's move towards the guts of the HTML document's body element - the visible portion of our template. You will notice a few nested tables in there. MIME Email messages are a bit special when they contain HTML in that they only support a subset of HTML. In other words, you must know what is supported and cannot simply asume that any HTML will work for email clients. So be very careful if you aren't exactly sure or else your customers might be receiving wonky looking emails.

You will find that there are 5 tables nested in the body and each have some class attribute

  • header row
  • row content
  • row section
  • row section
  • row footer

Those already give you a good hint of what content they will contain

  • header row - contains the shop's logo, shop's name and the order number
  • row content - contains the email title, email body and the buttons to view the order or visit the store
  • row section - there are 2 of these. The first one contains order summary information such as the line items. The second contains customer information such as shipping and billing address
  • row footer - contains the disclaimer text

Notice how row content shows the email body? That's because the actual variable's value will be rendered there. The variable is declared elsewhere, but will be shown there. That is also why we will be adding your notice for the download link here and not elsewhere.

Hope that makes sense so far. I understand there is a lot of stuff going on here so feel free to ask.

Best regards

Liked this post? You might also like our fantastic upsell apps Candy Rack, Last Upsell post-purchase and Candy Cart or offer free gifts with Gift Box. All made with ❤️  and care by Digismoothie
David_Shaheen
Tourist
16 0 1

Thanks Karl. But, can you answer this one part for me. I don't think you addressed it: "How do I know (using your method) if my instructions would appear above or below the shipping line (when applicable) or above or below the digital downloads code (when applicable). I need to know precisely where the code will show up in relation to the other text up top. Once I know that I think I will be good to go." 

KarlOffenberger
Shopify Partner
1873 184 863
  1. If shipping and download, then thank you message + shipping shows first, download follows
  2. If no shipping but download yes, then thank you message first, download follows
  3. If shipping but no download, then thank you message + shipping
  4. If no shipping and no download, then only thank you message

You will know when you do it. The process of programming, unlike what many would make you believe or some would claim, is not determinisitic. A program can be deterministic although it usually isn't no matter how much us develpers wish it were and pray it is.

So my final advice would be to try it out. Try this try that. Move it there, pull it here. Take it apart and put it back together. Read and learn, do and understand. If that doesn't sound like fun to you, I have no advice left to share 😉

Liked this post? You might also like our fantastic upsell apps Candy Rack, Last Upsell post-purchase and Candy Cart or offer free gifts with Gift Box. All made with ❤️  and care by Digismoothie
David_Shaheen
Tourist
16 0 1

Thanks Karl. You gave the order for:

Thank you message

Shipping message

Download message

But, my main question is where my custom text message about the ebook installation instructions would show up in that order.

2. And, can I change that order?

 

KarlOffenberger
Shopify Partner
1873 184 863

So my final advice would be to try it out

Liked this post? You might also like our fantastic upsell apps Candy Rack, Last Upsell post-purchase and Candy Cart or offer free gifts with Gift Box. All made with ❤️  and care by Digismoothie
Luccardo
Excursionist
20 0 5

Hi @KarlOffenberger 

Appreciate this thread is a while ago, but hoping you could help 🙂

I am trying to create a message in order confirmation email based on a specific product tag. Here is what I am trying to no avail.

{% if product.tags contains ‘Treat Box’ %}
Your order contains an item with a specific delivery date. Your entire order will be dispatched with DPD next day services the day prior to your selected delivery date. You will receive an email and/or SMS from our courier partners, DPD, confirming your delivery day.<br><br>

{% else %}
Orders are dispatched Monday to Thursday with DPD next day services. Please allow 1-2 working days for orders to be processed. You will receive an email and/or SMS from our courier partners, DPD, confirming your delivery day.<br><br>

{% endif %}

My aim is to have it inside the text for the email notes below the title etc. See image below. But when I place the code where i assume it will go, it doesn't change based on the product tag. I am basically inserting it as it is after:  Hi {{ customer.first_name }}, we're getting your order ready to be shipped. We will notify you when it has been sent.

I am not sure if the actual code is correct for if at least 1 item which contains product tag, then the top message should show. The only time the bottom message should show is when order contains products without that product tag.

Clearly I am doing something wrong! Would you mind steering me in the right direction

Many Thanks

Screen Shot 2021-01-10 at 15.44.43.png

 

 

theboxoflife
New Member
2 0 0

Hi @KarlOffenberger, I have the same question that @Luccardo has! Would appreciate any insights you have here. This is how my broken piece of code looks like right now:

 

{% capture email_body %}
{% if line.product.title contains 'product A' %}
Text for product A

{% elsif line.product.title contains 'product B' %}
Text for product B

{% else %}
Thanks for your order

{% endif %}
{% endcapture %}