Skins
Ein Skin legt fest, wie die Filter im Shop aussehen: das Panel und seine Gruppen, die Werte, Anzahlen, Kacheln und Farbfelder, die gewählten Filter, die Buttons, der Schieberegler, die Leiste und ihre Popover, die Schublade und das Blatt auf dem Smartphone, die Filterformulare und die Ladeanzeigen. Die Filtersets entscheiden, was der Shop anbietet; der Skin entscheidet, wie es aussieht.
Skins werden unter Filter → Skins verwaltet, in drei Ansichten: Skins, Skin-Editor und Verkaufskanäle.
Integrierte und eigene Skins
Abschnitt betitelt „Integrierte und eigene Skins“Das Plugin bringt integrierte Skins mit. Sie sind schreibgeschützt: Um einen zu ändern, duplizieren Sie ihn.
Ein eigener Skin steht über einem anderen Skin, seinem Eltern-Skin, und speichert nur, was Sie ändern. Alles andere erbt er vom Eltern-Skin; ein eigener Skin kann über einem anderen eigenen Skin stehen. Die Schrift kommt immer aus dem Theme des Verkaufskanals.
Die Ansicht Skins
Abschnitt betitelt „Die Ansicht Skins“Filter → Skins → Skins zeigt eine Karte je Skin, neun pro Seite: ein Muster seines Aussehens, seinen Namen, was er ist („Eigener Skin, erbt von ’…’ — 3 Änderungen“) und die Kanäle, die ihn zeigen. Ein grüner Punkt markiert einen Skin, den ein Kanal zeigt; ein Schloss markiert einen integrierten. Die integrierten Skins kommen zuerst, jeder gefolgt von den eigenen Skins über ihm.
Ein Klick auf eine Karte öffnet sie im Skin-Editor. Das Menü der Karte:
| Aktion | Wirkung |
|---|---|
| Bearbeiten / Vorschau | Öffnet den Skin im Editor: einen eigenen Skin zum Bearbeiten, einen integrierten zum Ansehen. |
| Als eigenen duplizieren | Erstellt einen eigenen Skin über diesem, „… (Kopie)“ genannt. Er ändert noch nichts, und kein Kanal zeigt ihn. |
| Umbenennen… | Ändert den Namen. Der technische Name bleibt, wie er ist. Nicht für integrierte Skins. |
| JSON exportieren | Lädt die veröffentlichte Version des Skins als Datei herunter (vor der ersten Veröffentlichung seinen Entwurf). |
| Löschen | Löscht den Skin und seine veröffentlichten Versionen. Nicht möglich für einen integrierten Skin, einen Skin, den ein Verkaufskanal zeigt, oder einen Skin, von dem andere Skins erben. |
JSON importieren über den Karten öffnet Skins → Import und Export; siehe Import und Export.
Welchen Skin ein Kanal zeigt
Abschnitt betitelt „Welchen Skin ein Kanal zeigt“Filter → Skins → Verkaufskanäle listet die Storefront-Verkaufskanäle mit diesen Spalten:
| Spalte | Zeigt |
|---|---|
| Kanal | Den Kanal und seine Adresse. |
| Theme des Kanals | Das Theme, das der Kanal nutzt. |
| Skin | Den Skin, den der Kanal zeigt. Eine Wahl hier wird sofort gespeichert, und der Shop zeigt sie sofort. |
| Kanal-Anpassungen | Die eigene Schicht des Kanals über dem Skin: keine oder wie viele Werte sie setzt, und die Änderungen, die ihr Entwurf enthält. Schicht bearbeiten öffnet sie im Editor. |
| Status | Wie weit der Skin veröffentlicht ist: Veröffentlicht, Entwurf oder Entwurf · 2 Änderungen, mit der Version, die der Shop zeigt. |
Jeder Verkaufskanal zeigt einen Skin. Ein Kanal ohne Wahl zeigt den integrierten Standard-Skin. Die Liste lässt sich nach Name und nach Skin eingrenzen. Den Skin eines Kanals zu ändern braucht die Bearbeiter-Rolle der Filter.
Kanal-Anpassungen
Abschnitt betitelt „Kanal-Anpassungen“Kanal-Anpassungen sind eine dünne Schicht über dem Skin des Kanals, nur für diesen einen Kanal, zum Beispiel eine andere Akzentfarbe. Die Schicht speichert nur, was abweicht. Schicht bearbeiten legt sie bei der ersten Nutzung an und öffnet sie im Skin-Editor, wo sie nur in ihrem eigenen Kanal zu sehen ist.
Ein Wert, den die Schicht setzt, gewinnt in diesem Kanal über den Skin. Wenn Sie den Skin selbst bearbeiten, trägt ein solcher Wert den Hinweis, dass die Kanal-Anpassungen ihn über dem Skin setzen: Eine Änderung dort zeigt sich auf den Seiten dieses Kanals nicht.
Entwurf und Veröffentlichung
Abschnitt betitelt „Entwurf und Veröffentlichung“Ein eigener Skin und die Schicht eines Kanals haben einen Entwurf und veröffentlichte Versionen. Entwurf speichern behält die Änderungen, ohne den Shop zu berühren. Veröffentlichen macht den Entwurf als neue Version zum Aussehen des Shops. Ein Skin, der nie veröffentlicht wurde, fügt noch nichts hinzu: Der Shop zeigt den nächsten veröffentlichten Skin, auf dem er steht.
Werte, die der Shop nicht verwenden kann (eine Farbe, die keine ist, eine Größe außerhalb ihres Bereichs), werden beim Speichern des Skins weggelassen, und eine Meldung sagt, wie viele.
Verlauf (die Uhr-Schaltfläche) öffnet den Veröffentlichungsverlauf neben der Vorschau. Eine Version lässt sich in den Entwurf wiederherstellen; der Shop ändert sich erst nach Veröffentlichen. Entwurf verwerfen entfernt die Änderungen seit der letzten veröffentlichten Version, sodass der Editor zeigt, was der Shop zeigt. Die veröffentlichten Versionen aller Skins sind auch unter System → Versionen aufgeführt.
Der Skin-Editor
Abschnitt betitelt „Der Skin-Editor“Filter → Skins → Skin-Editor hat die Einstellungen des Skins in einer Spalte und daneben eine Live-Vorschau einer Shopseite.
- Der Skin wird oben in der Spalte gewählt. Die Statusleiste sagt, wovon er erbt.
- Ein integrierter Skin öffnet sich schreibgeschützt, mit Zum Anpassen duplizieren.
- Skin-Einstellung suchen findet die Einstellungen nach Namen, und auch die Elementstile.
- Jede Zeile zeigt, woher ihr Wert kommt: Geerbt · von … oder Hier festgelegt. Die Ketten-Schaltfläche daneben überschreibt den geerbten Wert hier oder lässt die Zeile wieder erben.
Die Vorschau
Abschnitt betitelt „Die Vorschau“Die Vorschau ist eine echte Seite des Shops mit dem Skin so, wie er im Entwurf steht, noch bevor er gespeichert ist.
- Zustand der Vorschau: Wie er ist, Mit Auswahl (Werte in einigen Gruppen gewählt), Lädt oder Leer (die Seite ohne Produkte).
- Der Geräteumschalter zeigt die Seite wie auf einem Desktop, einem Tablet oder einem Smartphone.
- Seite der Vorschau wählt Verkaufskanal und Kategorie; ohne Kategorie zeigt die Vorschau Ganzer Katalog. Die Schicht eines Kanals ist nur in ihrem eigenen Kanal zu sehen.
Einstellungen
Abschnitt betitelt „Einstellungen“Der Reiter Einstellungen enthält die Werte des Skins in diesen Gruppen.
Farben
| Einstellung | Wirkung |
|---|---|
| Akzent | Gewählte Kästchen, die Füllung des Schiebereglers, die Anzahl auf ‘Filter’. |
| Akzenttext | Links und Text in der Akzentfarbe, etwa ‘Zurücksetzen’. |
| Auf dem Akzent | Das Häkchen und die Ladeanzeige auf Akzentgrund. |
| Text | Der Text des Panels. |
| Gedämpfter Text | Sekundärer Text. |
| Linien und Rahmen | Linien zwischen Gruppen und Rahmen. |
| Panelgrund | Der Hintergrund des Panels. |
| Gruppengrund | Der Hintergrund einer Gruppe; keiner lässt den Grund des Panels durchscheinen. |
| Fokusring | Der Ring um ein fokussiertes Steuerelement. |
| Rahmen nicht verfügbarer Felder | Der Rahmen eines Kästchens, das sich nicht wählen lässt. |
| Fehlergrund, Fehlertext | Fehlermeldungen. |
Typografie
| Einstellung | Wirkung |
|---|---|
| Schrift | Fest: aus dem Theme des Verkaufskanals. |
| Gruppenüberschrift | Größe der Überschrift einer Gruppe, 12–20 px. |
| Wert | Größe des Texts eines Werts, 12–18 px. |
Größen
| Einstellung | Wirkung |
|---|---|
| Wertzeile | Höhe der Zeile eines Werts, 24–48 px. |
| Wertzeile bei Touch | Das Fingerziel auf Smartphones und Tablets, 40–56 px. |
| Checkbox | Größe einer Checkbox, 14–24 px. |
| Feldrahmen | Breite des Rahmens eines Kästchens, 1–3 px. |
| Gruppeninnenabstand | Der Raum innerhalb einer Gruppe, je Seite, 0–32 px. |
| Abstand zwischen Gruppen | 0–24 px. |
| Seitenleiste aus der Leiste | Breite der aus der Leiste geöffneten Schublade, 320–560 px. |
| Raum für Ringe | Fest: der Raum, den jeder Rahmen für Fokusringe freihält. |
Radien
| Einstellung | Wirkung |
|---|---|
| Gruppen und Karten | Eckenradius von Gruppen und Karten, 0–16 px. |
| Felder, Kacheln, Button | Eckenradius von Kästchen, Kacheln und dem Button, 0–12 px. |
Panel
| Einstellung | Wirkung |
|---|---|
| Gruppenaussehen | Linien, Karten oder Ohne Rahmen, in der Spalte und einer Schublade; die Pillen der Leiste behalten einen eigenen Rahmen. |
| Kompakt | Kleinere Zeilen und kleinerer Text für viele Gruppen, in der Spalte und einer Schublade. |
| Zwei Spalten Felder | Listen, Optionsfelder und Sterne in zwei Spalten. Die eigenen Spalten eines Filters gehen vor. |
Zähler
| Einstellung | Wirkung |
|---|---|
| Zählerstil | Badge, Hell, Text, (12) oder Ausgeblendet. Ausgeblendet blendet jede Anzahl aus. |
| Zählergrund, Zählertext | Die Farben der Anzahl. |
| Zählergrund, nicht verfügbar | Auch der Grund einer Kachel und eines Kästchens ohne Produkte. |
| Zählertext, nicht verfügbar | Auch der Text eines Werts, einer Kachel und einer Pille ohne Produkte. |
Werte
| Einstellung | Wirkung |
|---|---|
| Listenwerte als | Checkboxen oder Pills. |
| Bewertungssterne | Die Farbe der Sterne. |
| Schalter, aus | Die Farbe eines ausgeschalteten Schalters. |
Farbfelder und Kacheln
| Einstellung | Wirkung |
|---|---|
| Farbfeldform | Kreis, Abgerundet, Leicht abgerundet oder Eckig. |
| Farbfeldgröße | 20–40 px. |
| Zahlen bei Farben | Nur im Tooltip oder Immer. |
| Gewählte Kachel | Dunkel oder Akzentrahmen (fügt ein Häkchen hinzu). |
| Grund gewählter Kachel, Text gewählter Kachel, Rahmen gewählter Kachel | Die Farben einer gewählten Kachel. |
| Zahlen auf Kacheln | Im Tooltip oder Badge in der Ecke. |
| Kachel ohne Produkte | Gedämpfte 0 oder Ohne Badge. |
| Badge-Überstand | Wie weit das Eck-Badge über die Kachel hinausreicht, 0–10 px. |
Chips: Chip-Grund und Chip-Text, die gewählten Filter.
Buttons: Grund von ‘N anzeigen’ und Text von ‘N anzeigen’.
Schieberegler: Rahmen des Reglergriffs.
Ladeanzeigen und Bewegung
| Einstellung | Wirkung |
|---|---|
| Sanduhr, solange eine Änderung wartet | Ja oder Nein. |
| Ladeanzeige | Kreisel, Puls oder Balken. |
| Ladeanzeige am geklickten Wert | Nein: Nur der Kopf der Gruppe zeigt, dass die Anzahlen kommen. |
| Produkte während des Ladens | Skelett, Abdunkeln oder Nichts. |
| Bewegung | Normal, Reduziert oder Keine. Ein System des Kunden, das reduzierte Bewegung verlangt, gewinnt immer. |
Eine Einstellung, die der Shop unter den übrigen nie zeichnet, ist mit einem Hinweis gesperrt, zum Beispiel die Farben der Anzahl beim Zählerstil Ausgeblendet.
Elementstile
Abschnitt betitelt „Elementstile“Der Reiter Elemente gestaltet einzelne Teile der Filter, Zustand für Zustand. Wählen Sie ein Element in der Liste oder klicken Sie es in der Vorschau an; die Vorschau markiert jede Stelle, an der es erscheint.
Zu den Elementen gehören das Panel und sein Titel, eine Gruppe und ihre Überschrift, die Wertzeile, Checkbox und Optionsfeld, Anzahl, Kachel, Pille, Farbfeld, Bewertungssterne, Kategorielink, Feld, Spur, Bereich und Griff des Schiebereglers, der Schalter, die Abschnitte und Reiter der zusammengesetzten Gruppe, Name und Linie einer Kompatibilitätsebene, die Pillen, Werkzeug-Buttons und das Popover der Leiste, das Blatt mit Kopf, Fuß und Hintergrund, die gewählten Filter, der Anwenden- und der sekundäre Button, das leere Ergebnis, die Teile des Filterformulars, die Fehlermeldung, der Listenkopf und die Ladeanzeige.
Jedes Element hat die Zustände, die für es gelten: Normal, Hover, Ausgewählt, Geöffnet, Fokussiert, Nicht verfügbar, Lädt. Ein Zustand speichert nur, was von Normal abweicht. Ein Wert wird für das in der Vorschau gezeigte Gerät gesetzt; die Eigenschaften kommen in vier Gruppen:
| Gruppe | Eigenschaften |
|---|---|
| Typografie | Größe, Stärke |
| Farben | Text, Hintergrund, Symbol |
| Abstände und Größe | Innenabstand, Mindesthöhe, Breite, Maximale Höhe |
| Rahmen und Schatten | Rahmenfarbe, Eckenradius, Schatten |
Die Kontrastprüfung
Abschnitt betitelt „Die Kontrastprüfung“Unter den Einstellungen prüft der Editor den Kontrast jedes Farbpaars, das der Shop zusammen zeigt, gegen WCAG 2.2 AA:
- Text auf seinem Grund braucht 4.5:1 (Akzenttext, Text, Gedämpfter Text, Fehlertext, Zählertext, Text gewählter Kachel, Chip-Text, Text von ‘N anzeigen’);
- der Akzent, der Fokusring, die Sterne, ein ausgeschalteter Schalter, der Rahmen des Reglergriffs, das Häkchen auf dem Akzent und eine nicht verfügbare Anzahl brauchen 3:1;
- die eigenen Paare aus Text und Grund der Elementstile brauchen 4.5:1, in dem Zustand und auf dem Gerät, wo sie gesetzt sind.
Ein Paar unter seinem Minimum wird unter Vor dem Veröffentlichen prüfen aufgeführt, zum Beispiel „Text: Kontrast 3.2, nötig 4.5.“. Zeigen öffnet die Einstellung, Öffnen das Element. Eine Farbe, die der Shop unter den übrigen Einstellungen nicht zeichnet, wird nicht geprüft. Bestehen alle Paare, sagt der Editor: „Der Kontrast aller Paare erfüllt WCAG 2.2 AA.“ Die Prüfung warnt; sie hält Veröffentlichen nicht auf.