Add Image to Order confirmation E-Mail

mrdarkwood
New Member
5 0 0

Hey guys,

We want to add a picture underneath the store logo in our order confirmation e-mail as shown in this example:

Bildschirmfoto 2021-07-27 um 17.20.15.png

I already uploaded a photo in assets .

This is our code:

{% capture email_title %}Wir freuen uns über deinen Einkauf! {% endcapture %}
{% capture email_body %}
  {% if requires_shipping %}
  {% case delivery_method %}
      {% when 'pick-up' %}
        Du erhältst eine E-Mail, sobald deine Bestellung zur Abholung bereit ist.
      {% when 'local' %}
        Hallo {{ customer.first_name }}<br>vielen Dank für deine Bestellung. Wir bereiten deine Bestellung gerade für die Zustellung vor.
      {% else %}
        Hallo {{ customer.first_name }},<br>vielen Dank, dass du bei Expatrié bestellt hast.<br>Wir haben deine Bestellung erhalten und benachrichtigen dich, sobald dein Paket verschickt wird. Hier findest du nochmals alle Informationen zu deiner Bestellung.
    {% endcase %}
      {% if delivery_instructions != blank  %}
        <p><b>Informationen zur Zustellung:</b> {{ delivery_instructions }}</p>
      {% endif %}
  {% endif %}
{% endcapture %}

<!DOCTYPE html>
<html lang="de">
  <head>
  <title>{{ email_title }}</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" type="text/css" href="/assets/notifications/styles.css">
  <style>
    .button__cell { background: {{ shop.email_accent_color }}; }
    a, a:hover, a:active, a:visited { color: {{ shop.email_accent_color }}; }
  </style>
</head>

  <body>
    <table class="body">
      <tr>
        <td>
          <table class="header row">
  <tr>
    <td class="header__cell">
      <center>

        <table class="container">
          <tr>
            <td>

              <table class="row">
                <tr>                  
<td class="shop-name__cell">
                    {%- if shop.email_logo_url %}
                      <img src="{{shop.email_logo_url}}" alt="{{ shop.name }}" width="{{ shop.email_logo_width }}">
                    {%- else %}
                      <h1 class="shop-name__text">
                        <a href="{{shop.url}}">{{ shop.name }}</a>
                      </h1>
                    {%- endif %}
                  </td>
                    <td class="order-number__cell">
                      <span class="order-number__text">
                        Bestellung {{ order_name }}
                      </span>
                    </td>
                </tr>
              </table>

            </td>
          </tr>
        </table>

      </center>
    </td>
  </tr>
</table>

          <table class="row content">
  <tr>
    <td class="content__cell">
      <center>
        <table class="container">
          <tr>
            <td>
              
            <h2>{{ email_title }}</h2>
            <p>{{ email_body }}</p>
            {% if order_status_url %}
              <table class="row actions">
  <tr>
    <td class="empty-line"> </td>
  </tr>
  <tr>
    <td class="actions__cell">
      <table class="button main-action-cell">
        <tr>
          <td class="button__cell"><a href="{{ order_status_url }}" class="button__text">Bestellung ansehen</a></td>
        </tr>
      </table>
      {% if shop.url %}
    <table class="link secondary-action-cell">
      <tr>
        <td class="link__cell">oder <a href="{{ shop.url }}">Zu unserem Shop</a></td>
      </tr>
    </table>
{% endif %}

    </td>
  </tr>
</table>

            {% else %}
              {% if shop.url %}
    <table class="row actions">
      <tr>
        <td class="actions__cell">
          <table class="button main-action-cell">
            <tr>
              <td class="button__cell"><a href="{{ shop.url }}" class="button__text">Zu unserem Shop</a></td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
{% endif %}

            {% endif %}

            </td>
          </tr>
        </table>
      </center>
    </td>
  </tr>
</table>

          {% assign gift_card_line_item = line_items | where: "gift_card" %}
          {% if gift_card_line_item.first %}
            <table class="row section">
  <tr>
    <td class="section__cell">
      <center>
        <table class="container">
          <tr>
            <td>
              <h3>Geschenkgutschein</h3>
            </td>
          </tr>
        </table>
        <table class="container">
          <tr>
            <td>
              
              <p> Du erhältst separate Benachrichtigungen für Geschenkgutscheine.</p>

            </td>
          </tr>
        </table>
      </center>
    </td>
  </tr>
</table>
          {% endif %}

          <table class="row section">
  <tr>
    <td class="section__cell">
      <center>
        <table class="container">
          <tr>
            <td>
              <h3>Bestellübersicht</h3>
            </td>
          </tr>
        </table>
        <table class="container">
          <tr>
            <td>
              
            
<table class="row">
  {% for line in subtotal_line_items %}
  <tr class="order-list__item">
    <td class="order-list__item__cell">
      <table>
        <td>
          {% if line.image %}
            <img src="{{ line | img_url: 'compact_cropped' }}" align="left" width="60" height="60" class="order-list__product-image"/>
          {% endif %}
        </td>
        <td class="order-list__product-description-cell">
          {% if line.product.title %}	
            {% assign line_title = line.product.title %}	
          {% else %}	
            {% assign line_title = line.title %}	
          {% endif %}

          {% if line.quantity < line.quantity %}
            {% capture line_display %} {{ line.quantity }} of {{ line.quantity }} {% endcapture %}
          {% else %}
            {% assign line_display = line.quantity  %}
          {% endif %}

          <span class="order-list__item-title">{{ line_title }} × {{ line_display }}</span><br/>

          {% if line.variant.title != 'Default Title' %}
            <span class="order-list__item-variant">{{ line.variant.title }}</span><br/>
          {% endif %}

          {% if line.selling_plan_allocation %}
            <span class="order-list__item-variant">{{ line.selling_plan_allocation.selling_plan.name }}</span><br/>
          {% endif %}

          {% if line.refunded_quantity > 0 %}
            <span class="order-list__item-refunded">Zurückerstattet</span>
          {% endif %}

          {% if line.discount_allocations %}
            {% for discount_allocation in line.discount_allocations %}
              {% if discount_allocation.discount_application.target_selection != 'all' %}
                <span class="order-list__item-discount-allocation">
                  <img src="{{ 'notifications/discounttag.png' | shopify_asset_url }}" width="18" height="18" class="discount-tag-icon" />
                  <span>
                    {{ discount_allocation.discount_application.title | upcase }}
                    (-{{ discount_allocation.amount | money }})
                  </span>
                </span>
              {% endif %}
            {% endfor %}
          {% endif %}
        </td>
          <td class="order-list__price-cell">
            {% if line.original_line_price != line.final_line_price %}
              <del class="order-list__item-original-price">{{ line.original_line_price | money }}</del>
            {% endif %}
            <p class="order-list__item-price">
              {% if line.final_line_price > 0 %}
                {{ line.final_line_price | money }}
                  {% if line.unit_price_measurement %}
                    <div class="order-list__unit-price">
                      {{ line.unit_price | money }}/
                      {%- if line.unit_price_measurement.reference_value != 1 -%}
                        {{- line.unit_price_measurement.reference_value -}}
                      {%- endif -%}
                      {{ line.unit_price_measurement.reference_unit }}
                    </div>
                  {% endif %}
              {% else %}
                Kostenlos
              {% endif %}
            </p>
          </td>
      </table>
    </td>
  </tr>{% endfor %}
</table>

            <table class="row subtotal-lines">
  <tr>
    <td class="subtotal-spacer"></td>
    <td>
      <table class="row subtotal-table">
        {% for discount_application in discount_applications %}
          {% if discount_application.target_selection == 'all' %}
            {% capture discount_title %}
              {% if discount_application.title %}
                {{ discount_application.title | upcase }}
              {% else %}
                Rabatt
              {% endif %}
            {% endcapture %}
            
<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>Rabatt</span>
        <span class="subtotal-line__discount">
          <img src="{{ 'notifications/discounttag.png' | shopify_asset_url }}" width="18" height="18" class="discount-tag-icon" />
          <span class="subtotal-line__discount-title">{{ discount_title }}</span>
        </span>
    </p>
  </td>
  <td class="subtotal-line__value">
    <strong>-{{ discount_application.total_allocated_amount | money }}</strong>
  </td>
</tr>

          {% endif %}
        {% endfor %}

        
<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>Zwischensumme</span>
    </p>
  </td>
  <td class="subtotal-line__value">
    <strong>{{ subtotal_price | money }}</strong>
  </td>
</tr>

        {% if delivery_method == 'pick-up' %}
          
<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>Abholungen</span>
    </p>
  </td>
  <td class="subtotal-line__value">
    <strong>{{ shipping_price | money }}</strong>
  </td>
</tr>

        {% else %}
          
<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>Versand</span>
    </p>
  </td>
  <td class="subtotal-line__value">
    <strong>{{ shipping_price | money }}</strong>
  </td>
</tr>

        {% endif %}

        {% if current_total_duties %}
          
<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>Zollgebühren</span>
    </p>
  </td>
  <td class="subtotal-line__value">
    <strong>{{ current_total_duties | money }}</strong>
  </td>
</tr>

        {% endif %}

        
<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>Steuern</span>
    </p>
  </td>
  <td class="subtotal-line__value">
    <strong>{{ tax_price | money }}</strong>
  </td>
</tr>


        {% if total_tip and total_tip > 0 %}
          
<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>Tip</span>
    </p>
  </td>
  <td class="subtotal-line__value">
    <strong>{{ total_tip | money }}</strong>
  </td>
</tr>

        {% endif %}
      </table>
      <table class="row subtotal-table subtotal-table--total">
        
<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>Gesamt</span>
    </p>
  </td>
  <td class="subtotal-line__value">
    <strong>{{ total_price | money_with_currency }}</strong>
  </td>
</tr>

      </table>

      {% if total_discounts > 0 %}
        <p class="total-discount">
          Du hast <span class="total-discount--amount">{{ total_discounts | money }}</span> gespart
        </p>
      {% endif %}

      {% assign transaction_size = 0 %}
      {% assign transaction_amount = 0 %}
      {% for transaction in transactions %}
        {% unless transaction.kind == "capture" or transaction.kind == "void" %}
          {% assign transaction_size = transaction_size | plus: 1 %}
          {% assign transaction_amount = transaction_amount | plus: transaction.amount %}
        {% endunless %}
      {% endfor %}

      {% if transaction_size > 1 or transaction_amount < total_price %}
        <table class="row subtotal-table">
          <tr><td colspan="2" class="subtotal-table__line"></td></tr>
          <tr><td colspan="2" class="subtotal-table__small-space"></td></tr>

          {% for transaction in transactions %}
            {% if transaction.status == "success" and transaction.kind == "authorization" or transaction.kind == "sale" %}
              {% if transaction.payment_details.credit_card_company %}
                {% capture transaction_name %}{{ transaction.payment_details.credit_card_company }} (mit den letzten Ziffern {{ transaction.payment_details.credit_card_last_four_digits }}){% endcapture %}
              {% else %}
                {% capture transaction_name %}{{ transaction.gateway_display_name }}{% endcapture %}
              {% endif %}

              
<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>{{transaction_name}}</span>
    </p>
  </td>
  <td class="subtotal-line__value">
    <strong>{{ transaction.amount | money }}</strong>
  </td>
</tr>

            {% endif %}
            {% if transaction.kind == 'refund' %}
              {% if transaction.payment_details.credit_card_company %}
                {% assign refund_method_title = transaction.payment_details.credit_card_company %}
              {% else %}
                {% assign refund_method_title = transaction.gateway %}
              {% endif %}

              
<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>Zurückerstatten</span>
        <br>
        <small>{{ refund_method_title | capitalize }}</small>
    </p>
  </td>
  <td class="subtotal-line__value">
    <strong>- {{ transaction.amount | money }}</strong>
  </td>
</tr>

            {% endif %}
          {% endfor %}
        </table>
      {% endif %}
    </td>
  </tr>
</table>


            </td>
          </tr>
        </table>
      </center>
    </td>
  </tr>
</table>

          <table class="row section">
  <tr>
    <td class="section__cell">
      <center>
        <table class="container">
          <tr>
            <td>
              <h3>Kundeninformationen</h3>
            </td>
          </tr>
        </table>
        <table class="container">
          <tr>
            <td>
              
            <table class="row">
              <tr>
                {% if requires_shipping and shipping_address %}
                <td class="customer-info__item">
                  <h4>Lieferadresse</h4>
                  {{ shipping_address | format_address }}
                </td>
                {% endif %}
                {% if billing_address %}
                <td class="customer-info__item">
                  <h4>Rechnungsadresse</h4>
                  {{ billing_address | format_address }}
                </td>
                {% endif %}
              </tr>
            </table>
            <table class="row">
              <tr>
                {% if requires_shipping and shipping_address %}
                <td class="customer-info__item">
                  <h4>Versand</h4>
                  <p>{{ shipping_method.title }}</p>
                </td>
                {% endif %}
                {% assign transaction_count = transactions | size %}
                {% if transaction_count > 0 %}
                <td class="customer-info__item">
                  <h4>Zahlung</h4>
                  {% for transaction in transactions %}
                    {% if transaction.status == "success" or transaction.status == "pending" %}
                      {% if transaction.kind == "authorization" or transaction.kind == "sale" %}
                        {% if transaction.payment_details.credit_card_company %}
                            <p class="customer-info__item-content">
                              <img src="{{ transaction.payment_details.credit_card_company | payment_icon_png_url  }}" class="customer-info__item-credit" height="24" alt="{{ transaction.payment_details.credit_card_company }}">
                              <span>endet mit {{ transaction.payment_details.credit_card_last_four_digits }} — <strong>{{ transaction.amount | money }}</strong></span>
                            </p>
                          {% elsif transaction.gateway_display_name == "Gift card" %}
                          <p class="customer-info__item-content">
                            <img src="{{ transaction.gateway_display_name | downcase | replace: ' ', '-'  | payment_type_img_url }}" class="customer-info__item-credit" height="24">
                          endet mit {{ transaction.payment_details.gift_card.last_four_characters | upcase }} — <strong>{{ transaction.amount | money }}</strong> <br />
                                Geschenkgutscheinguthaben: {{ transaction.payment_details.gift_card.balance |  money }}
                          </p>
                          {% else %}
                              <p class="customer-info__item-content">
                              {{ transaction.gateway_display_name }} — <strong>{{ transaction.amount | money }}</strong>
                              </p>
                          {% endif %}
                  {% endif %}
                    {% endif %}
                  {% endfor %}
                </td>
                {% endif %}
              </tr>
            </table>

            </td>
          </tr>
        </table>
      </center>
    </td>
  </tr>
</table>

          <table class="row footer">
  <tr>
    <td class="footer__cell">
      <center>
        <table class="container">
          <tr>
            <td>
              
              <p class="disclaimer__subtext">Falls du Fragen hast, antworte auf diese E-Mail oder kontaktiere uns unter <a href="mailto:{{ shop.email }}">{{ shop.email }}</a>.</p>
<p class="disclaimer__subtext">Ecom Brands GmbH | Rödingsmarkt 31-33 | 20459 Hamburg<br> Geschäftsführer: Jonas Tank und Timm von Dressler | Amtsgericht Hamburg HRB 146450 | Umsatzsteuer ID: DE290391132</p>
            </td>
          </tr>
        </table>
      </center>
    </td>
  </tr>
</table>

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

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

{%- if shop.terms_of_service.body != blank -%}
  {{ shop.terms_of_service | attach_as_pdf: "AGB" }}
{%- endif -%}

{%- if shop.refund_policy.body != blank -%}
  {{ shop.refund_policy | attach_as_pdf: "Widerrufsbelehrung" }}
{%- endif -%}

I already tried a lot to customize the template by editing the code above but nothing works.

Could someone tell me where and how to add it? Maybe I'm using the wrong code.

 

That would be great! Thanks!

0 Likes
Nick_Marketing
Shopify Partner
564 136 162

1. Find  this code:

 

                        <a href="{{shop.url}}">{{ shop.name }}</a>
                      </h1>
                    {%- endif %}

 

 

2. Upload the image into the assets folder (in my case I named it "orderconfirmationimage.png" and add the code below right under the {%- endif %}

 

<img src="{{ 'orderconfirmationimage.png' | asset_img_url: '300x' }}"alt="Background Image" />

 

 


3. When you save it and then click Preview, it should look similar to this:

2021-07-27 12_05_23.png

 

- I am an eCommerce and Marketing Technology consultant based in Toronto, CANADA.
- To inquire about consulting work availability, please send me a Private Message.
- For Shopify Tutorials, Subscribe to my YouTube Channel.
0 Likes
mrdarkwood
New Member
5 0 0

Thank you very much! But it doesn't do anything, I get the feeling that the preview always stays the same, no matter what I do. And yes, I saved it!

0 Likes
Nick_Marketing
Shopify Partner
564 136 162

@mrdarkwood 
My email template code is exactly the same as yours. If you still can't get the preview with the embedded image, consider raising a ticket with Shopify's Merchant support.
Contact page link: https://help.shopify.com/en/questions#/contact/email

- I am an eCommerce and Marketing Technology consultant based in Toronto, CANADA.
- To inquire about consulting work availability, please send me a Private Message.
- For Shopify Tutorials, Subscribe to my YouTube Channel.
0 Likes
mrdarkwood
New Member
5 0 0

Hi Nick! And thanks for your help!

I tried it once again but with our other shop and it works. But not perfectly yet.

It looks like this:

Bildschirmfoto 2021-08-05 um 16.53.51.png

How can I adjust the logo position? It should be centered above. And the order number should be underneath the picture.

And last question regarding the picture: You used 300x as a size parameter but what if I want to use the width which is possible overall? So it has the same width as the rest of the order confirmation in the end?

Thanks again and best regards

0 Likes
Nick_Marketing
Shopify Partner
564 136 162

To adjust the logo you can add '<style>' tag inside the '<head>' section in your template. Example:

 

<style>
.shop-name__cell{
text-align: center;
}
</style>

 


Try adjusting the width of the image (keep in mind, the image may not be visible on all email clients/mobile devices, as well, the way it looks may vary).
See size parameters guide here:
https://shopify.dev/api/liquid/filters/url-filters#size-parameters

- I am an eCommerce and Marketing Technology consultant based in Toronto, CANADA.
- To inquire about consulting work availability, please send me a Private Message.
- For Shopify Tutorials, Subscribe to my YouTube Channel.
0 Likes
mrdarkwood
New Member
5 0 0

Okay, so far so good. And what about the Order Number which is displayed on the right hand side? Shouldn't it be underneath?

THANK YOU SO MUCH! I appreciate your help!

0 Likes
Nick_Marketing
Shopify Partner
564 136 162

On my end, the order number is under the image. Try adding a class to the image and then add css styling. May find some hints here:
https://stackoverflow.com/questions/26510738/stop-text-from-wrapping-around-image/26510792

If you need advanced technical help in styling the email template, reach out to experts.shopify.com/

- I am an eCommerce and Marketing Technology consultant based in Toronto, CANADA.
- To inquire about consulting work availability, please send me a Private Message.
- For Shopify Tutorials, Subscribe to my YouTube Channel.
0 Likes