FROM CACHE - de_header

Großer Abstand in Bestellbestätigungs Mail

FlorianSchweitz
Tourist
10 0 1

Hi Zusammen,

 

in meiner Bestellbestätigungsmail ist, bevor die Mail an sich beginnt ein sehr großer weißer Abstand. (siehe Screenshot - Mac Mail)

 

Im Mailcode selbst, kann ich nicht erkennen woran das liegt.

Kennt jmd. das Problem und kann mir sagen wie ich es beheben kann?

 

Besten Dank vorab

 

Spoiler
{% capture email_title %}Vielen Dank für 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 }}, wir bereiten deine Bestellung gerade für die Zustellung vor.
      {% else %}
        Hallo {{ customer.first_name }}, wir bereiten deine Bestellung gerade für den Versand vor und benachrichtigen dich, sobald die Bestellung verschickt wurde.
    {% endcase %}
      {% if delivery_instructions != blank  %}
        <p><b>Informationen zur Zustellung:</b> {{ delivery_instructions }}</p>
      {% endif %}
     {% if consolidated_estimated_delivery_time %}
       <p>
         Voraussichtliche Zustellung <b>{{ consolidated_estimated_delivery_time }}</b>
       </p>
     {% endif %}
  {% endif %}
<p><a target='_blank' href='https://55.coffee/apps/download-pdf/orders/XXXXXXXXX/{{ id | times: 4675 }}/{{ name | handleize }}.pdf'>Lade hier deine PDF-Rechnung herunter</a></p>
{% 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">&nbsp;</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 }}&nbsp;&times;&nbsp;{{ 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 total_duties %}
          
<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>Zollgebühren</span>
    </p>
  </td>
  <td class="subtotal-line__value">
    <strong>{{ 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 %}
        {% if transaction.status == "success" %}
        {% unless transaction.kind == "authorization" or transaction.kind == "void" %}
          {% assign transaction_size = transaction_size | plus: 1 %}
          {% assign transaction_amount = transaction_amount | plus: transaction.amount %}
        {% endunless %}
        {% endif %}
      {% 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 == "capture" 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_size > 0 %}
                <td class="customer-info__item">
                  <h4>Zahlung</h4>
                  {% for transaction in transactions %}
                    {% if transaction.status == "success" or transaction.status == "pending" %}
                      {% if transaction.kind == "capture" 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 }} </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 }}<br /> &emsp;&emsp;&emsp;&nbsp;Geschenkgutscheinguthaben: {{ transaction.payment_details.gift_card.balance |  money }}
                          </p>
                          {% else %}
                              <p class="customer-info__item-content">
                              {{ transaction.gateway_display_name }} </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>
            </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: "Widerrufsrecht" }}
{%- endif -%}

 

Bildschirmfoto 2023-10-27 um 06.43.14.png

8 ANTWORTEN 8

Gabe
Shopify Staff
17340 2746 4052

Hey @FlorianSchweitz 

 

Danke für den HTML deiner Bestellbestätigungsmail und es scheint am ersten 👁️ ein HTML Rendering Problem deines E-Mail Client Mac Mail zu sein, würde ich mal sagen, denn mit Mac Mail habe ich selber HTML Rendering Probleme erlebt wenn man die E-Mails nicht im Plain Text Modus hat. Ein E-mail Client muss den externen HTML korrekt lesen und darstellen können.

 

Siehst du das selbe wenn du die obige E-Mail beispielsweise im Chrome Browser öffnest? Einige E-Mail-Clients haben ihre eigenen Stile, die sie auf E-Mails anwenden. Es könnte sein, dass dein E-Mail-Client (in diesem Fall Mac Mail) einige Standardmargen oder -paddings hinzufügt.

 

Der Code, den du bereitgestellt hast, ist recht sauber und es gibt keine offensichtlichen großen Margins oder Paddings im Code, die so einen leeren weißen Raum verursachen könnten. Er scheint dennoch etwas abgeschnitten zu sein, da er nur bis zum "header" der E-Mail reicht und der Hauptinhalt oder das Ende des HTML nicht gezeigt wird. Es könnte andere Teile des HTML-Codes oder der CSS-Stile geben, die den Abstand beeinflussen.

 

Die Zeile <link rel="stylesheet" type="text/css" href="/assets/notifications/styles.css"> verweist auf eine externe CSS-Datei. Es könnte sein, dass in dieser Datei bestimmte Stile definiert sind, die diesen großen weißen Abstand erzeugen. Überprüfe diese Datei, um zu sehen, ob es Stile gibt, die große Margins oder Paddings für die body oder table Tags oder deren Kinder setzen.

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

moni_louloute
Neues Mitglied
6 0 0

Hallo, ich habe genau das gleiche Problem! Lag es denn an der externen CSS-datei oder gibt es neue Erkenntnisse dazu?

Danke und LG

Moni

Gabe
Shopify Staff
17340 2746 4052

Hey @moni_louloute 

 

Welches Problem hast du genau? Ohne einen Link zu einem Beispiel können wir dir nicht viel helfen denn das muss in der Developer Console analysiert werden. Alle Shops und Themes sind ja anders.

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

moni_louloute
Neues Mitglied
6 0 0

Hi, das ist der Code von meiner Bestätigungsmail: 

 

 

Spoiler
{% capture email_title %}Vielen Dank für deine Bestellung! {% endcapture %}
{% capture email_body %}
  Das ist deine Bestellübersicht. Wenn du ein Schnittmuster (digital) oder einen Onlinekurs bestellt hast, erhältst du eine separate Email mit dem Link zu den Download-Dateien, bzw. zum Kursbereich. 

{% 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 %}
        {% if transaction.status == "success" %}
        {% unless transaction.kind == "authorization" or transaction.kind == "void" %}
          {% assign transaction_size = transaction_size | plus: 1 %}
          {% assign transaction_amount = transaction_amount | plus: transaction.amount %}
        {% endunless %}
        {% endif %}
      {% 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 == "capture" 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_size > 0 %}
                <td class="customer-info__item">
                  <h4>Zahlung</h4>
                  {% for transaction in transactions %}
                    {% if transaction.status == "success" or transaction.status == "pending" %}
                      {% if transaction.kind == "capture" 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 | downcase | replace: ' ', '-'  | payment_type_img_url }}" class="customer-info__item-credit" height="24">
                              <span>endet mit {{ transaction.payment_details.credit_card_last_four_digits }} </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 }} </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>
            </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 -%}

 

Und hier ist der Screenshot davon: 
Bildschirmfoto 2024-02-09 um 13.35.36.png

 

Brauchst du sonst noch etwas? Ich kann es einfach nicht erklären, woran es liegt. 

LG
moni

Gabe
Shopify Staff
17340 2746 4052

@moni_louloute 

 

Super, und kannst du diese E-Mail bitte an meine E-Mail leiten so dass ich diese da 👁️ kann? Es kann sein, dass der 🪱 ggf. in deinem E-Mail Client sitzt.

 

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

Gabe
Shopify Staff
17340 2746 4052

@moni_louloute 

 

Ok danke das habe ich jetzt angeschaut und um den großen leeren weißen Raum oberhalb deines E-Mail-Logos in der Shopify E-Mail-Vorlage zu beheben, könntest du die HTML- und CSS-Elemente der Vorlage überprüfen und anpassen. Insbesondere solltest du auf Elemente wie margin, padding, und height achten, die ungewollt Platz hinzufügen könnten. Stelle sicher, dass padding und margin für die Tabellen und Zellen (<td>) um das Logo herum minimal oder auf den gewünschten Wert gesetzt sind. Weitere Tipps:

 

  1. Entfernen unnötiger Höhenangaben: Überprüfe und entferne, falls vorhanden, alle height-Attribute oder CSS-Stile, die eine feste Höhe definieren, welche den weißen Raum verursachen könnten.

  2. Padding und Margin reduzieren: Stelle sicher, dass padding- und margin-Werte in den relevanten Tabellen und Zellen minimiert oder entfernt werden, falls diese zu viel Abstand hinzufügen.

  3. Überflüssige Elemente entfernen: Manchmal können unsichtbare Bilder (wie Spacer-GIFs) oder leere HTML-Elemente zusätzlichen Raum einnehmen. Entferne oder reduziere diese Elemente.

  4. CSS-Klassen überprüfen: Wenn du CSS-Klassen verwendest, überprüfe deren Definitionen, um sicherzustellen, dass keine unerwünschten Abstände durch diese hinzugefügt werden.

  5. Tabellenlayout optimieren: E-Mail-Vorlagen verwenden häufig ein Tabellenlayout. Optimiere diese Tabellen, um unnötigen Platz zu vermeiden.

  6. E-Mail-Clients testen: Verschiedene E-Mail-Clients können HTML unterschiedlich rendern. Teste deine E-Mail in verschiedenen Clients, um sicherzustellen, dass das Problem behoben ist.

Um dir dabei behilflich zu sein, hast du bereits ein Ticket bei unserem Support-Team geöffnet?

Falls nicht, sende bitte eine E-Mail an unseren Support wie hier demonstriert von der E-Mail-Adresse, die du zur Anmeldung in deinem Shopify-Shop verwendest, und gib deine myshopify.com-URL da auch ein. Sobald die dein Konto authentifiziert haben, können sie dir weiterhelfen.

 

Hoffe das hilft dir weiter - und eine schönes W-Ende wünsche ich dir! 😉

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

moni_louloute
Neues Mitglied
6 0 0

Hallo, danke für den Hinweis. Ich habe mit dem Support gechattet und es liegt auf jeden Fall an AppleMail, da es über einen anderen Email-Client nicht erscheint. Das ist schon mal gut und keine Ahnung, was Apple da macht, weil das nicht schon immer so war. Danke vielmals für die Hilfe und LG.

Gabe
Shopify Staff
17340 2746 4052

@moni_louloute 

 

Ja, habe ich vermutet denn Apple Produkte liefern des öfteren UI Probleme, wie die vielen Rendering Probleme des Safari Browser. Die Ursache ist wahrscheinlich weil Apple deren Produkte nur für das Apple Ökosystem vorbehalten wollen (vor allem aus Systemsicherheitsgründen) mit deren sehr proprietären Strategien und es daher oft zu Cross-Platform Probleme kommen kann. 

 

Somit liest und rendert der Mac Mail Client die HTML Struktur des Shopify Markups einfach falsch und die einzige Lösung wäre derzeit den HTML View in den Einstellungen des Clients abzuschalten und die E-Mails nur im Plain Text Modus zu rendern.

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog