← Wszystkie wpisy

Poradniki

Popraw panel Shopify (admin.shopify.com) z JustZix

18 maja 2026 · autor JustZix Team

Panel Shopify (admin.shopify.com) jest zbudowany na systemie Polaris i wygląda schludnie — ale gdy zarządzasz setkami produktów i zamówień, domyślne odstępy są zbyt luźne, banery promujące aplikacje zabierają miejsce, a niski stan magazynowy ginie w tabeli. Tego nie zmienisz w ustawieniach sklepu. Możesz za to nałożyć własny CSS i JS regułą JustZix przypiętą do panelu. Poniżej kilka gotowych poprawek.

Zagęść tabele produktów i zamówień

Listy w Shopify używają komponentu Polaris-IndexTable. Domyślnie wiersze są wysokie, więc na ekran mieści się ich niewiele. Zagęszczenie to pierwsza i najbardziej odczuwalna zmiana:

/* Gestsze wiersze tabel produktow i zamowien */
.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;
}

Mniejsza miniatura produktu i ciaśniejsze komórki sprawiają, że na jednym ekranie widzisz dwa razy więcej pozycji — mniej przewijania przy przeglądaniu katalogu.

Podświetl niski stan magazynowy

Kolumna stanu magazynowego to zwykły tekst — łatwo przeoczyć, że produktu zostało kilka sztuk. JS-em możesz oznaczyć takie wiersze kolorem, żeby rzucały się w oczy:

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

MutationObserver jest tu kluczowy — Shopify doczytuje wiersze dynamicznie przy paginacji, więc po samym pierwszym uruchomieniu nowe strony zostałyby bez koloru.

Wyróżnij nieopłacone zamówienia

Na liście zamówień status płatności pokazuje się jako "badge" Polaris. Nieopłacone zamówienia warto wyróżnić mocniej niż domyślnie:

/* Mocniejszy akcent dla statusu Nieoplacone / Unpaid */
.Polaris-IndexTable__TableRow
  .Polaris-Badge--statusWarning,
.Polaris-IndexTable__TableRow
  .Polaris-Badge--statusAttention {
  outline: 2px solid #d4380d !important;
  font-weight: 700 !important;
}

Ukryj banery upsell i karty aplikacji

Shopify mocno promuje swoje aplikacje i dodatki — banery na pulpicie, karty z rekomendacjami, sekcje "wypróbuj". Zajmują miejsce nad realną pracą. Można je schować:

/* Ukryj banery promocyjne i karty rekomendacji aplikacji */
.Polaris-Banner--withinPage,
[data-marketing-card],
section[aria-label*="recommend" i],
.Polaris-CalloutCard {
  display: none !important;
}

Selektory są celowo szerokie, bo Shopify zmienia nazwy klas marketingowych. Po włączeniu reguły rzuć okiem, czy nie zniknęło nic potrzebnego, i ewentualnie zawęź wzorzec.

Szersza treść i przyklejone nagłówki tabel

Panel Shopify ogranicza szerokość treści, co na dużym monitorze zostawia puste marginesy. Poszerz obszar roboczy i przyklej nagłówek tabeli, żeby kolumny były widoczne przy przewijaniu długiej listy:

/* Szerszy obszar tresci */
.Polaris-Page {
  max-width: 1400px !important;
}

/* Przyklejony naglowek tabeli przy przewijaniu */
.Polaris-IndexTable__TableHeading,
.Polaris-DataTable__Cell--header {
  position: sticky !important;
  top: 56px !important;
  background: #fff !important;
  z-index: 5 !important;
}

Tryb skupienia

Gdy pracujesz nad jednym zadaniem — np. masowo edytujesz produkty — boczna nawigacja i górny pasek tylko rozpraszają. Osobna reguła chowa je na czas:

/* Tryb skupienia: chowa nawigacje i gorny pasek */
.Polaris-Navigation,
.Polaris-TopBar {
  display: none !important;
}
.Polaris-Frame__Main {
  padding-left: 0 !important;
}

Złóż własny zestaw

Trzymaj poprawki jako osobne, nazwane reguły — "Shopify: gęste tabele", "Shopify: niski stan", "Shopify: skupienie" — każdą przypiętą do admin.shopify.com. Wtedy w kilka sekund dopasujesz panel do zadania.

Gotowe reguły dla panelu Shopify znajdziesz w katalogu — zobacz przykłady dla admin.shopify.com i skopiuj, co pasuje. Zainstaluj JustZix i uporządkuj swój panel sklepu już dziś.