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
Show More
**Informationen zur Zustellung:** {{ delivery_instructions }}
{% endif %} {% if consolidated_estimated_delivery_time %}
Voraussichtliche Zustellung **{{ consolidated_estimated_delivery_time }}**
{% endif %} {% endif %}
[Lade hier deine PDF-Rechnung herunter](https://55.coffee/apps/download-pdf/orders/XXXXXXXXX/{{ id | times: 4675 }}/{{ name | handleize }}.pdf)
{% endcapture %} <table>
</table><table>
</table><table>
</table>
| <br><br>{%- if shop.email_logo_url %} {%- else %}# {{ shop.name }}{%- endif %}<br><br> | <br><br>Bestellung {{ order_name }} <br><br> |
| - | - |
<table>
</table>
## {{ email_title }}
{{ email_body }}
{% if order_status_url %}<table>
</table>
| <br><br> |
| - |
| <br><br>Bestellung ansehen<br><br> |
| - |
{% if shop.url %}
| <br><br>oder Zu unserem Shop<br><br> |
| - |
{% endif %}{% else %} {% if shop.url %}<table>
</table>
| <br><br>Zu unserem Shop<br><br> |
| - |
{% endif %} {% endif %}{% assign gift_card_line_item = line_items | where: "gift_card" %} {% if gift_card_line_item.first %}<table>
</table>
| <br><br>### Geschenkgutschein<br><br> |
| - |
| <br><br>Du erhältst separate Benachrichtigungen für Geschenkgutscheine.<br><br> |
| - |
{% endif %}<table>
</table>
| <br><br>### Bestellübersicht<br><br> |
| - |
{% for line in subtotal_line_items %} {% endfor %}<table>
</table><table>
</table>
{% 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 %}
| <br><br>{% if line.image %} {% endif %}<br><br> | <br><br>{% 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 }}<br>{% if line.variant.title != 'Default Title' %} {{ line.variant.title }}<br>{% endif %} {% if line.selling_plan_allocation %} {{ line.selling_plan_allocation.selling_plan.name }}<br>{% 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 %}<br><br> |
| - | - |
{% 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 total_duties %} {% endif %} {% if total_tip and total_tip > 0 %} {% endif %}
| <br><br> |
| - |
| <br><br>Rabatt {{ discount_title }} <br><br> | <br><br>**-{{ discount_application.total_allocated_amount | money }}**<br><br> |
| - | - |
| <br><br>Zwischensumme<br><br> | <br><br>**{{ subtotal_price | money }}**<br><br> |
| <br><br>Abholungen<br><br> | <br><br>**{{ shipping_price | money }}**<br><br> |
| <br><br>Versand<br><br> | <br><br>**{{ shipping_price | money }}**<br><br> |
| <br><br>Zollgebühren<br><br> | <br><br>**{{ total_duties | money }}**<br><br> |
| <br><br>Steuern<br><br> | <br><br>**{{ tax_price | money }}**<br><br> |
| <br><br>Tip<br><br> | <br><br>**{{ total_tip | money }}**<br><br> |
| <br><br>Gesamt<br><br> | <br><br>**{{ total_price | money_with_currency }}**<br><br> |
| - | - |
{% if total_discounts > 0 %}
Du hast {{ total_discounts | money }} gespart
{% 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 %} {% 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 %} {% 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 %}
Zurückerstatten
<small>{{ refund_method_title | capitalize }}</small>
**- {{ transaction.amount | money }}**<table>
<tr>
<td colspan="2">
</td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
<tr>
<td>
{{transaction_name}}
</td>
<td>
**{{ transaction.amount | money }}**
</td>
</tr>
</table>{% endif %}<table>
</table>
| <br><br>### Kundeninformationen<br><br> |
| - |
{% if requires_shipping and shipping_address %} {% endif %} {% if billing_address %} {% endif %}<table>
</table>
| <br><br>#### Lieferadresse{{ shipping_address | format_address }}<br><br> | <br><br>#### Rechnungsadresse{{ billing_address | format_address }}<br><br> |
| - | - |
{% if requires_shipping and shipping_address %} {% endif %} {% assign transaction_count = transactions | size %} {% if transaction_size > 0 %} {% endif %}
| <br><br>#### Versand<br><br>{{ shipping_method.title }}<br><br> | <br><br>#### Zahlung{% 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 %}<br><br>endet mit {{ transaction.payment_details.credit_card_last_four_digits }} <br><br>{% elsif transaction.gateway_display_name == "Gift card" %}<br><br>endet mit {{ transaction.payment_details.gift_card.last_four_characters | upcase }}<br>Geschenkgutscheinguthaben: {{ transaction.payment_details.gift_card.balance | money }}<br><br>{% else %}<br><br>{{ transaction.gateway_display_name }}<br><br>{% endif %} {% endif %} {% endif %} {% endfor %}<br><br> |
| - | - |
<table>
</table>
| <br><br>Falls du Fragen hast, antworte auf diese E-Mail oder kontaktiere uns unter [{{ shop.email }}](mailto:{{ shop.email }}).<br><br> |
| - |
{%- 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 -%} ```
Gabe
October 27, 2023, 10:31am
2
Hey @FlorianSchweitz
Danke für den HTML deinerBestellbestätigungsmail und es scheint am ersten 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.
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
February 9, 2024, 12:54pm
4
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.
Hi, das ist der Code von meiner Bestätigungsmail:
Show More
</table><table>
</table><table>
</table>
| <br><br>{%- if shop.email_logo_url %} {%- else %}# {{ shop.name }}{%- endif %}<br><br> | <br><br>Bestellung {{ order_name }} <br><br> |
| - | - |
<table>
</table>
## {{ email_title }}
{{ email_body }}
{% if order_status_url %}<table>
</table>
| <br><br> |
| - |
| <br><br>Bestellung ansehen<br><br> |
| - |
{% if shop.url %}
| <br><br>oder Zu unserem Shop<br><br> |
| - |
{% endif %}{% else %} {% if shop.url %}<table>
</table>
| <br><br>Zu unserem Shop<br><br> |
| - |
{% endif %} {% endif %}{% assign gift_card_line_item = line_items | where: "gift_card" %} {% if gift_card_line_item.first %}<table>
</table>
| <br><br>### Geschenkgutschein<br><br> |
| - |
| <br><br>Du erhältst separate Benachrichtigungen für Geschenkgutscheine.<br><br> |
| - |
{% endif %}<table>
</table>
| <br><br>### Bestellübersicht<br><br> |
| - |
{% for line in subtotal_line_items %} {% endfor %}<table>
</table><table>
</table>
{% 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 %}
| <br><br>{% if line.image %} {% endif %}<br><br> | <br><br>{% 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 }}<br>{% if line.variant.title != 'Default Title' %} {{ line.variant.title }}<br>{% endif %} {% if line.selling_plan_allocation %} {{ line.selling_plan_allocation.selling_plan.name }}<br>{% 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 %}<br><br> |
| - | - |
{% 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 %}
| <br><br> |
| - |
| <br><br>Rabatt {{ discount_title }} <br><br> | <br><br>**-{{ discount_application.total_allocated_amount | money }}**<br><br> |
| - | - |
| <br><br>Zwischensumme<br><br> | <br><br>**{{ subtotal_price | money }}**<br><br> |
| <br><br>Abholungen<br><br> | <br><br>**{{ shipping_price | money }}**<br><br> |
| <br><br>Versand<br><br> | <br><br>**{{ shipping_price | money }}**<br><br> |
| <br><br>Zollgebühren<br><br> | <br><br>**{{ current_total_duties | money }}**<br><br> |
| <br><br>Steuern<br><br> | <br><br>**{{ tax_price | money }}**<br><br> |
| <br><br>Tip<br><br> | <br><br>**{{ total_tip | money }}**<br><br> |
| <br><br>Gesamt<br><br> | <br><br>**{{ total_price | money_with_currency }}**<br><br> |
| - | - |
{% if total_discounts > 0 %}
Du hast {{ total_discounts | money }} gespart
{% 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 %} {% 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 %} {% 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 %}
Zurückerstatten
<small>{{ refund_method_title | capitalize }}</small>
**- {{ transaction.amount | money }}**<table>
<tr>
<td colspan="2">
</td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
<tr>
<td>
{{transaction_name}}
</td>
<td>
**{{ transaction.amount | money }}**
</td>
</tr>
</table>{% endif %}<table>
</table>
| <br><br>### Kundeninformationen<br><br> |
| - |
{% if requires_shipping and shipping_address %} {% endif %} {% if billing_address %} {% endif %}<table>
</table>
| <br><br>#### Lieferadresse{{ shipping_address | format_address }}<br><br> | <br><br>#### Rechnungsadresse{{ billing_address | format_address }}<br><br> |
| - | - |
{% if requires_shipping and shipping_address %} {% endif %} {% assign transaction_count = transactions | size %} {% if transaction_size > 0 %} {% endif %}
| <br><br>#### Versand<br><br>{{ shipping_method.title }}<br><br> | <br><br>#### Zahlung{% 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 %}<br><br>endet mit {{ transaction.payment_details.credit_card_last_four_digits }} <br><br>{% elsif transaction.gateway_display_name == "Gift card" %}<br><br>endet mit {{ transaction.payment_details.gift_card.last_four_characters | upcase }} — **{{ transaction.amount | money }}**<br>Geschenkgutscheinguthaben: {{ transaction.payment_details.gift_card.balance | money }}<br><br>{% else %}<br><br>{{ transaction.gateway_display_name }}<br><br>{% endif %} {% endif %} {% endif %} {% endfor %}<br><br> |
| - | - |
<table>
</table>
| <br><br>Falls du Fragen hast, antworte auf diese E-Mail oder kontaktiere uns unter [{{ shop.email }}](mailto:{{ shop.email }}).<br><br> |
| - |
{%- 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:
Brauchst du sonst noch etwas? Ich kann es einfach nicht erklären, woran es liegt.
LG
Gabe
February 9, 2024, 1:08pm
6
@moni_louloute
Super, und kannst du diese E-Mail bitte an meine E-Mail leiten so dass ich diese da
Gabe
February 9, 2024, 2:02pm
7
@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:
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.
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.
Ü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.
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.
Tabellenlayout optimieren : E-Mail-Vorlagen verwenden häufig ein Tabellenlayout. Optimiere diese Tabellen, um unnötigen Platz zu vermeiden.
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
Hoffe das hilft dir weiter - und eine schönes W-Ende wünsche ich dir!
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
February 14, 2024, 8:26am
9
@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.
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.
