Darstellung & Widget-Vorlagen

Passen Sie das Aussehen der Widgets an, wählen Sie Anzeigemodi, steuern Sie Sichtbarkeitsoptionen und verwalten Sie HTML/CSS-Vorlagen für jeden Widget-Typ.

Dashboard → Einstellungen → Darstellung

Darstellung & Widget-Vorlagen

Legen Sie fest, wie jedes Umbrella-Widget in Ihrem Shop aussieht und sich verhält. Wählen Sie in der Seitenleiste einen Widget-Typ aus und konfigurieren Sie ihn dann über drei Tabs:

  • Einstellungen — Funktionen ein- und ausschalten, Anzeigemodi wählen, Sichtbarkeit steuern
  • Vorlage — HTML und CSS im Code-Editor bearbeiten
  • Sprachen — Übersetzungstexte für mehrsprachige Shops verwalten

Widget-Typen

Produktseite (PDP)

  • PDP-Widget — die zentrale Garantieangebotskarte auf Produktseiten
  • PDP-OEM-Widget — Informationen zur Herstellergarantie
  • Auswahl-Modal — Pop-up zur Auswahl der Garantieoptionen
  • Info-Modal — Pop-up mit Details zum Garantieschutz

Warenkorb

  • Warenkorb geschützt — Statuskarte für Artikel mit Garantieschutz
  • Warenkorb ungeschützt — Upsell-Karte für Artikel ohne Garantieschutz

Bestellstatus

  • Bestellstatus-Widget — Garantiedetails auf den Bestellbestätigungs- bzw. Bestellstatusseiten
  • Bestellstatus-Modal — ausführliches Garantie-Modal, das von der Bestellstatusseite aus geöffnet wird

Nach dem Kauf

  • Karte nach dem Kauf — Garantie-Upsell auf Bestellstatusseiten für nicht gedeckte Produkte
  • Modal nach dem Kauf — Auswahl-Modal für Upsells nach dem Kauf

Versandschutz

  • Versandschutz-Widget — Versandschutz-Angebot auf der Warenkorbseite
  • Versandschutz-Modal — Info-Modal mit Details zum Versandschutz

Einstellungen des PDP-Widgets

Das zentrale Garantieangebot auf Produktdetailseiten. Mit PDP-Karte aktivieren blenden Sie es ein oder aus.

Anzeigemodus

ModusBeschreibung
InlineDie Garantieoptionen erscheinen direkt auf der Seite als auswählbare Karten
ModalEine Schaltfläche oder ein Banner öffnet ein Modal mit den Garantieoptionen
EinzelnJede Garantieoption wird als eigenständige Karte dargestellt

Nur im Inline-Modus

  • Option muss gewählt werden — Kunden müssen eine Garantieoption auswählen, bevor sie das Produkt in den Warenkorb legen
  • Erste Option automatisch auswählen — der erste Plan ist vorausgewählt (Kunden können ihn ändern oder abwählen)
  • Option „Kein Schutz“ anzeigen — zeigt eine Option „Nein, danke“ an, mit der Kunden ausdrücklich ablehnen können

Weitere Optionen

  • Modal beim Hinzufügen zum Warenkorb öffnen — ist keine Garantie ausgewählt, erscheint ein Modal, bevor der Artikel hinzugefügt wird
  • Benutzerdefinierter Einfüge-Selektor — CSS-Selektor, mit dem Sie steuern, wo das Widget auf Ihrer Seite platziert wird
  • Benutzerdefinierte Einfügeposition — Außen oben, Innen oben, Innen unten oder Außen unten
  • Benutzerdefinierte Vorlage verwenden — eigenes HTML/CSS statt des Standarddesigns verwenden
  • Umbrella-Branding ausblenden — entfernt die Fußzeile „Powered by Umbrella“

Einstellungen des PDP-OEM-Widgets

Zeigt Informationen zur Herstellergarantie (OEM) auf Produktseiten an, getrennt von den Angeboten für erweiterte Garantien.

  • OEM-Widget aktivieren — das OEM-Widget ein- oder ausblenden
  • Schutzdetails ausblenden — die ausführliche Deckungsbeschreibung ausblenden
  • Garantiedauer ausblenden — die Anzeige der Garantielaufzeit ausblenden
  • Benutzerdefinierte Vorlage verwenden / Umbrella-Branding ausblenden

Einstellungen des Auswahl-Modals

Pop-up, das die Garantieoptionen anzeigt. Es wird über das PDP-Widget, den Warenkorb oder beim Hinzufügen zum Warenkorb geöffnet.

  • Auswahl-Modal aktivieren
  • Anzeigemodus — Inline (auswählbare Karten) oder Einzeln (eigenständige Karten)
  • Option muss gewählt werden — vor dem Schließen ist eine Auswahl erforderlich
  • Erste Option automatisch auswählen — die erste Option ist vorausgewählt (nur im Inline-Modus)
  • Benutzerdefinierte Vorlage verwenden / Umbrella-Branding ausblenden

Einstellungen des Info-Modals

Zeigt ausführliche Informationen zum Garantieschutz an, wenn Kunden auf die Info- bzw. Details-Schaltfläche klicken.

  • Info-Modal aktivieren
  • Benutzerdefinierte Vorlage verwenden / Umbrella-Branding ausblenden

Einstellungen des Widgets „Warenkorb geschützt“

Erscheint bei Warenkorbartikeln, die bereits Garantieschutz haben.

  • Karte für geschützte Warenkorbartikel aktivieren
  • Schaltfläche für Info-Modal anzeigen — Kunden können die Garantiedetails ansehen
  • Schaltfläche „Schutz entfernen“ anzeigen — Kunden können den Garantieschutz entfernen
  • Position der erweiterten Garantie im Warenkorb ausblenden — Garantiedetails nur innerhalb der Produktkarte anzeigen
  • Preisstufe der Position für die erweiterte Garantie ausblenden — die Preisstufe in der Garantieposition ausblenden
  • Details der Position für die erweiterte Garantie ausblenden — ausführliche Garantieinformationen in der Position ausblenden
  • Zum Gesamtbetrag der geschützten Position hinzufügen — den Garantiepreis mit dem angezeigten Gesamtbetrag des Produkts zusammenfassen
  • Interaktionen mit der Garantieposition deaktivieren — verhindert Mengenänderungen an der Garantieposition
  • Benutzerdefinierte Vorlage verwenden / Umbrella-Branding ausblenden

Einstellungen des Widgets „Warenkorb ungeschützt“

Erscheint bei Warenkorbartikeln ohne Garantieschutz und bietet Kunden die Möglichkeit, eine Deckung hinzuzufügen.

  • Karte für ungeschützte Warenkorbartikel aktivieren
  • Anzeigemodus — Modal, Inline oder Einzeln
  • Nur im Inline-Modus: Option muss gewählt werden, Erste Option automatisch auswählen, Option „Kein Schutz“ anzeigen
  • Schaltfläche für Info-Modal anzeigen
  • Benutzerdefinierte Vorlage verwenden / Umbrella-Branding ausblenden

Einstellungen des Bestellstatus-Widgets

Zeigt Informationen zur Garantiepolice auf Bestellbestätigungs- und Bestellstatusseiten an.

  • Bestellstatus-Widget aktivieren
  • Info-Schaltfläche ausblenden / Anspruchs-Schaltfläche ausblenden / Statusanzeige ausblenden / Garantielaufzeit ausblenden / Informationen zum Anspruchsfenster ausblenden
  • Benutzerdefinierte Vorlage verwenden / Umbrella-Branding ausblenden

Einstellungen des Bestellstatus-Modals

Ausführliches Modal mit allen Details zur Garantiepolice, erreichbar über das Bestellstatus-Widget.

  • Bestellstatus-Modal aktivieren
  • Policen-ID ausblenden / Startdatum ausblenden / Enddatum ausblenden / Schaltfläche „Police anzeigen“ ausblenden / Schaltfläche „Anspruch einreichen“ ausblenden
  • Benutzerdefinierte Vorlage verwenden / Umbrella-Branding ausblenden

Einstellungen von Karte & Modal nach dem Kauf

Karte nach dem Kauf — Garantie-Upsell auf Bestellstatusseiten für nicht gedeckte Produkte. Schalten Sie Widget nach dem Kauf aktivieren ein.

Modal nach dem Kauf — Auswahl-Modal, das sich über die Upsell-Karte öffnet. Schalten Sie Modal nach dem Kauf aktivieren ein.

Beide unterstützen Benutzerdefinierte Vorlage verwenden und Umbrella-Branding ausblenden.


Einstellungen des Versandschutz-Widgets

Versandschutz-Angebot auf der Warenkorbseite.

  • Widget für den Versandschutz aktivieren
  • Anzeigemodus — Schaltflächenauswahl (zwei Schaltflächen: hinzufügen/ablehnen) oder Kontrollkästchen (ein einzelner Schalter)
  • Optionen bei Schaltflächenauswahl: Benutzerdefinierter Checkout-Button (HTML) (unterstützt {{{total}}} und {{{price}}}) und Benutzerdefinierter Text für „Ohne fortfahren“
  • Benutzerdefinierte Vorlage verwenden / Umbrella-Branding ausblenden

Versandschutz-Modal — Info-Modal mit Details zum Versandschutz. Schalten Sie Versandschutz-Modal aktivieren ein.


Vorlagen-Editor

Jedes Widget hat seine eigene HTML- und CSS-Vorlage. Sie erreichen sie über den Tab Vorlage.

  • HTML-Editor — verwendet Handlebars-Syntax ({{variable}} für maskierte Ausgabe, {{{variable}}} für rohes HTML). Die verfügbaren Variablen sind im Bereich „Anweisungen“ aufgeführt.
  • CSS-Editor — die Styles gelten nur für das ausgewählte Widget, damit es keine Konflikte mit Ihrem Theme gibt.
  • Vorschaubereich — Live-Darstellung mit Beispieldaten. Schalten Sie zwischen hellem und dunklem Modus, Anzahl der Optionen, Auswahlzustand und Ablaufzuständen um.

Klicken Sie auf Auf Standardwerte zurücksetzen, um die ursprüngliche Vorlage wiederherzustellen, falls Ihre Anpassungen Probleme verursachen.

Warnung Das Zurücksetzen einer Vorlage kann nicht rückgängig gemacht werden. Sichern Sie vor dem Zurücksetzen jeden benutzerdefinierten Code, den Sie behalten möchten.

Tab „Sprachen“

Verwalten Sie die Übersetzungstexte jedes Widgets, um mehrsprachige Shops zu unterstützen. Sie können Übersetzungsschlüssel für jede unterstützte Sprache ansehen, hinzufügen und bearbeiten.


Verwandte Themen

Demo buchen

Erfahren Sie, wie myUmbrella Ihr Garantieprogramm verändern kann

Termin wählen

Wählen Sie einen passenden Termin für Ihre persönliche Demo

ESC

Tippen Sie, um alle Inhalte zu durchsuchen

Keine Ergebnisse gefunden

Versuchen Sie einen anderen Suchbegriff