Die App verwenden

Darstellung

Die Seite Darstellung gestaltet alle Tabellen in deinem Shop auf einmal, damit sie zu deiner Marke passen. Eine Live-Vorschau auf der Seite zeigt jede Änderung sofort.

Klicke oben in der Leiste auf Speichern, um deine Änderungen zu übernehmen. Jede aktive Tabelle in deinem Shop wird sofort aktualisiert — du musst Tabellen nicht einzeln neu speichern. Soll eine Tabelle anders aussehen? Siehe einer Tabelle einen eigenen Look geben.

Tabellenfenster

Einstellung	Funktion
Breite	Schmal (ideal für drei oder vier Spalten), Mittel (Standard), Breit (Platz für breite Tabellen ohne seitliches Scrollen) oder Extra breit (ideal mit Produktfotos neben der Tabelle).
Eckenradius	0–24 px. Standard 8 px.
Innenabstand	0–48 px. Standard 24 px. Abstand zwischen dem Rand der Tabelle und ihrem Inhalt.

Die Leiste oben im Pop-up oder in der Seitenleiste.

Einstellung	Funktion
Produktnamen anzeigen	Zeigt oben im Pop-up den Namen des Produkts, von dem aus es geöffnet wurde. Ist er ausgeblendet, lesen Screenreader ihn trotzdem vor.
Hintergrund des Kopfbereichs	Leer lassen, um den Tabellenhintergrund zu verwenden.
Titelfarbe	Leer lassen, um die Textfarbe zu verwenden.
Titelausrichtung	Links oder Mitte.
Schließen-Button	Einfaches ✕ oder ✕ in einem gefüllten Kreis.
Symbolfarbe	Das ✕ selbst. Leer lassen, um die Titelfarbe zu verwenden.
Kreisfarbe	Für den Stil mit gefülltem Kreis.

Produktfotos

Einstellung	Funktion
Produktfotos neben der Tabelle anzeigen	Zeigt die Fotos des Produkts neben der Tabelle, mit Pfeilen zum Durchblättern. Auf größeren Bildschirmen nur im Pop-up — Seitenleisten sind zu schmal. Am besten mit dem Fenster Extra breit kombinieren.
Auch auf Smartphones anzeigen	Auf Smartphones stehen die Fotos über der Tabelle, im Pop-up wie in Seitenleisten. Ausgeschaltet zeigen Smartphones nur die Tabelle.

Hintergrund

Einstellung	Funktion
Hintergrundfarbe	Die Fläche der Tabelle. Standard: Weiß.
Textfarbe	Fließtext — ändere sie zusammen mit einem dunklen Hintergrund, damit die Tabelle lesbar bleibt.
Hintergrundbild	Ein Bild hinter der gesamten Tabelle.
Bildanpassung	Tabelle ausfüllen, Ganzes Bild einpassen oder Wiederholen (kacheln).
Bildposition	Mitte, Oben oder Unten.
Überlagerung	0–90 %. Blendet das Bild mit der Hintergrundfarbe ab, damit Text lesbar bleibt. Bei 0 % wird das Bild unverändert angezeigt.

Hinweis: Eingebettete Tabellen liegen auf dem Seitenhintergrund deines Themes, es sei denn, du legst ein Hintergrundbild oder eine andere Hintergrundfarbe als Weiß fest.

Tabelle

Einstellung	Funktion
Hintergrund der Spaltenköpfe	Standard: Hellgrau.
Text der Spaltenköpfe	Standard: fast Schwarz.
Rasterlinien	Die Farbe der Linien zwischen Zeilen und Zellen.
Abwechselnde Zeilenschattierung	Färbt jede zweite Zeile ein, damit breite Tabellen leichter zu lesen sind.

Einzelne Tabellen können diese Farben im Editor unter Stiloptionen überschreiben.

Text

Einstellung	Funktion
Überschriftenfarbe	Überschriften in der Tabelle sowie Akzente wie die aktive Einheit im Einheitenschalter und Fokusrahmen bei Tastaturbedienung.
Grundgröße	11–20 px. Standard 14 px. Überschriften und Text skalieren davon ausgehend.

Verhalten

Einstellung	Funktion
Beim Klicken außerhalb schließen	Standardmäßig an. Ausschalten, damit sich die Tabelle nur über den Schließen-Button schließt. Esc funktioniert immer.

Eigenes CSS

Für alles, was die obigen Optionen nicht abdecken. Das CSS wird überall eingefügt, wo eine Tabelle erscheint. Beginne deine Selektoren mit .plug-sc, damit sie nur die Größentabelle betreffen und nicht den Rest deines Themes.

Nützliche Klassennamen:

Einstellung	Funktion
.plug-sc__trigger	Der Link oder Button Größentabelle.
.plug-sc__dialog	Das Pop-up- oder Seitenleistenfenster.
.plug-sc__heading	Der Titel oben im Pop-up.
.plug-sc__table	Jede Maßtabelle.
.plug-sc__units	Der Einheitenschalter über einer Tabelle.
.plug-sc__float	Der schwebende Button.
.plug-sc__inline	Eine auf der Seite eingebettete Tabelle.

/* Kleinere Tabellenschrift im Shop */
.plug-sc .plug-sc__table {
  font-size: 13px;
}

/* Schwebenden Button auf Smartphones ausblenden */
@media (max-width: 749px) {
  .plug-sc .plug-sc__float { display: none; }
}

Wichtig: Eigenes CSS wird nicht auf Fehler geprüft. Wenn nach einer Änderung etwas nicht mehr richtig aussieht, leere das Feld und speichere, um zu den Standard-Styles zurückzukehren.

Zurücksetzen

Standardwerte wiederherstellen setzt jede Option im Formular auf ihren Standardwert zurück. In deinem Shop ändert sich nichts, bis du auf Speichern klickst.