Hallo. Wie können wir helfen?

USPs in der Demoleiste anzeigen

Alleinstellungsmerkmale (Unique Selling Propositions = USPs) geben an, was Ihr Geschäft von den Wettbewerbern unterscheidet. Das Theme Conform Plus verfügt über keine Option zum Hinzufügen von USPs. Dieser Artikel erklärt, wie Sie CSS verwenden, um aus der Demoleiste eine USP-Leiste zu machen, ohne den Code von Conform Plus bearbeiten zu müssen. Eine ähnliche Methode zur Änderung der Demoleiste mithilfe von CSS wird verwendet, um eine ganzseitige Mitteilung zu erstellen, die über Webseiten-Wartungsarbeiten informiert.

Dieser Artikel wurde an Conform Plus getestet und funktioniert u. U. auch mit anderen Themes.

Das Standarddesign der Demoleiste:

zeigt die Demoleiste vor der Modifizierung.

Nach CSS und Übersetzungsänderungen:

zeigt die Demoleiste nach CSS-Modifizierungen.

Anweisungen

  1. Aktivieren Sie die Demoleiste in Ihrem eCom-Backoffice, indem Sie von der Spalte Allgemeine Einstellungen aus auf EinstellungenErweitert klicken. Scrollen Sie zum Bereich SHOP und aktivieren Sie Demoleiste anzeigen. Klicken Sie auf Speichern.
  2. Sie können vor oder hinter Ihre USPs Symbole setzen, um Sie leichter unterscheiden zu können. Die verfügbaren Symbole finden Sie hier.
    Übersetzen Sie den Text in der Demoleiste, indem Sie zurück zur Startseite gehen und auf Inhalte> Übersetzungen klicken. Klicken Sie auf Übersetzung modifizieren und suchen Sie den unten angegebenen Demoleistentext. Klicken Sie auf Erstellen, geben Sie dann eine USP ein und klicken Sie Speichern. Finden Sie die folgenden Strings und ersetzen Sie sie durch Ihre USPs:
    1. Dieser Shop befindet sich derzeit im Aufbau. Übersetzen Sie dies beispielsweise als: • Vor Mitternacht bestellt – morgen geliefert! • Gratis Versand und Rücksendung
    2. Erteilte Bestellungen werden nicht anerkannt oder abgewickelt. Übersetzen Sie dies beispielsweise als: • Immer günstig!
  3. Fügen Sie den CSS-Stylingcode hinzu, indem Sie zurück zur Startseite gehen und auf Design > Erweiterte Einstellungen CSS anpassen klicken. Platzieren Sie den folgenden Code und 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;
    }
    }

War dieser Beitrag hilfreich?

0 von 1 fanden dies hilfreich