Preloader für Checkout-Seiten – So sorgen Sie für ein angenehmes Einkaufserlebnis

Ein Preloader ist eine kleine Animation (ähnlich einem Ladebalken), die angezeigt wird, während die Seite im Hintergrund geladen wird. Gerade auf Checkout-Seiten, wo Formulare manchmal etwas länger zum Laden brauchen, ist ein Preloader sinnvoll.

Vorteile für Ihre Kunden:

• Kein leerer Bildschirm: Anstatt auf eine leere Seite zu starren, sehen Ihre Kunden eine ansprechende Animation und wissen, dass die Seite geladen wird.
• Flüssigeres Einkaufserlebnis: Der Preloader sorgt für einen reibungslosen Ablauf und vermeidet störende Wartezeiten.
• Mehr Vertrauen: Ein professionell gestalteter Preloader zeigt, dass Sie Wert auf eine benutzerfreundliche Webseite legen. Das stärkt das Vertrauen Ihrer Kunden in Ihr Unternehmen.

In diesem Artikel zeigen wir Ihnen, wie Sie ganz einfach einen Preloader für Ihre Checkout-Seiten einrichten können.

Zusätzlicher Tipp: Verwenden Sie eine Sprache, die Ihre Zielgruppe versteht. Vermeiden Sie Fachbegriffe und konzentrieren Sie sich auf die Vorteile des Preloaders.

Preloader in Digiwunder einrichten #

Zunächst wählen Sie im Dashboard unter „Seiten“ die Seite aus, auf der Sie den Preloader einrichten möchten.

Wir wählen Fellpflege Checkout, weil wir den Preloader für die Checkout-Seite einrichten möchten.

Hier befindet sich idealerweise schon das Checkout-Form in Form eines Shortcodes.

Wie Sie ein Checkout-Form einrichten und auf Ihrer Seite platzieren lernen Sie hier:

Checkout Formular erstellen

Unter dem Shortcode vom Checkout-Formular fügen wir HTML-Code ein.

Klicken Sie auf das blaue Kästchen oben links.

Scrollen Sie herunter zu “Widgets” und wählen Sie “Individuelles HTML”.

Hier fügen wir nun HTML Code ein.

Markieren Sie den folgenden Code und speichern Sie ihn mit Command + C unter Mac oder Strg + C für Windows in Ihrer Zwischenablage.

Wichtig: „<style>“ am Anfang und „</script>“ am Ende müssen mit kopiert werden.

<style>
/* Stil für den Ladebildschirm */
#loader {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Stil für das Logo */
.loader-logo {
    width: 200px; /* Passe die Größe des Logos nach Bedarf an */
    margin-bottom: 20px; /* Abstand zum Ladebalken */
}

/* Stil für den Ladebalken */
.loader-bar {
    width: 80%;
    height: 10px;
    background-color: #f3f3f3;
    border-radius: 5px;
    overflow: hidden;
}

.loader-bar div {
    height: 100%;
    width: 0;
    background-color: #3498db;
    animation: loading 3s linear forwards;
}

@keyframes loading {
    0% { width: 0; }
    100% { width: 100%; }
}
</style>
<div id="loader">
    <img src="https://luca.digiwundertest.de/wp-content/uploads/2024/07/Digiwunder-Hundeschulen-Demo-Light-Logo.png" class="loader-logo" alt="Logo">
    <div class="loader-bar">
        <div></div>
    </div>
</div>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        setTimeout(function() {
            var loader = document.getElementById("loader");
            loader.style.display = "none";
        }, 3000);
    });
</script>

Mit Command + V bzw. Strg + V können Sie den Text in das HTML-Feld einfügen.

Speichern Sie die Seite nach dem Einfügen ab.

Logo im Preloader ändern #

Zuletzt möchten wir das Logo im Preloader anpassen. Dies geschieht, indem wir einen Link im Code ersetzen.

Hierfür steuern wir zu “Dokumente”.

Klicken Sie auf Ihr Logo bzw. das Bild, welches im Preloader angezeigt werden soll.

Unten rechts finden Sie die URL. Kopieren Sie diese in Ihre Zwischenablage und navigieren zurück zur Checkout-Seite.

In dem eingefügten HTML Code von oben suchen wir nun folgende Zeilen:

<div id="loader">
    <img src="https://luca.digiwundertest.de/wp-content/uploads/2024/07/Digiwunder-Hundeschulen-Demo-Light-Logo.png" class="loader-logo" alt="Logo">
    <div class="loader-bar">
        <div></div>
    </div>
</div>

Ihr eigenes Logo für den Preloader:

Sie möchten Ihr eigenes Logo im Preloader verwenden? Kein Problem!

1. URL finden: Der orange markierte Text unter „src“ ist die URL Ihres aktuellen Preloader-Logos.
2. URL ersetzen: Ersetzen Sie diese URL durch die URL Ihres eigenen Logos. Die URL Ihres Logos haben Sie ja in der Zwischenablage gespeichert.
3. Anführungszeichen beachten: Achten Sie darauf, dass die Anführungszeichen vor und hinter der URL (") erhalten bleiben.

Beispiel:

HTML

src="https://ihre-logo-url.de/logo.png"

Tipp: Achten Sie darauf, dass Ihr Logo im PNG-Format vorliegt und für die Anzeige im Preloader optimiert ist (z.B. transparente Hintergrund).

Testen Sie Ihren neuen Preloader #

Um zu testen, ob der Preloader erfolgreich eingerichtet wurde, können Sie die Seite speichern und aufrufen.

Oben rechts können Sie Ihre Seite mit einem Klick auf “Seite ansehen” öffnen und Ihren Preloader sehen.

Fehlerbehebung #

Preloader-Troubleshooting:

Klappt es nicht mit dem Preloader? Keine Sorge, hier ein paar Tipps:

• Code überprüfen: Manchmal schleichen sich Fehler im Code ein. Kopieren Sie den Code einfach noch einmal von Digiwunder und achten Sie darauf, dass Sie nur die URL ändern.
• Weniger ist mehr: Verändern Sie keine weiteren Zeichen im Code, auch keine Leerzeichen.
• Support kontaktieren: Wenn Sie alles überprüft haben und der Preloader immer noch nicht funktioniert, wenden Sie sich an unseren Support. Wir helfen Ihnen gerne weiter!

Mehr dazu erfahren Sie in diesem Artikel: https://digiwunder.com/dokumente/digiwunder-ticket-system-nutzen/