Eigenes CSS

Verwenden Sie das Feld „Custom CSS“, wenn die Design-Einstellungen nicht weit genug gehen.

Jeder Countdown-Typ endet in seinen Design-Einstellungen mit einem Feld Custom CSS (Developer Zone). Alles, was Sie dort eintragen, wird in Ihrem Onlineshop auf diesen Countdown angewendet – zusätzlich zu allem, was die visuellen Einstellungen festlegen.

Das Feld „Custom CSS Developer Zone“ am Ende der Design-Einstellungen

Das Feld „Custom CSS“ am Ende der Design-Einstellungen.

Wann es wirklich nützlich ist

Feinpositionierung – Abstände eines Countdowns anpassen, damit er in einem Theme mit ungewöhnlichen Abständen richtig sitzt.
Responsive Anpassungen – eine Media Query für einen Breakpoint, den die Mobile-Einstellungen nicht abdecken.
Theme-Details übernehmen – einen bestimmten Eckenradius oder Schatten, den Ihr Theme überall verwendet und den die Einstellungen nicht exakt nachbilden können.
Element ausblenden – einen Teil des Countdowns entfernen, den Sie auf keinem anderen Weg ausschalten können.

CSS schreiben

Das Feld nimmt reines CSS entgegen – Selektoren und Regeln, ohne <style>-Tag:

.samita-countdown {
  margin-top: 24px;
}

@media (max-width: 749px) {
  .samita-countdown {
    margin-top: 12px;
  }
}

Der Container des Countdowns trägt die Klasse samita-countdown, und jeder dargestellte Countdown erhält eine ID, die aus seiner Countdown-ID gebildet wird. Um etwas Spezifischeres anzusprechen, prüfen Sie den dargestellten Countdown in den Entwicklertools Ihres Browsers und verwenden Sie die dort gefundenen Klassen.

Den Geltungsbereich eingrenzen

CSS in diesem Feld wird nicht automatisch auf den Countdown beschränkt. Ein Selektor wie img { ... } trifft jedes Bild auf der Seite.

Stellen Sie Ihren Regeln immer ein Präfix voran, damit sie nur den Countdown betreffen:

/* Good — scoped */
.samita-countdown img { border-radius: 4px; }

/* Risky — affects the whole page */
img { border-radius: 4px; }

Auf einer echten Seite testen

Die Vorschau im Builder bildet Ihr Theme nicht nach. CSS, das in der Vorschau etwas sauber ausrichtet, tut das auf Ihrer Produktseite möglicherweise nicht. Speichern Sie, öffnen Sie eine echte Seite und prüfen Sie – am Desktop und auf dem Smartphone.

Wenn Sie lieber kein CSS schreiben möchten

Der Support kann bei Theme-spezifischen Anpassungen helfen. Die App bietet neben dem Feld „Custom CSS“ die Schaltfläche Chat now! mit dem Hinweis „Chat with us to customize countdown in your theme.“ Sie können auch den Support kontaktieren und einen Link zur Seite sowie eine Beschreibung der gewünschten Änderung mitschicken.

Nächste Schritte

War diese Seite hilfreich?