← Tous les articles

Tutoriels

Remodelez l'administration Shopify avec JustZix — CSS et JS

18 mai 2026 · par JustZix Team

L'administration Shopify (admin.shopify.com) est bâtie sur le système de design Polaris et a l'air soignée — mais quand vous gérez des centaines de produits et de commandes, l'espacement par défaut est trop lâche, les bannières de promotion d'applications mangent de la place, et le stock faible disparaît dans le tableau. Vous ne pouvez pas changer cela dans les paramètres de la boutique. Vous pouvez en revanche superposer votre propre CSS et JS avec une règle JustZix épinglée à l'administration. Voici quelques ajustements prêts à l'emploi.

Densifier les tableaux de produits et de commandes

Les listes Shopify utilisent le composant Polaris-IndexTable. Par défaut les lignes sont hautes, donc peu tiennent à l'écran. Les densifier est le premier changement, et le plus perceptible :

/* Lignes plus denses dans les tableaux de produits et de commandes */
.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;
}

Une vignette de produit plus petite et des cellules plus serrées vous laissent voir deux fois plus de lignes sur un écran — moins de défilement en parcourant le catalogue.

Mettre en évidence le stock faible

La colonne d'inventaire n'est que du texte brut — il est facile de manquer qu'il ne reste que quelques unités d'un produit. Avec du JS vous pouvez signaler ces lignes d'une couleur pour qu'elles ressortent :

// Mettre en évidence les lignes à stock faible (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 });

Le MutationObserver est essentiel ici — Shopify charge les lignes dynamiquement à la pagination, donc après le seul premier passage les nouvelles pages resteraient non colorées.

Signaler les commandes impayées

Dans la liste des commandes le statut de paiement apparaît sous forme de badge Polaris. Les commandes impayées méritent d'être signalées plus fortement que par défaut :

/* Accent plus marqué pour le statut Impayé */
.Polaris-IndexTable__TableRow
  .Polaris-Badge--statusWarning,
.Polaris-IndexTable__TableRow
  .Polaris-Badge--statusAttention {
  outline: 2px solid #d4380d !important;
  font-weight: 700 !important;
}

Masquer les bannières promotionnelles et les cartes d'applications

Shopify promeut massivement ses applications et modules complémentaires — bannières sur le tableau de bord, cartes de recommandation, sections « essayez-le ». Elles prennent de la place au-dessus du vrai travail. Vous pouvez les masquer :

/* Masquer les bannières promo et les cartes de recommandation d'applications */
.Polaris-Banner--withinPage,
[data-marketing-card],
section[aria-label*="recommend" i],
.Polaris-CalloutCard {
  display: none !important;
}

Les sélecteurs sont délibérément larges parce que Shopify change ses noms de classes marketing. Après avoir activé la règle, parcourez la page pour confirmer que rien d'utile n'a disparu, et resserrez le motif si besoin.

Contenu plus large et en-têtes de tableau collants

L'administration Shopify plafonne la largeur du contenu, ce qui laisse des marges vides sur un grand écran. Élargissez la zone de travail et épinglez l'en-tête du tableau pour que les colonnes restent visibles pendant le défilement d'une longue liste :

/* Zone de contenu plus large */
.Polaris-Page {
  max-width: 1400px !important;
}

/* En-tête de tableau collant pendant le défilement */
.Polaris-IndexTable__TableHeading,
.Polaris-DataTable__Cell--header {
  position: sticky !important;
  top: 56px !important;
  background: #fff !important;
  z-index: 5 !important;
}

Mode focus

Quand vous travaillez sur une seule tâche — par exemple la modification groupée de produits — la navigation latérale et la barre supérieure ne font que distraire. Une règle distincte les masque pour la durée :

/* Mode focus : masque la navigation et la barre supérieure */
.Polaris-Navigation,
.Polaris-TopBar {
  display: none !important;
}
.Polaris-Frame__Main {
  padding-left: 0 !important;
}

Construisez votre propre ensemble

Gardez les ajustements comme des règles distinctes et nommées — « Shopify : tableaux denses », « Shopify : stock faible », « Shopify : focus » — chacune épinglée à admin.shopify.com. Ensuite, en quelques secondes vous adaptez le panneau à la tâche.

Des règles prêtes à l'emploi pour l'administration Shopify sont dans le catalogue — voyez les exemples pour admin.shopify.com et copiez ce qui convient. Installez JustZix et désencombrez l'administration de votre boutique dès aujourd'hui.