Bild aus HTML Code wird nicht angezeigt in der E-Mail

[Sari]

Guten Tag,

wir wollen E-Mail Marketing über den Shop machen und haben einen HTML Code dafür für die APP geschrieben.

Allerdings zeigt er das erste Bild nicht an, sondern immer nur das zweite.

Kann da jemand unterstützen?

Hier der HTML Code

<div>

  <!-- Hauptlayout mit fester Breite -->

  <div class="layout one-col fixed-width stack" style="Margin:0 auto;max-width:600px;width:100%;word-wrap:break-word;word-break:break-word">

    <div class="layout__inner" style="border-collapse:collapse;display:table;width:100%;background:49% 14%/cover no-repeat url(https://uploads-ssl.webflow.com/65e5b88a4b0cdc1b02df082f/6684500369ee3049a6c5c093_Testangebot1.png);... 14%;background-repeat:no-repeat;background-size:cover">

      <div class="column" style="text-align:left;color:#60666d;font-size:14px;line-height:21px;font-family:Open Sans,sans-serif">

        <div style="Margin-left:20px;Margin-right:20px;Margin-top:24px">

          <div style="line-height:65px;font-size:1px">&nbsp;</div>

        </div>

        <div style="Margin-left:20px;Margin-right:20px">

          <div style="vertical-align:middle">

            <h1 style="Margin-top:0;Margin-bottom:0;font-style:normal;font-weight:normal;color:#44a8c7;font-size:32px;line-height:40px;font-family:Cabin,Avenir,sans-serif;text-align:center">&nbsp;</h1>

            <h3 style="Margin-top:20px;Margin-bottom:12px;font-style:normal;font-weight:normal;color:#44a8c7;font-size:17px;line-height:26px;text-align:center"><span style="text-decoration:inherit;color:#ffffff">Gutscheincode: <strong>FITNESS50</strong></span></h3>

          </div>

        </div>

        <div style="Margin-left:20px;Margin-right:20px">

          <div style="line-height:20px;font-size:1px">&nbsp;</div>

        </div>

        <div style="Margin-left:20px;Margin-right:20px">

          <div class="btn" style="Margin-bottom:20px;text-align:center">

            <a style="border-radius:4px;display:inline-block;font-size:14px;font-weight:bold;line-height:24px;padding:12px 24px;text-align:center;text-decoration:none!important;color:#44a8c7!important;background-color:#ffffff;font-family:Open Sans,sans-serif" href="https://socialray.cmail20.com/t/y-i-maukky-l-r/" target="_blank">Zum Shop</a>

          </div>

        </div>

        <div style="Margin-left:20px;Margin-right:20px;Margin-bottom:24px">

          <div style="line-height:12px;font-size:1px">&nbsp;</div>

        </div>

      </div>

    </div>

  </div>

</div>

  <!-- Abschnitt mit weißem Hintergrund -->

  <div class="layout one-col fixed-width stack" style="Margin:0 auto;max-width:600px;width:100%;word-wrap:break-word;word-break:break-word">

    <div class="layout__inner" style="border-collapse:collapse;display:table;width:100%;background-color:#ffffff">

      <div class="column" style="text-align:left;color:#60666d;font-size:14px;line-height:21px;font-family:Open Sans,sans-serif">

        <div style="Margin-left:20px;Margin-right:20px;Margin-top:24px">

          <div style="vertical-align:middle">

            <p style="Margin-top:0;Margin-bottom:0">Liebes Team,</p>

            <p style="Margin-top:20px;Margin-bottom:0">wir freuen uns, euch ein exklusives Angebot von SodaShaker vorstellen zu dürfen!</p>

            <p style="Margin-top:20px;Margin-bottom:0">SodaShaker ist bekannt für seine überragenden Getränkesirups, die durch ihre einzigartige Zusammensetzung aus Fruchtzucker und Süßungsmitteln nicht nur <strong>Sodbrennen verhindern</strong>, sondern auch ein <strong>geschmackliches Highlight</strong> sind.</p>

            <p style="Margin-top:20px;Margin-bottom:0">Unsere Halb-Light Getränke sind perfekt für eure Kunden, die auf <strong>Geschmack und Gesundheit</strong> Wert legen.</p>

            <p class="size-20" style="Margin-top:20px;Margin-bottom:0;font-size:17px;line-height:26px" lang="x-size-20"><span style="text-decoration:inherit;color:#ff9d00"><strong>Euer exklusiver Vorteil:</strong></span></p>

            <p style="Margin-top:20px;Margin-bottom:20px">Testet unser Siruppaket mit allen Geschmacksrichtungen jetzt mit einem einmaligen <strong>50% Rabatt</strong>! Gebt einfach den Code <strong>FITNESS50</strong> bei eurer Bestellung in unserem <a style="text-decoration:underline;color:#5c91ad" href="https://socialray.cmail20.com/t/y-i-maukky-l-y/" target="_blank">Online-Shop</a> ein.</p>

          </div>

        </div>

        <div style="Margin-left:20px;Margin-right:20px;Margin-bottom:24px">

          <div class="btn" style="text-align:center">

            <a style="border-radius:4px;display:inline-block;font-size:14px;font-weight:bold;line-height:24px;padding:12px 24px;text-align:center;text-decoration:none!important;color:#ffffff!important;background-color:#ff9d00;font-family:Open Sans,sans-serif" href="https://socialray.cmail20.com/t/y-i-maukky-l-j/" target="_blank">Zum Shop</a>

          </div>

        </div>

      </div>

    </div>

  </div>

  <!-- Zweispaltiges Layout mit Bild und Text -->

  <div class="layout two-col fixed-width stack" style="Margin:0 auto;max-width:600px;width:100%;word-wrap:break-word;word-break:break-word">

    <div class="layout__inner" style="border-collapse:collapse;display:table;width:100%;background-color:#ffffff">

      <div class="column" style="text-align:left;color:#60666d;font-size:14px;line-height:21px;font-family:Open Sans,sans-serif;width:50%;float:left">

        <div style="Margin-left:20px;Margin-right:20px;Margin-top:24px;Margin-bottom:24px">

          <div style="vertical-align:middle">

            <p class="size-20" style="Margin-top:0;Margin-bottom:0;font-size:17px;line-height:26px" lang="x-size-20"><span style="text-decoration:inherit;color:#ff9d00"><strong>Warum SodaShaker?</strong></span></p>

            <p style="Margin-top:20px;Margin-bottom:0;text-align:left">• <strong>Beste Qualität:</strong> Unser Sirup bietet den besten Geschmack auf dem Markt.</p>

            <p style="Margin-top:20px;Margin-bottom:0;text-align:left">• <strong>Gesundheit:</strong> Die Zusammensetzung verhindert Sodbrennen.</p>

            <p style="Margin-top:20px;Margin-bottom:0;text-align:left">• <strong>Vielfalt:</strong> Eine breite Auswahl an Geschmacksrichtungen, perfekt für jede Vorliebe.</p>

            <p style="Margin-top:20px;Margin-bottom:0;text-align:left">• <strong>Attraktive Preise:</strong> Mit unserem Rabattcode genießen Sie Premiumqualität zum halben Preis.</p>

          </div>

        </div>

      </div>

      <div class="column" style="width:50%;float:left;">

        <img src="https://uploads-ssl.webflow.com/65e5b88a4b0cdc1b02df082f/668450067b609cedaa795113_testangebot2.png" style="width:100%;height:auto;">

      </div>

    </div>

  </div>

</div>

  <!-- Abschnitt mit weißem Hintergrund -->

  <div class="layout one-col fixed-width stack" style="Margin:0 auto;max-width:600px;width:100%;word-wrap:break-word;word-break:break-word">

    <div class="layout__inner" style="border-collapse:collapse;display:table;width:100%;background-color:#ffffff">

      <div class="column" style="text-align:left;color:#60666d;font-size:14px;line-height:21px;font-family:Open Sans,sans-serif">

        <div style="Margin-left:20px;Margin-right:20px;Margin-top:24px">

          <div style="vertical-align:middle">

            <p style="Margin-top:20px;Margin-bottom:0">Das Testpaket beinhaltet <strong>alle Sorten sowie Dosierpumpen.</strong> Wir empfehlen euch, das Sirup neben einer Wasseranlage zu platzieren oder durch euch an die Mitglieder auszugeben. Solltet ihr weitere Fragen, Anliegen oder Anfragen haben könnt ihr uns direkt über den Shop kontaktieren.</p>

            <p style="Margin-top:20px;Margin-bottom:0">Wir freuen uns auf euch! Euer SodaShaker Team</p>

        </div>

      </div>

    </div>

<!-- Variablen für Abmeldung und Open-Tracking -->

<div class="layout one-col fixed-width stack" style="Margin:0 auto;max-width:600px;width:100%;word-wrap:break-word;word-break:break-word">

  <div class="layout__inner" style="border-collapse:collapse;display:table;width:100%;background-color:#ffffff">

    <div class="column" style="text-align:left;color:#60666d;font-size:14px;line-height:21px;font-family:Open Sans,sans-serif">

      <div style="Margin-left:20px;Margin-right:20px;Margin-top:24px">

        <div style="vertical-align:middle">

          <p style="Margin-top:20px;Margin-bottom:0"><a href="((unsubscribe_link))" style="color:#5c91ad;text-decoration:underline;">Abmelden</a></p>

          <p style="Margin-top:20px;Margin-bottom:0;opacity:0;">((open_tracking_block))</p>

        </div>

      </div>

    </div>

  </div>

</div>

 

[Gabe]

Hey @Sari 

Danke für den Code und das Problem, dass das erste Bild in deinem HTML-Code nicht angezeigt wird, kann durch mehrere Ursachen hervorgerufen werden. Hier sind einige Schritte zur Fehlerbehebung:

Stelle sicher, dass die Bild-URL korrekt ist und das Bild tatsächlich vorhanden ist. Du kannst die URL in einem Browser öffnen, um zu überprüfen, ob das Bild angezeigt wird. Einige E-Mail-Clients unterstützen bestimmte CSS-Eigenschaften und HTML-Elemente nicht. Überprüfe, ob das Hintergrundbild in verschiedenen E-Mail-Clients (wie Outlook, Gmail, Yahoo Mail, etc.) angezeigt wird. Sie unterstützen CSS im Head-Bereich nicht immer zuverlässig. Verwende stattdessen Inline-CSS:

<div style="background-image: url('https://uploads-ssl.webflow.com/65e5b88a4b0cdc1b02df082f/6684500369ee3049a6c5c093_Testangebot1.png'); background-position: center; background-repeat: no-repeat; background-size: cover;">

E-Mail-Clients benötigen oft eine feste Höhe, um Hintergrundbilder korrekt darzustellen. Stelle sicher, dass du eine feste Höhe für das Element angibst:

<div style="background-image: url('https://uploads-ssl.webflow.com/65e5b88a4b0cdc1b02df082f/6684500369ee3049a6c5c093_Testangebot1.png'); background-position: center; background-repeat: no-repeat; background-size: cover; height: 200px;">

Wenn das Hintergrundbild nicht funktioniert, kannst du stattdessen das Bild als img-Tag einfügen:

<img src="https://uploads-ssl.webflow.com/65e5b88a4b0cdc1b02df082f/6684500369ee3049a6c5c093_Testangebot1.png" alt="Testangebot" style="width:100%; height:auto;">

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

[Sari]

Haben den jetzt einmal angepasst schaut wie folgt aus, funktioniert nur leider immer noch nicht?

der "open_tracking_block" ganz unten im Code eigentlich auf volle Transparent gestellt ist. In der Mail sieht man leider die Schrift unten, beim Coden nicht...
Haben wir was falsch gemacht?

Spoiler

<!DOCTYPE html>

<html lang="de">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>SodaShaker Angebot</title>

</head>

<body style="margin:0;padding:0;font-family:Open Sans,sans-serif">

  <div style="Margin:0 auto;max-width:600px;width:100%;word-wrap:break-word;word-break:break-word">

    <div style="border-collapse:collapse;display:table;width:100%;background-image: url('https://uploads-ssl.webflow.com/65e5b88a4b0cdc1b02df082f/6684500369ee3049a6c5c093_Testangebot1.png'); background-position: center; background-repeat: no-repeat; background-size: cover; height: 200px;">

      <div style="text-align:left;color:#60666d;font-size:14px;line-height:21px;font-family:Open Sans,sans-serif">

        <div style="Margin-left:20px;Margin-right:20px;Margin-top:24px">

          <div style="line-height:65px;font-size:1px">&nbsp;</div>

        </div>

        <div style="Margin-left:20px;Margin-right:20px">

          <div style="vertical-align:middle">

            <h1 style="Margin-top:0;Margin-bottom:0;font-style:normal;font-weight:normal;color:#44a8c7;font-size:32px;line-height:40px;font-family:Cabin,Avenir,sans-serif;text-align:center">&nbsp;</h1>

            <h3 style="Margin-top:20px;Margin-bottom:12px;font-style:normal;font-weight:normal;color:#44a8c7;font-size:17px;line-height:26px;text-align:center"><span style="text-decoration:inherit;color:#ffffff">Gutscheincode: <strong>FITNESS50</strong></span></h3>

          </div>

        </div>

        <div style="Margin-left:20px;Margin-right:20px">

          <div style="line-height:20px;font-size:1px">&nbsp;</div>

        </div>

        <div style="Margin-left:20px;Margin-right:20px">

          <div style="Margin-bottom:20px;text-align:center">

            <a style="border-radius:4px;display:inline-block;font-size:14px;font-weight:bold;line-height:24px;padding:12px 24px;text-align:center;text-decoration:none!important;color:#44a8c7!important;background-color:#ffffff;font-family:Open Sans,sans-serif" href="https://socialray.cmail20.com/t/y-i-maukky-l-r/" target="_blank">Zum Shop</a>

          </div>

        </div>

        <div style="Margin-left:20px;Margin-right:20px;Margin-bottom:24px">

          <div style="line-height:12px;font-size:1px">&nbsp;</div>

        </div>

      </div>

    </div>

    <!-- Fallback-Image für E-Mail-Clients, die Hintergrundbilder nicht unterstützen -->

    <div style="display:none;visibility:hidden;">

      <img src="https://uploads-ssl.webflow.com/65e5b88a4b0cdc1b02df082f/6684500369ee3049a6c5c093_Testangebot1.png" alt="Testangebot" style="width:100%; height:auto;">

    </div>

  </div>



  <div style="Margin:0 auto;max-width:600px;width:100%;word-wrap:break-word;word-break:break-word;background-color:#ffffff">

    <div style="border-collapse:collapse;display:table;width:100%;background-color:#ffffff">

      <div style="text-align:left;color:#60666d;font-size:14px;line-height:21px;font-family:Open Sans,sans-serif">

        <div style="Margin-left:20px;Margin-right:20px;Margin-top:24px">

          <div style="vertical-align:middle">

            <p style="Margin-top:0;Margin-bottom:0">Liebes Team,</p>

            <p style="Margin-top:20px;Margin-bottom:0">wir freuen uns, euch ein exklusives Angebot von SodaShaker vorstellen zu dürfen!</p>

            <p style="Margin-top:20px;Margin-bottom:0">SodaShaker ist bekannt für seine überragenden Getränkesirups, die durch ihre einzigartige Zusammensetzung aus Fruchtzucker und Süßungsmitteln nicht nur <strong>Sodbrennen verhindern</strong>, sondern auch ein <strong>geschmackliches Highlight</strong> sind.</p>

            <p style="Margin-top:20px;Margin-bottom:0">Unsere Halb-Light Getränke sind perfekt für eure Kunden, die auf <strong>Geschmack und Gesundheit</strong> Wert legen.</p>

            <p class="size-20" style="Margin-top:20px;Margin-bottom:0;font-size:17px;line-height:26px" lang="x-size-20"><span style="text-decoration:inherit;color:#ff9d00"><strong>Euer exklusiver Vorteil:</strong></span></p>

            <p style="Margin-top:20px;Margin-bottom:20px">Testet unser Siruppaket mit allen Geschmacksrichtungen jetzt mit einem einmaligen <strong>50% Rabatt</strong>! Gebt einfach den Code <strong>FITNESS50</strong> bei eurer Bestellung in unserem <a style="text-decoration:underline;color:#5c91ad" href="https://socialray.cmail20.com/t/y-i-maukky-l-y/" target="_blank">Online-Shop</a> ein.</p>

          </div>

        </div>

        <div style="Margin-left:20px;Margin-right:20px;Margin-bottom:24px">

          <div style="text-align:center">

            <a style="border-radius:4px;display:inline-block;font-size:14px;font-weight:bold;line-height:24px;padding:12px 24px;text-align:center;text-decoration:none!important;color:#ffffff!important;background-color:#ff9d00;font-family:Open Sans,sans-serif" href="https://socialray.cmail20.com/t/y-i-maukky-l-j/" target="_blank">Zum Shop</a>

          </div>

        </div>

      </div>

    </div>

  </div>



  <div style="Margin:0 auto;max-width:600px;width:100%;word-wrap:break-word;word-break:break-word;background-color:#ffffff">

    <div style="border-collapse:collapse;display:table;width:100%;background-color:#ffffff">

      <div style="text-align:left;color:#60666d;font-size:14px;line-height:21px;font-family:Open Sans,sans-serif;width:50%;float:left">

        <div style="Margin-left:20px;Margin-right:20px;Margin-top:24px;Margin-bottom:24px">

          <div style="vertical-align:middle">

            <p class="size-20" style="Margin-top:0;Margin-bottom:0;font-size:17px;line-height:26px" lang="x-size-20"><span style="text-decoration:inherit;color:#ff9d00"><strong>Warum SodaShaker?</strong></span></p>

            <p style="Margin-top:20px;Margin-bottom:0;text-align:left">• <strong>Beste Qualität:</strong> Unser Sirup bietet den besten Geschmack auf dem Markt.</p>

            <p style="Margin-top:20px;Margin-bottom:0;text-align:left">• <strong>Gesundheit:</strong> Die Zusammensetzung verhindert Sodbrennen.</p>

            <p style="Margin-top:20px;Margin-bottom:0;text-align:left">• <strong>Vielfalt:</strong> Eine breite Auswahl an Geschmacksrichtungen, perfekt für jede Vorliebe.</p>

            <p style="Margin-top:20px;Margin-bottom:0;text-align:left">• <strong>Attraktive Preise:</strong> Mit unserem Rabattcode genießen Sie Premiumqualität zum halben Preis.</p>

          </div>

        </div>

      </div>

      <div style="width:50%;float:left;">

        <img src="https://uploads-ssl.webflow.com/65e5b88a4b0cdc1b02df082f/668450067b609cedaa795113_testangebot2.png" style="width:100%;height:auto;" alt="SodaShaker Angebot">

      </div>

    </div>

  </div>



  <div style="Margin:0 auto;max-width:600px;width:100%;word-wrap:break-word;word-break:break-word;background-color:#ffffff">

    <div style="border-collapse:collapse;display:table;width:100%;background-color:#ffffff">

      <div style="text-align:left;color:#60666d;font-size:14px;line

                    <!-- Abschnitt mit weißem Hintergrund -->

  <div class="layout one-col fixed-width stack" style="Margin:0 auto;max-width:600px;width:100%;word-wrap:break-word;word-break:break-word">

    <div class="layout__inner" style="border-collapse:collapse;display:table;width:100%;background-color:#ffffff">

      <div class="column" style="text-align:left;color:#60666d;font-size:14px;line-height:21px;font-family:Open Sans,sans-serif">

        <div style="Margin-left:20px;Margin-right:20px;Margin-top:24px">

          <div style="vertical-align:middle">

            <p style="Margin-top:20px;Margin-bottom:0">Das Testpaket beinhaltet <strong>alle Sorten sowie Dosierpumpen.</strong> Wir empfehlen euch, das Sirup neben einer Wasseranlage zu platzieren oder durch euch an die Mitglieder auszugeben. Solltet ihr weitere Fragen, Anliegen oder Anfragen haben könnt ihr uns direkt über den Shop kontaktieren.</p>

                                                      <p style="Margin-top:20px;Margin-bottom:0">Wir freuen uns auf euch!</p>

                                                                                                Euer SodaShaker Team</p>

        </div>

      </div>

    </div>

     

<!-- Variablen für Abmeldung und Open-Tracking -->

<div class="layout one-col fixed-width stack" style="Margin:0 auto;max-width:600px;width:100%;word-wrap:break-word;word-break:break-word">

  <div class="layout__inner" style="border-collapse:collapse;display:table;width:100%;background-color:#ffffff">

    <div class="column" style="text-align:left;color:#60666d;font-size:14px;line-height:21px;font-family:Open Sans,sans-serif">

      <div style="Margin-left:20px;Margin-right:20px;Margin-top:24px">

        <div style="vertical-align:middle">

          <p style="Margin-top:20px;Margin-bottom:0"><a href="((unsubscribe_link))" style="color:#5c91ad;text-decoration:underline;">Abmelden</a></p>

          <p style="Margin-top:20px;Margin-bottom:0;opacity:0;">((open_tracking_block))</p>

        </div>

      </div>

    </div>

  </div>

[Sari]

@Gabekannst du noch einmal unterstützen ?

Haben jetzt andere externe Builder ausprobiert da wird die Mail immer korrekt angezeigt, es scheint an Shopify Email zu liegen.

Beste Grüße

[Gabe]

Hey @Sari 

Um dir dabei behilflich zu sein, wird unser Team das 👀 müssen. 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.