← Alle Beiträge

Anleitungen

Das Shopify-Backend mit JustZix umgestalten — CSS und JS

18 Mai 2026 · von JustZix Team

Das Shopify-Backend (admin.shopify.com) ist auf dem Polaris-Designsystem aufgebaut und sieht ordentlich aus — aber wenn Sie Hunderte von Produkten und Bestellungen verwalten, ist der Standardabstand zu locker, App-Promo-Banner fressen Platz, und niedriger Bestand verschwindet in der Tabelle. Das können Sie in den Shop-Einstellungen nicht ändern. Sie können jedoch Ihr eigenes CSS und JS mit einer JustZix-Regel überlagern, die an das Backend angeheftet ist. Hier sind einige fertige Anpassungen.

Die Produkt- und Bestelltabellen verdichten

Shopify-Listen nutzen die Komponente Polaris-IndexTable. Standardmäßig sind die Zeilen hoch, also passen wenige auf den Bildschirm. Das Verdichten ist die erste und auffälligste Änderung:

/* Dichtere Zeilen in Produkt- und Bestelltabellen */
.Polaris-IndexTable__TableRow .Polaris-IndexTable__TableCell,
.Polaris-DataTable__Cell {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}
.Polaris-IndexTable__TableRow {
  height: auto !important;
}
.Polaris-Thumbnail {
  width: 28px !important;
  height: 28px !important;
}

Ein kleineres Produkt-Thumbnail und engere Zellen lassen Sie doppelt so viele Zeilen auf einem Bildschirm sehen — weniger Scrollen beim Durchstöbern des Katalogs.

Niedrigen Bestand hervorheben

Die Bestandsspalte ist reiner Text — es ist leicht zu übersehen, dass von einem Produkt nur noch wenige Einheiten übrig sind. Mit JS können Sie diese Zeilen mit einer Farbe markieren, damit sie hervorstechen:

// Zeilen mit niedrigem Bestand hervorheben (JS, document_idle)
function flagLowStock() {
  document.querySelectorAll('.Polaris-IndexTable__TableRow')
    .forEach(row => {
      const txt = row.textContent || '';
      const m = txt.match(/(\d+)\s*in stock/i);
      if (m && Number(m[1]) <= 5) {
        row.style.background = '#fff4e5';
      }
    });
}
flagLowStock();
new MutationObserver(flagLowStock)
  .observe(document.body, { childList: true, subtree: true });

Der MutationObserver ist hier entscheidend — Shopify lädt Zeilen beim Blättern dynamisch nach, sodass nach dem ersten Durchlauf allein die neuen Seiten ohne Farbe blieben.

Unbezahlte Bestellungen markieren

In der Bestellliste erscheint der Zahlungsstatus als Polaris-Badge. Unbezahlte Bestellungen sollte man stärker markieren als der Standard:

/* Stärkerer Akzent für den Status Unbezahlt */
.Polaris-IndexTable__TableRow
  .Polaris-Badge--statusWarning,
.Polaris-IndexTable__TableRow
  .Polaris-Badge--statusAttention {
  outline: 2px solid #d4380d !important;
  font-weight: 700 !important;
}

Upsell-Banner und App-Karten ausblenden

Shopify bewirbt seine Apps und Add-ons stark — Banner auf dem Dashboard, Empfehlungskarten, „Jetzt ausprobieren“-Abschnitte. Sie nehmen über der eigentlichen Arbeit Platz weg. Sie können sie ausblenden:

/* Promo-Banner und App-Empfehlungskarten ausblenden */
.Polaris-Banner--withinPage,
[data-marketing-card],
section[aria-label*="recommend" i],
.Polaris-CalloutCard {
  display: none !important;
}

Die Selektoren sind bewusst breit, weil Shopify seine Marketing-Klassennamen ändert. Werfen Sie nach dem Aktivieren der Regel einen Blick über die Seite, um zu bestätigen, dass nichts Nützliches verschwunden ist, und engen Sie das Muster bei Bedarf ein.

Breiterer Inhalt und klebende Tabellenköpfe

Das Shopify-Backend begrenzt die Inhaltsbreite, was auf einem großen Monitor leere Ränder hinterlässt. Verbreitern Sie den Arbeitsbereich und heften Sie den Tabellenkopf an, damit die Spalten beim Scrollen einer langen Liste sichtbar bleiben:

/* Breiterer Inhaltsbereich */
.Polaris-Page {
  max-width: 1400px !important;
}

/* Klebender Tabellenkopf beim Scrollen */
.Polaris-IndexTable__TableHeading,
.Polaris-DataTable__Cell--header {
  position: sticky !important;
  top: 56px !important;
  background: #fff !important;
  z-index: 5 !important;
}

Fokusmodus

Wenn Sie an einer einzigen Aufgabe arbeiten — zum Beispiel Produkte massenhaft bearbeiten — lenken die Seitennavigation und die obere Leiste nur ab. Eine separate Regel blendet sie für die Dauer aus:

/* Fokusmodus: blendet Navigation und obere Leiste aus */
.Polaris-Navigation,
.Polaris-TopBar {
  display: none !important;
}
.Polaris-Frame__Main {
  padding-left: 0 !important;
}

Bauen Sie Ihr eigenes Set

Behalten Sie die Anpassungen als separate, benannte Regeln — „Shopify: dichte Tabellen“, „Shopify: niedriger Bestand“, „Shopify: Fokus“ — jede an admin.shopify.com angeheftet. Dann passen Sie das Backend in wenigen Sekunden an die Aufgabe an.

Fertige Regeln für das Shopify-Backend sind im Katalog — sehen Sie sich die Beispiele für admin.shopify.com an und kopieren Sie, was passt. Installieren Sie JustZix und entrümpeln Sie Ihr Shop-Backend noch heute.