Zum Hauptinhalt springen
In diesem Kapitel
< Inhalt
Drucken

Shopping-Bausteine

Shopping-Bausteine helfen Dir, Produkte, Angebote und Servicevorteile klar und mailclienttauglich aufzubauen. Du findest alle 14 Varianten im Bereich Shopping der Elementleiste. Ziehe den gewünschten Baustein in den Newsletter und ersetze anschließend sämtliche Beispieltexte, Bilder, Preise und Links.

Wähle nach dem Einfügen den Text, das Bild, den Button oder die umgebende Karte auf der Arbeitsfläche aus. Inhalte änderst Du direkt im Newsletter; Gestaltung und Abstände steuerst Du im Style Editor. Das Ergebnis ist immer ein editierbarer Snapshot im Entwurf: Auch produktgebundene Werte aktualisieren sich nicht von selbst, wenn sich der Shop später ändert.

Welcher Baustein passt?

Du möchtest … Verwende …
eine Produktgruppe oder ein einzelnes Hauptprodukt vorstellen Kategorie-Highlight, Produkt des Monats oder Shop-Hero mit Produkt
ein kompaktes Angebot zeigen Angebotskarte, Produktset oder Produktreihe
einen Gutschein oder eine Zugabe bewerben Gutscheinaktion oder Geschenk zur Bestellung
mehrere Optionen vergleichen Angebotsvergleich
Vertrauen und Kaufgründe vermitteln Produktbewertung oder Shop-Vorteile
Anwendung und Nutzen erklären Inhaltsstoff-Spotlight oder Routine in drei Schritten
Kundenbindung fördern Kundenclub

Acht Varianten können einen gespeicherten Produktsnapshot aus einer Shop-Anbindung übernehmen. Sie sind in den Abschnitten als Produktbindung verfügbar markiert. Die übrigen sechs Bausteine bearbeitest Du vollständig von Hand. Eine ausführliche Anleitung zur Produktauswahl findest Du unter Produkte aus Anbindungen verwenden.

Sinnvoll kombinieren

Baustein Sinnvolle Kombination
Kategorie-Highlight, Produkt des Monats, Shop-Hero mit Produkt als Einstieg mit Produktreihe oder Angebotskarte danach
Angebotskarte, Produktset, Produktreihe mit Shop-Vorteilen und einem eindeutigen gemeinsamen Kampagnenthema
Gutscheinaktion, Geschenk zur Bestellung direkt nach dem passenden Produktangebot; Bedingungen im selben Abschnitt
Angebotsvergleich kurze Entscheidungshilfe davor, ein gemeinsamer Detail-Link danach
Produktbewertung vor der Angebotskarte oder nach einer Produktbeschreibung als Vertrauensbeleg
Inhaltsstoff-Spotlight, Routine in drei Schritten vor dem zugehörigen Produkt als Erklärung und Anwendungshilfe
Kundenclub nach Shop-Vorteilen oder als einzelner Abschluss-CTA

Die folgenden Abschnitte erklären für jede Variante Bearbeitung, sichtbares Ergebnis, Produktbindung und mobile Wirkung. Mobile Zusatzbilder zeigen die Blöcke, bei denen Stapelung oder Reihenfolge die Aussage verändert.

<a id=“shopping-category-spotlight“></a>

Kategorie-Highlight

Kategorie-HighlightKategorie-Highlight

Kategorie-Highlight

Mobile Stapelung des Kategorie-HighlightsMobile Stapelung des Kategorie-Highlights

Mobile Stapelung des Kategorie-Highlights

Das Kategorie-Highlight führt in eine Produktwelt oder Kollektion ein. Nutze es, wenn ein starkes Bild und eine kurze Einordnung wichtiger sind als viele einzelne Produktdetails. Bearbeitbar sind Bild, Kennzeichnung, Titel, Beschreibung, Preiszeile, Schaltflächentext und Link. Im Style Editor sind Bildausschnitt, Hintergrund, Innenabstand, Schriftfarben und Button besonders relevant.

Auf kleinen Bildschirmen werden Bild und Text untereinander angeordnet. Prüfe, ob Titel und Handlungsaufforderung ohne das Bild verständlich bleiben. Produktbindung verfügbar: Die Felder können aus einer Shop-Anbindung befüllt werden. Ohne Anbindung pflegst Du sie manuell. Verwende keine pauschale Kategorieaussage, wenn der verlinkte Shop nur ein einzelnes Produkt zeigt.

<a id=“shopping-coupon-promo“></a>

Gutscheinaktion

GutscheinaktionGutscheinaktion

Gutscheinaktion

Mobile Folge von Gutscheincode, Bedingungen und AktionMobile Folge von Gutscheincode, Bedingungen und Aktion

Mobile Folge von Gutscheincode, Bedingungen und Aktion

Die Gutscheinaktion stellt einen Gutscheincode, den Vorteil und seine Bedingungen kompakt heraus. Bearbeite Kennzeichnung, Überschrift, Erklärung, Gutscheincode, Gültigkeit, Schaltfläche und Link. Nutze für den Code eine gut lesbare Schrift und sorge für starken Kontrast; Laufzeit und Einschränkungen dürfen nicht nur im verlinkten Shop stehen.

Der Block wird manuell gepflegt und übernimmt keinen Gutschein aus einer Anbindung. Kontrolliere Code, Mindestbestellwert, Zeitraum und Zielseite direkt vor dem Versand. Mobil sollte der Code ohne seitliches Scrollen vollständig sichtbar sein. Ein abgelaufener oder falsch geschriebener Code ist nach dem Versand nicht automatisch korrigierbar.

<a id=“shopping-featured-product“></a>

Produkt des Monats

Produkt des MonatsProdukt des Monats

Produkt des Monats

Mobile Stapelung von Produkt des MonatsMobile Stapelung von Produkt des Monats

Mobile Stapelung von Produkt des Monats

Mit Produkt des Monats präsentierst Du ein einzelnes Produkt großzügig mit Bild und erklärendem Text. Du kannst Bild, Kennzeichnung, Produktname, Beschreibung, Preis, Button und Ziel-URL ändern. Passe im Style Editor vor allem Bildbreite, Spaltenabstände, Hintergrund und Buttonfarbe an.

Mobil werden die Spalten gestapelt. Prüfe die Reihenfolge, damit das Produktbild vor der Erklärung oder bewusst danach erscheint. Produktbindung verfügbar: Wähle einen Produktsnapshot oder pflege alle Angaben manuell. Kürze lange Beschreibungen; der Newsletter soll die Kaufentscheidung vorbereiten und nicht die vollständige Produktseite ersetzen.

<a id=“shopping-gift-with-purchase“></a>

Geschenk zur Bestellung

Geschenk zur BestellungGeschenk zur Bestellung

Geschenk zur Bestellung

Mobile Stapelung von Geschenk zur BestellungMobile Stapelung von Geschenk zur Bestellung

Mobile Stapelung von Geschenk zur Bestellung

Geschenk zur Bestellung erklärt eine Zugabe, die an einen Einkauf oder eine Bedingung geknüpft ist. Bearbeitbar sind Bild, Aktionslabel, Titel, Erklärung, Bedingungen, Button und Link. Stelle im Text eindeutig klar, ab welchem Warenwert, für welche Produkte und wie lange die Zugabe gilt.

Der Block stapelt Bild und Text auf kleinen Bildschirmen. Achte auf einen aussagekräftigen Alternativtext und ausreichend Abstand um die Bedingungen. Produktbindung verfügbar: Ein Produkt kann Bild, Name, Beschreibung und Link liefern; den Charakter der Zugabe und ihre Bedingungen musst Du trotzdem prüfen und gegebenenfalls ergänzen. Ein gespeicherter Stand ändert sich nicht automatisch mit der Shopaktion.

<a id=“shopping-ingredient-spotlight“></a>

Inhaltsstoff-Spotlight

Inhaltsstoff-SpotlightInhaltsstoff-Spotlight

Inhaltsstoff-Spotlight

Mobile Stapelung des Inhaltsstoff-SpotlightsMobile Stapelung des Inhaltsstoff-Spotlights

Mobile Stapelung des Inhaltsstoff-Spotlights

Das Inhaltsstoff-Spotlight verbindet ein Bild mit Herkunft, Eigenschaften und Nutzen eines Materials oder Inhaltsstoffs. Ändere Label, Titel, Fließtext, Vorteilszeile, Bild, Alternativtext, Button und Link. Nutze sachliche, belegbare Aussagen und vermeide medizinische oder rechtlich problematische Wirkversprechen.

Der Block wird manuell gepflegt. Mobil stehen Bild und Text untereinander; kontrolliere, ob die Erklärung auch ohne feine Bilddetails verständlich bleibt. Im Style Editor sind Bildausschnitt, Textabstand und Kontrast der Vorteilszeile besonders wichtig. Verlinke auf eine Seite, die die Aussage nachvollziehbar vertieft.

<a id=“shopping-loyalty-club-cta“></a>

Kundenclub

KundenclubKundenclub

Kundenclub

Der Kundenclub wirbt für Registrierung, Mitgliedschaft oder ein Bonusprogramm. Du bearbeitest Label, Überschrift, Kurzbeschreibung, Vorteilstext, Button und Link. Formuliere konkret, welchen Nutzen die Anmeldung bringt und ob Bedingungen, Kosten oder eine separate Einwilligung gelten.

Dieser Block wird manuell gepflegt und ist nicht mit Produktdaten verknüpft. Er bleibt mobil ein kompakter Handlungsblock; prüfe deshalb Buttonbreite, Textlänge und Kontrast. Die Schaltfläche sollte direkt zum richtigen Anmelde- oder Informationsweg führen. Teste den kompletten Prozess zusätzlich außerhalb des Newsletter-Editors.

<a id=“shopping-product-bundle“></a>

Produktset

ProduktsetProduktset

Produktset

Mobile Stapelung des ProduktsetsMobile Stapelung des Produktsets

Mobile Stapelung des Produktsets

Das Produktset fasst mehrere zusammengehörige Artikel als ein Angebot zusammen. Bearbeitbar sind Paketbild, Kennzeichnung, Titel, Beschreibung, enthaltene Artikel, Paketpreis, Button und Link. Zeige deutlich, was enthalten ist und ob der angegebene Preis einen Vorteil gegenüber dem Einzelkauf darstellt.

Auf kleinen Bildschirmen werden die Bereiche gestapelt. Produktbindung verfügbar: Du kannst einen Produktsnapshot übernehmen, musst bei echten Bundles aber prüfen, ob der importierte Name und die Beschreibung alle Bestandteile korrekt wiedergeben. Im Style Editor sind Listenlesbarkeit, Bildausschnitt und Button besonders wichtig. Unklare Paketbestandteile führen schnell zu falschen Erwartungen.

<a id=“shopping-product-grid-3col“></a>

Produktreihe

ProduktreiheProduktreihe

Produktreihe

Mobile Reihenfolge der ProduktreiheMobile Reihenfolge der Produktreihe

Mobile Reihenfolge der Produktreihe

Die Produktreihe zeigt drei gleichwertige Produktkarten nebeneinander. Jede Karte hat eigenes Bild, Kennzeichnung, Name, Kurztext, Preis, Button und Link. Wähle sie, wenn Empfänger drei Alternativen direkt überblicken sollen. Halte Texte und Bildformate ähnlich, damit die Karten ruhig wirken.

Produktbindung verfügbar: Jede der drei Karten wird unabhängig ausgewählt. Auf Mobilgeräten werden die Karten untereinander gestapelt; prüfe Reihenfolge und Abstände sowie die Gesamtlänge des Newsletters. Wenn nur ein oder zwei sinnvolle Produkte vorhanden sind, verwende lieber eine Einzelkarte statt leerer oder wiederholter Karten.

<a id=“shopping-product-offer-card“></a>

Angebotskarte

AngebotskarteAngebotskarte

Angebotskarte

Die Angebotskarte ist der kompakte Standard für ein einzelnes Produkt oder Angebot. Ändere Bild, Kennzeichnung, Name, Kurzbeschreibung, Preis, Buttontext und Link. Im Style Editor passen Rahmen, Innenabstand, Bildrundung und Buttonfarbe die Karte an Dein Design an.

Produktbindung verfügbar: Die Karte kann vollständig aus einem Produktsnapshot befüllt und danach weiterbearbeitet werden. Mobil bleibt sie einspaltig. Achte auf einen klaren Preiszusatz, etwa „inkl. MwSt.“ oder „ab“, wenn er für Dein Angebot erforderlich ist. Änderungen im Shop werden nicht automatisch in die gespeicherte Karte übernommen.

<a id=“shopping-product-offer-comparison“></a>

Angebotsvergleich

AngebotsvergleichAngebotsvergleich

Angebotsvergleich

Mobile Reihenfolge des AngebotsvergleichsMobile Reihenfolge des Angebotsvergleichs

Mobile Reihenfolge des Angebotsvergleichs

Der Angebotsvergleich stellt drei Optionen mit Namen, Preisen, Vorteilen und jeweils eigener Schaltfläche gegenüber. Verwende ihn für klar vergleichbare Pakete oder Tarifstufen. Bearbeite Einleitung, Kartenlabels, Namen, Preise, Merkmale, Buttons und Links. Verwende dieselben Kriterien in allen drei Spalten.

Der Vergleich wird manuell gepflegt; die drei Angebote lassen sich nicht über den Produktpicker befüllen. Mobil werden sie untereinander angezeigt, wodurch die direkte Gegenüberstellung schwächer wird. Wiederhole deshalb wichtige Kriterien in jeder Karte und kontrolliere die Stapelreihenfolge. Zu lange Merkmalslisten machen den Block schwer erfassbar.

<a id=“shopping-product-review-spotlight“></a>

Produktbewertung

ProduktbewertungProduktbewertung

Produktbewertung

Mobile Stapelung der ProduktbewertungMobile Stapelung der Produktbewertung

Mobile Stapelung der Produktbewertung

Die Produktbewertung verbindet Produktbild, Sternebewertung, Zitat, Produktname, Urheberangabe und Button. Nutze nur echte, freigegebene Bewertungen und kennzeichne verkürzte oder übersetzte Aussagen angemessen. Bearbeitbar sind alle sichtbaren Texte, Bild, Alternativtext und Link.

Produktbindung verfügbar: Produktbild, Produktname und Link können übernommen werden; Bewertung, Zitat und Urheberangabe musst Du separat pflegen und fachlich prüfen. Mobil werden Bild und Zitat untereinander dargestellt. Der Text muss auch ohne Sterne verständlich sein. Gib keine personenbezogenen Angaben oder Fotos ohne die erforderliche Einwilligung an.

<a id=“shopping-routine-steps-3col“></a>

Routine in drei Schritten

Routine in drei SchrittenRoutine in drei Schritten

Routine in drei Schritten

Mobile Reihenfolge der Routine in drei SchrittenMobile Reihenfolge der Routine in drei Schritten

Mobile Reihenfolge der Routine in drei Schritten

Routine in drei Schritten erklärt eine Anwendung als nummerierte Abfolge. Du bearbeitest Label, Einleitung, Schrittzahlen, Überschriften und Erläuterungen. Der Block eignet sich für Pflegeabläufe, Einrichtungsschritte oder eine kurze Kaufberatung, nicht für drei voneinander unabhängige Produkte.

Der Inhalt wird manuell gepflegt. Mobil werden die Schritte untereinander gestapelt; kontrolliere, dass ihre Reihenfolge eindeutig bleibt. Verwende pro Schritt eine Handlung und einen kurzen Ergebnistext. Farben und Nummern unterstützen die Orientierung, dürfen aber nicht die einzige Kennzeichnung der Reihenfolge sein.

<a id=“shopping-shop-benefits“></a>

Shop-Vorteile

Shop-VorteileShop-Vorteile

Shop-Vorteile

Mobile Stapelung der Shop-VorteileMobile Stapelung der Shop-Vorteile

Mobile Stapelung der Shop-Vorteile

Shop-Vorteile stellt drei Kaufargumente wie Versand, Beratung oder Rückgabe kompakt nebeneinander. Bearbeitbar sind Nummern, Überschriften und Kurztexte. Nutze nur Vorteile, die für die verlinkte Zielseite und den beworbenen Zeitraum tatsächlich gelten.

Der Block wird manuell gepflegt und enthält keine Produktbindung. Mobil stehen die Vorteile untereinander. Halte ihre Texte ähnlich lang und verständlich, auch wenn die Nummern oder Farben nicht wahrgenommen werden. Der Style Editor steuert Hintergrund, Schrift, Abstände und Rahmen; zu viele Details gehören auf eine verlinkte Serviceseite.

<a id=“shopping-shop-hero-product“></a>

Shop-Hero mit Produkt

Shop-Hero mit ProduktShop-Hero mit Produkt

Shop-Hero mit Produkt

Mobile Stapelung des Shop-Heros mit ProduktMobile Stapelung des Shop-Heros mit Produkt

Mobile Stapelung des Shop-Heros mit Produkt

Der Shop-Hero mit Produkt eröffnet einen Newsletter mit einem großen Produktmotiv, einer prägnanten Botschaft, Preis und Hauptaktion. Bearbeitbar sind Bild, Kennzeichnung, Titel, Text, Preis, Button und Link. Verwende ihn nur einmal als klaren Einstieg und halte Text auf dem Bild beziehungsweise im sichtbaren Anfangsbereich kurz.

Produktbindung verfügbar: Ein Produktsnapshot kann die Produktfelder befüllen. Mobil werden Motiv und Text gestapelt; prüfe Bildausschnitt, Alternativtext und Buttonbreite besonders sorgfältig. Ein Hero benötigt ein ausreichend großes Bild. Fehlt ein geeignetes Motiv, ist die kompaktere Angebotskarte meist die bessere Wahl.

Vor dem Versand prüfen

Kontrolliere bei jedem Shopping-Baustein Preis, Währung, Verfügbarkeit, Laufzeit, Produktlink, Bildrechte und Alternativtext. Öffne alle Links in einer Testmail und prüfe die mobile Reihenfolge. Ein bereits gespeicherter Produktsnapshot bleibt im Entwurf unverändert, bis Du das Produkt erneut auswählst oder die Angaben manuell bearbeitest.