FROM CACHE - de_header

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

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

Sari
Shopify Partner
2 0 0

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>

 

 

 

2 ANTWORTEN 2

Gabe
Shopify Staff
18263 2869 4234

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! 😉

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

Sari
Shopify Partner
2 0 0

WhatsApp Image 2024-07-08 at 12.11.12.jpegHaben 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>