Alleinstellungsmerkmale (Unique Selling Propositions = USPs) geben an, was Ihr Geschäft von den Wettbewerbern unterscheidet. Mit einigen fortgeschrittenen CSS-Anwendungen können wir die Demoleiste in eine USP-Leiste umwandeln, ohne den Code bearbeiten zu müssen. Dadurch können Anpassungen vorgenommen werden, ohne den Template-Editor zu aktivieren, was eine einfache, aber leistungsstarke Alternative zur Anzeige von Nachrichten darstellt.

Dies wurde mit dem Conform Plus-Template getestet und funktioniert möglicherweise auch mit anderen Templates. Das benutzerdefinierte CSS stellt sicher, dass die USP-Leiste angemessen gestaltet ist und auf kleineren Bildschirmen ausgeblendet wird, um eine übersichtliche mobile Benutzeroberfläche aufrechtzuerhalten.

Für weitere Anpassungen können beliebige Standard-CSS-Eigenschaften angewendet werden, um das Erscheinungsbild der USP-Leiste zu optimieren. Eine ähnliche Methode mit CSS kann verwendet werden, um eine ganzseitige Wartungsmeldung zu erstellen.

Beispiel-Demo-Leiste

Das Standarddesign der Demoleiste:

Nach CSS und Übersetzungsänderungen:

Aktivieren der Demo-Leiste

Die folgenden Schritte führen Sie durch die Aktivierung der Demo-Leiste, nachdem Sie sich in Ihrem eCom-Backoffice angemeldet haben.

1. Navigieren Sie zu Einstellungen > Allgemeine Einstellungen > Erweiterte Einstellungen.
2. Scrollen Sie nach unten zum Abschnitt SHOP  und aktivieren Sie den Schalter Demo-Leiste anzeigen.
3. Klicken Sie auf Speichern.

Anpassung der Demo-Leiste

Sie können die Textdarstellung in der Demo-Leiste anpassen und USPs hinzufügen.

1. Navigieren Sie zu der Seite Home.
2. Navigieren Sie zu Inhalt> Übersetzungen.
3. Wählen Sie Übersetzung überschreiben aus, um den vorhandenen Demo-Leistentext anzupassen.
4. Klicken Sie auf Erstellen.
5. Geben Sie eine USP ein, und klicken Sie auf Speichern.
   • Sie können vor oder hinter Ihre USPs Symbole setzen, um Sie leichter unterscheiden zu können.

Der Text der Demo-Leiste kann standardmäßig aus zwei Nachrichten bestehen: Dieser Shop befindet sich im Aufbau und Eventuell können nicht alle Bestellungen eingehalten oder erfüllt werden.

1. Navigieren Sie zu Inhalt > Übersetzungen.
2. Klicken Sie auf Übersetzung überschreiben, um neue Übersetzungen zu erstellen
   • Pro Übersetzung gilt eine Begrenzung von 255 Zeichen.

Zum Beispiel:

• Dieser Shop befindet sich im Aufbau könnte beispielsweise geändert werden in:
  • Vor Mitternacht bestellt – morgen geliefert! • Gratis Versand und Rücksendung
• Eventuell können nicht alle Bestellungen eingehalten oder erfüllt werden könnte geändert werden in:
  • Immer günstig!

CSS anpassen

1. Navigieren Sie zu Home.
2. Navigieren Sie zu Design > Erweiterte Einstellungen > CSS anpassen.
3. Fügen Sie folgenden Code ein.
4. Klicken Sie auf Speichern.

   /* Dies sind Kommentare, die in Ihrem CSS-Code verbleiben können. Diese sollen jeden Teil erklären. */
   
   /* Dieser Teil des CSS-Codes stellt sicher, dass der Link zum Backoffice und die Schließen-Schaltfläche verborgen werden. */
   .wsa-demobar a, .wsa-demobar a.close {
   
   display: none !important;
   
   }
   
    /* Dieser Teil des CSS-Codes stellt sicher, dass die USP-Leiste nicht mehr sichtbar ist, wenn wie in der originalen Demoleiste gescrollt wird. */
   .wsa-demobar{
   
   position: absolute !important;
   
   
   /* Dieser Teil des CSS-Codes steuert Hintergrund und Schriftfarbe der USP-Leiste. Suchen Sie online nach einer beliebigen Farbe in „hex“ und ersetzen Sie die untenstehende Nummer. #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 bleibt. Wenn ein Bildschirm weniger als 767 Pixel breit ist, passen die USPs nicht darauf. */
   
   @media screen and (max-width: 767px){
   
   .wsa-demobar{
   
   display: none !important;
   
   }
   
   body {
   
   margin-top: 0px!important;
   
   }
   
   }

   Grundlegendes zum CSS-Code

   .wsa-demobar a, .wsa-demobar a.close { display: none !important; }
   Dadurch werden sämtliche Links aus der Demo-Leiste entfernt, insbesondere der „Back-to-Back-Office“-Bereich.

   .wsa-demobar{ position: absolute !important; }
   Dadurch wird die Demo-Leiste auf der Webseite anders positioniert, beispielsweise in der Mitte.

   Um die Farbe zu ändern, fügen Sie background-color:red !important; hinzu, um sie rot zu machen. Sie können beliebige CSS-Eigenschaften verwenden, um das Erscheinungsbild der Demo-Leiste zu optimieren.

   @media screen and (max-width: 767px){ .wsa-demobar{ display: none !important; } body { margin-top: 0px!important; } }
   Dadurch wird die Demo-Leiste auf Bildschirmen mit weniger als 767 Pixeln ausgeblendet, um die Navigation auf der mobilen Website übersichtlich und einfach zu halten.