How to add an image to order confirmation email?

Hey guys,

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

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 }}
vielen Dank für deine Bestellung. Wir bereiten deine Bestellung gerade für die Zustellung vor.
      {% else %}
        Hallo {{ customer.first_name }},
vielen Dank, dass du bei Expatrié bestellt hast.
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  %}
        

**Informationen zur Zustellung:** {{ delivery_instructions }}

      {% endif %}
  {% endif %}
{% endcapture %}

  
  
  
  
  
  

  
    <table>

      
        
          <table>

  
    
      

        <table>

          
            

              <table>

                <tr>
                  
<td>

                    {%- if shop.email_logo_url %}
                      
                    {%- else %}
                      # 
                        {{ shop.name }}
                      
                    {%- endif %}
                  

</td>

                    <td>

                      
                        Bestellung {{ order_name }}
                      
                    

</td>

                </tr>

              </table>

            
          
        </table>

      
    
  
</table>

          <table>

  
    
      
        <table>

          
            
              
            ## {{ email_title }}
            

{{ email_body }}

            {% if order_status_url %}
              <table>

  <tr>

    <td>

 

</td>

  </tr>

  
    
      <table>

        <tr>

          <td>

Bestellung ansehen

</td>

        </tr>

      </table>
      {% if shop.url %}
    <table>

      <tr>

        <td>

oder Zu unserem Shop

</td>

      </tr>

    </table>
{% endif %}

    
  
</table>

            {% else %}
              {% if shop.url %}
    <table>

      
        
          <table>

            <tr>

              <td>

Zu unserem Shop

</td>

            </tr>

          </table>
        
      
    </table>
{% endif %}

            {% endif %}

            
          
        </table>
      
    
  
</table>

          {% assign gift_card_line_item = line_items | where: "gift_card" %}
          {% if gift_card_line_item.first %}
            <table>

  
    
      
        <table>

          <tr>

            <td>

              ### Geschenkgutschein
            

</td>

          </tr>

        </table>
        <table>

          <tr>

            <td>

              
              

 Du erhältst separate Benachrichtigungen für Geschenkgutscheine.

            

</td>

          </tr>

        </table>
      
    
  
</table>
          {% endif %}

          <table>

  
    
      
        <table>

          <tr>

            <td>

              ### Bestellübersicht
            

</td>

          </tr>

        </table>
        <table>

          
            
              
            

  {% for line in subtotal_line_items %}
  {% endfor %}
<table>

    
      <table>

        <td>

          {% if line.image %}
            
          {% endif %}
        

</td>

        <td>

          {% 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 %}

          {{ line_title }} × {{ line_display }}

          {% if line.variant.title != 'Default Title' %}
            {{ line.variant.title }}

          {% endif %}

          {% if line.selling_plan_allocation %}
            {{ line.selling_plan_allocation.selling_plan.name }}

          {% endif %}

          {% if line.refunded_quantity > 0 %}
            Zurückerstattet
          {% endif %}

          {% if line.discount_allocations %}
            {% for discount_allocation in line.discount_allocations %}
              {% if discount_allocation.discount_application.target_selection != 'all' %}
                
                  
                  
                    {{ discount_allocation.discount_application.title | upcase }}
                    (-{{ discount_allocation.amount | money }})
                  
                
              {% endif %}
            {% endfor %}
          {% endif %}
        

</td>

          
            {% if line.original_line_price != line.final_line_price %}
              <del>{{ line.original_line_price | money }}</del>
            {% endif %}
            

              {% if line.final_line_price > 0 %}
                {{ line.final_line_price | money }}
                  {% if line.unit_price_measurement %}
                    

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

                  {% endif %}
              {% else %}
                Kostenlos
              {% endif %}
            

          
      </table>
    
  </table>

            <table>

  
    <td>

</td>

    
      
        {% 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 %}
            

          {% endif %}
        {% endfor %}

        

        {% if delivery_method == 'pick-up' %}
          

        {% else %}
          

        {% endif %}

        {% if current_total_duties %}
          

        {% endif %}

        

        {% if total_tip and total_tip > 0 %}
          

        {% endif %}
      <table>
<tr>

  <td>

    

      Rabatt
        
          
          {{ discount_title }}
        
    

  

</td>

  <td>

    **-{{ discount_application.total_allocated_amount | money }}**
  

</td>

</tr>
<tr>

  <td>

    

      Zwischensumme
    

  

</td>

  <td>

    **{{ subtotal_price | money }}**
  

</td>

</tr>
<tr>

  <td>

    

      Abholungen
    

  

</td>

  <td>

    **{{ shipping_price | money }}**
  

</td>

</tr>
<tr>

  <td>

    

      Versand
    

  

</td>

  <td>

    **{{ shipping_price | money }}**
  

</td>

</tr>
<tr>

  <td>

    

      Zollgebühren
    

  

</td>

  <td>

    **{{ current_total_duties | money }}**
  

</td>

</tr>
<tr>

  <td>

    

      Steuern
    

  

</td>

  <td>

    **{{ tax_price | money }}**
  

</td>

</tr>
<tr>

  <td>

    

      Tip
    

  

</td>

  <td>

    **{{ total_tip | money }}**
  

</td>

</tr>
</table>
      <table>

        
<tr>

  <td>

    

      Gesamt
    

  

</td>

  <td>

    **{{ total_price | money_with_currency }}**
  

</td>

</tr>

      </table>

      {% if total_discounts > 0 %}
        

          Du hast {{ total_discounts | money }} gespart
        

      {% 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 %}
        

          {% 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 %}

              

            {% 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 %}

              

            {% endif %}
          {% endfor %}
        <table>

          <tr>
<td colspan="2">

</td>
</tr>

          <tr>
<td colspan="2">

</td>
</tr>
<tr>

  <td>

    

      {{transaction_name}}
    

  

</td>

  <td>

    **{{ transaction.amount | money }}**
  

</td>

</tr>

  
    

      Zurückerstatten
        

        <small>{{ refund_method_title | capitalize }}</small>
    

  
  
    **- {{ transaction.amount | money }}**
  
</table>
      {% endif %}
    
  
</table>

            
          
        </table>
      
    
  
</table>

          <table>

  
    
      
        <table>

          <tr>

            <td>

              ### Kundeninformationen
            

</td>

          </tr>

        </table>
        <table>

          
            
              
            
                {% if requires_shipping and shipping_address %}
                
                {% endif %}
                {% if billing_address %}
                
                {% endif %}
              <table>

              <tr>
<td>

                  #### Lieferadresse
                  {{ shipping_address | format_address }}
                

</td>
<td>

                  #### Rechnungsadresse
                  {{ billing_address | format_address }}
                

</td>
</tr>

            </table>
            
                {% if requires_shipping and shipping_address %}
                
                {% endif %}
                {% assign transaction_count = transactions | size %}
                {% if transaction_count > 0 %}
                
                {% endif %}
              <table>

              <tr>
<td>

                  #### Versand
                  

{{ shipping_method.title }}

                

</td>
<td>

                  #### Zahlung
                  {% 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 %}
                            

                              
                              endet mit {{ transaction.payment_details.credit_card_last_four_digits }} — **{{ transaction.amount | money }}**
                            

                          {% elsif transaction.gateway_display_name == "Gift card" %}
                          

                            
                          endet mit {{ transaction.payment_details.gift_card.last_four_characters | upcase }} — **{{ transaction.amount | money }}** 

                                Geschenkgutscheinguthaben: {{ transaction.payment_details.gift_card.balance |  money }}
                          

                          {% else %}
                              

                              {{ transaction.gateway_display_name }} — **{{ transaction.amount | money }}**
                              

                          {% endif %}
                  {% endif %}
                    {% endif %}
                  {% endfor %}
                

</td>
</tr>

            </table>

            
          
        </table>
      
    
  
</table>

          <table>

  
    
      
        <table>

          <tr>

            <td>

              
              

Falls du Fragen hast, antworte auf diese E-Mail oder kontaktiere uns unter [{{ shop.email }}](mailto:{{ shop.email }}).

Ecom Brands GmbH | Rödingsmarkt 31-33 | 20459 Hamburg
 Geschäftsführer: Jonas Tank und Timm von Dressler | Amtsgericht Hamburg HRB 146450 | Umsatzsteuer ID: DE290391132

            

</td>

          </tr>

        </table>
      
    
  
</table>

        
      
    </table>
  

{%- 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!

  1. Find this code:
{{ shop.name }}
                      
                    {%- endif %}
  1. Upload the image into the assets folder (in my case I named it “orderconfirmationimage.png” and add the code below right under the {%- endif %}

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

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! :confused:

@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

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:

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

To adjust the logo you can add ‘’ tag inside the ‘’ section in your template. Example:


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

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!

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/

Hi Nick!

Your responses were super clear and helpful and allowed us to successfully add an image to our email too.

However, we’re experiencing the same problem as the original poster Mrdarkwood where our invoice number is now to the side of our image. The invoice number is displayed below the photo in Preview mode, but to the right in test emails.

I reviewed the Stack Overflow link you included, but I’m not able to figure this step out. Do you have any advice?