E-Mail Code kürzen

[Nina2020]

Hallo, 

ich verwende die schöne OrderlyEmails Vorlagen für meine Bestellbestätigungen, die beinhalten sehr viele Design-Befehle, so dass sie sehr lang sind. 

Die gleiche Vorlage wollte ich für die Bestätigungen der Abonnements verwenden, die Kunden kaufen (SealSubscription App) nutzen. Da ergibt sich aber folgendes Problem: Die Vorlage ist viel zu lang. Das heißt, es müssten Design-Befehle raus. Also das müsste gekürzt werden. Kann mir jemand damit helfen? 

Ich kann leider keine Datei anhängen hier an den post. 

Lieben Dank!

[Gabe]

Hey Nina! @Nina2020 

Du möchtest die E-Mail-Vorlage von OrderlyEmails für Abonnement-Bestätigungen kürzen, um die E-Mail kompakter zu machen. Analysiere einfach den HTML-Code und identifiziere die Abschnitte, die du entfernen oder vereinfachen möchtest wie:

1. Header und Footer: Diese enthalten oft umfangreiche Design-Elemente. Überlege, ob du sie vereinfachen kannst.
2. Bilder: Reduziere die Anzahl der Bilder oder ersetze sie durch kleinere Versionen.
3. CSS: Inline-CSS kann umfangreich sein. Entferne unnötige Styles oder kombiniere ähnliche Styles.
4. Sektionen: Bestimme, welche Sektionen der E-Mail essentiell sind und welche weggelassen werden können.

Hier ein Beispiel wie du den folgenden Header Code kürzen kannst:

<div style="background-color: #f3f3f3; padding: 20px; text-align: center;">
  <img src="https://yourstore.com/logo.png" alt="Logo" style="max-width: 200px;">
  <h1 style="color: #333; font-size: 24px;">Vielen Dank für Ihre Bestellung!</h1>
</div>

Zu:

<div style="text-align: center;">
  <h1>Vielen Dank für Ihre Bestellung!</h1>
</div>

Bilder Code reduzieren:

<div style="padding: 20px;">
  <img src="https://yourstore.com/product1.png" alt="Product 1" style="max-width: 100%;">
  <img src="https://yourstore.com/product2.png" alt="Product 2" style="max-width: 100%;">
</div>

Zu:

<div style="padding: 20px;">
  <p>Produktübersicht</p>
</div>

Hier ist ein Beispiel für eine stark vereinfachte E-Mail-Vorlage:

<div style="text-align: center;">
  <h1>Vielen Dank für Ihre Bestellung!</h1>
</div>

<div style="padding: 20px; text-align: center;">
  <p>Hallo {{ customer.first_name }},</p>
  <p>Vielen Dank für den Kauf unseres Abonnements. Ihre Bestellnummer ist {{ order.name }}.</p>
  <p>Sie können Ihre Bestellinformationen jederzeit in Ihrem Kundenkonto einsehen.</p>
</div>

<div style="padding: 20px; text-align: center;">
  <p>Mit freundlichen Grüßen,</p>
  <p>Ihr Team von {{ shop.name }}</p>
</div>

Hoffe das hilft dir weiter - lass wissen falls nicht! 😉

[Nina2020]

Lieben Dank, 

bei der Vorlage sind unheimlich viele design-Elemente im Code selbst. Solche Dinge:

                                              <tr style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;">

                                                <th height="1" border="0" style="height: 1px; line-height: 1px; font-size: 1px; mso-line-height-rule: exactly; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; padding: 0;" bgcolor="#ffffff">

                                                  <img id="open-image" src="https://{{ shop.domain }}/tools/emails/open/order-confirmation/1" alt="" width="1" height="1" border="0" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;">

Und ich denke, das ist das Problem. Da ich lange raus bin (habe das letzte Mal mit Codes gekämpft 2013/14) und ich möchte, dass die E-Mails grundlegend schicken bleiben und auf verschieden devices/Browsern schick aussehen, bräuchte ich jemanden, der da mal durchscrollt und schaut was raus kann. Ich weiß z.b. nicht was "mso-line-height-rule" heisst. Ich kenne nicht alle Befehle die in der Vorlage sind. 

Vielleicht kennt sich ja jemand so gut aus, dass es für ihn/sie nicht so ein Aufwand wäre einmal alles was nicht unbedingt notwendig ist rauszunehmen. 

Aber danke dir für deine Hilfestellung!

[Gabe]

Hey @Nina2020 

Wie wäre es mit folgenden:

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      background-color: #f3f3f3;
    }
    .container {
      width: 100%;
      max-width: 600px;
      margin: 0 auto;
      padding: 20px;
      background-color: #ffffff;
      text-align: center;
    }
    h1 {
      font-size: 24px;
      color: #333;
    }
    p {
      font-size: 16px;
      color: #666;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>Vielen Dank für Ihre Bestellung!</h1>
    <p>Hallo {{ customer.first_name }},</p>
    <p>Vielen Dank für den Kauf unseres Abonnements. Ihre Bestellnummer ist {{ order.name }}.</p>
    <p>Sie können Ihre Bestellinformationen jederzeit in Ihrem Kundenkonto einsehen.</p>
    <p>Mit freundlichen Grüßen,</p>
    <p>Ihr Team von {{ shop.name }}</p>
  </div>
</body>
</html>

Hoffe das hilft dir weiter - lass wissen falls nicht! 😉

[Max-14agency-de · Accepted solution]

Hallo, 

in OrderlyEmails kannst du das letzte Template (Other Templates > Blank Templates) nutzen. 

Das lässt sich mit den Blöcken aus Orderly erweitern.  

Alternativ kannst du dieses Template exportieren und das Wording anpassen indem du folgende Zeile durch einfaches HTML ersetzt: 

<!-- ADD YOUR CUSTOM CODE/CONTENT HERE -->

Ich hoffe das hilft weiter.

[Nina2020]

Vielen Dank, ich habe es wirklich darüber lösen können!