← Tutti gli articoli

Tutorial

Rimodella il pannello di Shopify con JustZix — CSS e JS

18 maggio 2026 · di JustZix Team

Il pannello di Shopify (admin.shopify.com) è costruito sul sistema di design Polaris e ha un aspetto ordinato — ma quando gestisci centinaia di prodotti e ordini, la spaziatura predefinita è troppo ampia, i banner che promuovono le app divorano spazio e le scorte basse spariscono nella tabella. Non puoi cambiarlo nelle impostazioni del negozio. Puoi però sovrapporre il tuo CSS e JS con una regola di JustZix appuntata al pannello. Ecco alcuni ritocchi pronti.

Rendi più dense le tabelle di prodotti e ordini

Gli elenchi di Shopify usano il componente Polaris-IndexTable. Per impostazione predefinita le righe sono alte, quindi ne entrano poche sullo schermo. Renderle più dense è il primo cambiamento e il più evidente:

/* Righe più dense nelle tabelle di prodotti e ordini */
.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;
}

Una miniatura di prodotto più piccola e celle più strette ti fanno vedere il doppio delle righe su uno schermo — meno scorrimento mentre sfogli il catalogo.

Evidenzia le scorte basse

La colonna dell'inventario è testo semplice — è facile non notare che restano solo poche unità di un prodotto. Con il JS puoi marcare quelle righe con un colore così risaltano:

// Evidenzia le righe con scorte basse (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 });

Il MutationObserver è fondamentale qui — Shopify carica le righe dinamicamente con la paginazione, quindi dopo la sola prima esecuzione le nuove pagine resterebbero senza colore.

Segnala gli ordini non pagati

Nell'elenco degli ordini lo stato del pagamento appare come badge Polaris. Vale la pena segnalare gli ordini non pagati in modo più marcato del valore predefinito:

/* Accento più marcato per lo stato Non pagato */
.Polaris-IndexTable__TableRow
  .Polaris-Badge--statusWarning,
.Polaris-IndexTable__TableRow
  .Polaris-Badge--statusAttention {
  outline: 2px solid #d4380d !important;
  font-weight: 700 !important;
}

Nascondi i banner promozionali e le schede app

Shopify promuove molto le proprie app e i componenti aggiuntivi — banner sulla bacheca, schede di raccomandazione, sezioni "prova". Occupano spazio sopra il lavoro vero. Puoi nasconderli:

/* Nascondi i banner promozionali e le schede di raccomandazione app */
.Polaris-Banner--withinPage,
[data-marketing-card],
section[aria-label*="recommend" i],
.Polaris-CalloutCard {
  display: none !important;
}

I selettori sono volutamente ampi perché Shopify cambia i nomi delle classi di marketing. Dopo aver attivato la regola, dai un'occhiata alla pagina per confermare che non sia sparito nulla di utile, e restringi il pattern se serve.

Contenuto più largo e intestazioni di tabella fisse

Il pannello di Shopify limita la larghezza del contenuto, il che lascia margini vuoti su un monitor grande. Allarga l'area di lavoro e fissa l'intestazione della tabella così le colonne restano visibili mentre scorri un elenco lungo:

/* Area di contenuto più larga */
.Polaris-Page {
  max-width: 1400px !important;
}

/* Intestazione di tabella fissa durante lo scorrimento */
.Polaris-IndexTable__TableHeading,
.Polaris-DataTable__Cell--header {
  position: sticky !important;
  top: 56px !important;
  background: #fff !important;
  z-index: 5 !important;
}

Modalità focus

Quando lavori a un singolo compito — per esempio la modifica in blocco dei prodotti — la navigazione laterale e la barra superiore distraggono soltanto. Una regola separata le nasconde per il tempo necessario:

/* Modalità focus: nasconde la navigazione e la barra superiore */
.Polaris-Navigation,
.Polaris-TopBar {
  display: none !important;
}
.Polaris-Frame__Main {
  padding-left: 0 !important;
}

Costruisci il tuo set

Tieni i ritocchi come regole separate e nominate — "Shopify: tabelle dense", "Shopify: scorte basse", "Shopify: focus" — ciascuna appuntata a admin.shopify.com. Così in pochi secondi adatti il pannello al compito.

Le regole pronte per il pannello di Shopify sono nel catalogo — vedi gli esempi per admin.shopify.com e copia ciò che ti serve. Installa JustZix e riordina il pannello del tuo negozio oggi stesso.