Checkout Optimierung: Wie möchten Sie zur Kasse gehen?

Erster Checkout-Schritt vor der Optimierung

Der Kunde sieht ein großes Feld mit Auswahl Gast/Registrieren, zwei Eingabefeldern und zwei Schaltflächen Weiter/Anmelden.

Es ist nicht sofort erkennbar, dass es sich um zwei separate Bereiche handelt. Aus Versehen klicken unregistrierte Kunden nach der Auswahl Gast/Registrieren auf die Schaltfläche Anmelden und werden als Nächstes mit einer Fehlermeldung beschäftigt:

Ohne in das Template eingreifen zu müssen, lässt sich die visuelle Trennung der beiden Bereiche durch ein passendes Hintergrundbild erreichen, welches als Style Cheet angegeben wird.

Hierzu analysieren wir die Seitenstruktur mit dem FireFox-PlugIn FireBug:

Der betroffene DIV-Element ist eindeutig über id=’checkout-step-login‘ identifiziert, was die Zuweisung eines anderen Hintergrunds einfach macht:

#checkout-step-login {
   background: url('../images/bkg-login.png') 0 0 no-repeat;
}

Dieser Eintrag kann nach der letzten Zeile in die Datei styles.css in dem Skin-Ordner (z.B. /skin/frontend/default/default/css/) hinzugefügt werden.

Erster Checkout-Schritt nach der Optimierung

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.