Beschreiben Sie Alleinstellungsmerkmale (USPs), in denen sich Ihr Unternehmen von denen der Mitbewerber unterscheidet. Das Conform Plus-Theme bietet keine Option zum Hinzufügen von USPs. In diesem Artikel wird erläutert, wie Sie mit CSS die Demoleiste in eine USP-Leiste umwandeln, ohne den Conform Plus-Code ändern zu müssen. Eine ähnliche Methode, bei der die Demoleiste mithilfe von CSS geändert wird, wird verwendet, um eine Wartungsbenachrichtigung auf einer ganzen Seite zu erstellen.
Dieser Artikel wurde mit Conform Plus getestet und funktioniert auch mit anderen Themes.
Standardausführung der Demoleiste:
Nach den Änderungen im CSS und der Übersetzung:
Anleitung
Aktivieren Sie die Demoleiste in Ihrem eCom Back Office, indem Sie in der Spalte Allgemeine Einstellungen auf Einstellungen > Erweitert klicken. Scrollen Sie zum Abschnitt SHOP und aktivieren Sie die Option Demoleiste anzeigen. Klicken Sie auf Speichern.
Sie können Symbole vor oder nach Ihren USPs hinzufügen, um sie zu unterscheiden. Klicken Sie hier, um die verfügbaren Symbole anzuzeigen.
Übersetzen Sie den Text in der Demobar, indem Sie zur Startseite zurückkehren und auf Content > Übersetzungen klicken. Wenn Sie auf Übersetzung anpassen klicken, wird unten die Demoleiste angezeigt. Klicken Sie auf Erstellen, geben Sie einen USP ein und klicken Sie auf Speichern. Die Zeilen werden dann durch Ihre USPs ersetzt:
Dieser Shop befindet sich im Aufbau. Übersetzen Sie zum Beispiel: • Vor Mitternacht bestellt, morgen geliefert! • Kostenloser Versand und Rücksendung
Aufgegebene Aufträge werden nicht erfüllt oder ausgeführt. Übersetzen Sie zum Beispiel so: • Immer am günstigsten!
Fügen Sie den CSS-Stilcode hinzu, indem Sie zur Startseite zurückkehren und auf Design > Erweitert > CSS anpassen klicken. Fügen Sie den folgenden Code hinzu und klicken Sie dann auf Speichern.
/* Dies sind Kommentare. Sie können dies in Ihrem CSS-Code belassen. Sie sind dazu da, jeden Abschnitt zu erklären. */
/* Dieser Teil des CSS-Codes sorgt dafür, dass der Link zum Backoffice und der Schließen-Button ausgeblendet werden. */
.wsa-demobar a, .wsa-demobar a.close {
display: none !important;
}
/* Dieser Teil des CSS-Codes stellt sicher, dass die USP-Leiste beim Scrollen nicht mehr wie die ursprüngliche Demoleiste sichtbar ist. */
.wsa-demobar{
position: absolute !important;
/* Dieser Teil des CSS-Codes steuert die Hintergrund- und Vordergrundfarbe der USP-Leiste. Suchen Sie online nach einer beliebigen Farbe in 'hex' und ersetzen Sie die unten stehende Zahl. #000000 ist schwarz, #ffffff ist weiß. */
background-color: #000000 !important;
color: #ffffff !important; }
/* Dieser Teil des CSS-Codes stellt sicher, dass die USP-Leiste vor mobilen Besuchern verborgen ist. Wenn ein Bildschirm kleiner als 767 Pixel breit ist, passen die USPs nicht richtig. */
@media screen and (max-width: 767px){
.wsa-demobar{
display: none !important;
}
body {
margin-top: 0px!important;
}
}