Eigenes CSS

Einstellungen enthält ein Feld für eigenes CSS, das sich das Widget jeder Kampagne in Ihrem Shop teilt. Nutzen Sie es für die Feinheiten, die der Widget-Tab › Stil einer Kampagne nicht abdeckt — eine Schriftart anpassen, Abstände justieren, einen Rand umgestalten oder ein Element ausblenden — statt damit ein völlig anderes Widget zu bauen. Der Stil-Tab deckt Farben, Abstände, Eckenradius und Effekte bereits mit einfachen Feldern ab; greifen Sie nur dann zu eigenem CSS, wenn das nicht ausreicht, denn eine hier hinzugefügte Regel gilt überall, nicht nur für eine Kampagne.

Ihr CSS lädt nach den eigenen Stilen des Widgets, sodass es sie für die meisten Änderungen ohne !important überschreibt.

Limits

Regel	Wert
Maximale Länge	10.000 Zeichen
Verboten	Die Zeichenfolge </ an beliebiger Stelle im CSS

Nur reines CSS. Die </-Einschränkung besteht, weil Ihr CSS sowohl inline in einem <script>-Tag auf der Produktseite eingebettet als auch vom CDN ausgeliefert wird — genau diese Zeichenfolge könnte das umgebende Tag vorzeitig schließen, und echtes CSS braucht sie nie legitim. Es gibt keine weitere Sperrliste: Selektoren, @media-Abfragen, Animationen und benutzerdefinierte Eigenschaften sind alle erlaubt.

Änderungen gehen mit der nächsten Veröffentlichung live, die beginnt, sobald Sie auf Speichern klicken — es gibt keinen separaten Schritt „CSS veröffentlichen“.

Tipp

Nutzen Sie die Schaltfläche Beautify, um das Eingefügte vor dem Speichern neu zu formatieren — nützlich, wenn Sie aus einer minifizierten Quelle kopieren.

Beispiele

Die App veröffentlicht keine Klassenreferenz, nutzen Sie also den Inspector Ihres Browsers auf einer echten Produktseite, um die gewünschte Klasse zu finden. Diese Beispiele nutzen echte Klassen aus dem aktuellen Widget-Markup.

Die Schriftart des Widgets an Ihr Theme anpassen:

.sfw { font-family: inherit; }

Den Preis speziell im Layout „Option cards“ fett machen:

.w-cards .price { font-weight: 700; }

Die Zeile „You save“ ausblenden, falls Sie das Widget lieber minimal halten:

.you-save { display: none; }

Die Innenabstände nur auf schmalen Bildschirmen verringern, da @media-Abfragen normal funktionieren:

@media (max-width: 480px) {
  .sfw { padding: 8px; }
}

Achtung

Eigenes CSS wird nicht vom Support abgedeckt. Bricht eine Regel das Layout des Widgets — versteckt die „In den Warenkorb“-Schaltfläche, überlappt Text oder bricht bei Handy-Breite — liegt das am CSS, nicht an der App. Testen Sie auf einer echten Produktseite bei schmaler Breite, bevor Sie sich darauf verlassen, und entfernen Sie die Regel, falls Sie nicht sicher sind, was kaputtgegangen ist.

Querverweis: Widget-Layouts, Widget-Text und Übersetzungen.