Zum Inhalt springen
GloboGlobo Docs
App installieren
Deutsch

Benutzerdefiniertes CSS

Fügen Sie eigenes CSS hinzu, um das Aussehen des Menüs fein abzustimmen.

Anleitung Alle Tarife 2 Min. Lesezeit

Verwenden Sie Stylesheet / CSS, wenn Einstellungen, Schriftarten und Farben nicht ausreichen – für einen besonderen Hover-Effekt, die Schriftgröße eines einzelnen Menüpunkts oder eine kleine Theme-Korrektur. Das CSS wird mit dem Menü gespeichert und beim Veröffentlichen zu Ihrem Shop hinzugefügt.

Benutzerdefiniertes CSS hinzufügen

  1. Tab Erweitert öffnen

    Klicken Sie im Menü-Editor in der linken Seitenleiste auf das Symbol Erweitert (</>) (1).

    Öffnen Sie den Tab Erweitert (1) und geben Sie Ihr CSS unter Stylesheet / CSS ein (2).

  2. CSS hinzufügen

    Geben Sie Ihr CSS unter Stylesheet / CSS (2) ein oder fügen Sie es ein und ersetzen Sie dabei den Platzhalter //enter css custom here.

  3. Speichern und veröffentlichen

    Klicken Sie auf Speichern und dann auf Veröffentlichen. Aktualisieren Sie Ihren Shop per Hard-Refresh, um das Ergebnis zu sehen.

Die richtigen Elemente ansprechen

Das CSS wird unverändert zur Seite hinzugefügt und ist nicht auf dieses Menü beschränkt, daher sollten Sie Ihre Selektoren eingrenzen:

  • Alle Menüs – beginnen Sie mit .gm-menu.
  • Ein Menü – beginnen Sie mit .gm-menu-<ID>. Um die ID zu finden, klicken Sie in Ihrem Shop mit der rechten Maustaste auf das Menü und wählen Sie Untersuchen.
  • Ein Menüpunkt – geben Sie ihm im Bereich Erweitert der Einstellungen des Menüpunkts einen Zusätzlichen Klassennamen (siehe Einen Menüpunkt bearbeiten) und verwenden Sie dann diese Klasse.

Um zum Beispiel einen Menüpunkt mit dem zusätzlichen Klassennamen sale-item fett und rot darzustellen:

.gm-menu .sale-item > .gm-target {
  color: #d72c0d !important;
  font-weight: 700 !important;
}

Der Tab Erweitert enthält außerdem Marktverfügbarkeit, mit der Sie das Menü auf ausgewählte Märkte beschränken – siehe Menüs nach Markt anzeigen.

Fehlerbehebung

Mein CSS hat keine Wirkung
  • Prüfen Sie, ob Sie nach dem Speichern auf Veröffentlichen geklickt haben.
  • Die eigenen Styles der App verwenden oft !important, daher braucht Ihre Regel es eventuell auch.
  • Achten Sie auf Tippfehler wie eine fehlende } – ein einziger Fehler kann dazu führen, dass die nachfolgenden Regeln nicht funktionieren.

War diese Seite hilfreich?

Problem melden