← Todos los artículos

Tutoriales

Remodela el panel de Shopify con JustZix — CSS y JS

18 mayo 2026 · por JustZix Team

El panel de Shopify (admin.shopify.com) está construido sobre el sistema de diseño Polaris y se ve ordenado — pero cuando gestionas cientos de productos y pedidos, el espaciado por defecto es demasiado holgado, los banners que promocionan apps se comen espacio y el stock bajo desaparece en la tabla. No puedes cambiar eso en los ajustes de la tienda. Sí puedes, en cambio, superponer tu propio CSS y JS con una regla de JustZix fijada al panel. Aquí tienes unos cuantos ajustes ya hechos.

Densifica las tablas de productos y pedidos

Las listas de Shopify usan el componente Polaris-IndexTable. Por defecto las filas son altas, así que caben pocas en pantalla. Densificarlas es el primer y más perceptible cambio:

/* Filas más densas en las tablas de productos y pedidos */
.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 de producto más pequeña y celdas más apretadas te dejan ver el doble de filas en una pantalla — menos desplazamiento mientras navegas el catálogo.

Resalta el stock bajo

La columna de inventario es texto plano — es fácil pasar por alto que solo quedan unas pocas unidades de un producto. Con JS puedes marcar esas filas con un color para que destaquen:

// Resalta las filas con stock bajo (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 });

El MutationObserver es clave aquí — Shopify carga las filas de forma dinámica en la paginación, así que tras la primera ejecución sola las páginas nuevas quedarían sin colorear.

Marca los pedidos sin pagar

En la lista de pedidos el estado de pago aparece como una insignia de Polaris. Vale la pena marcar los pedidos sin pagar con más fuerza que por defecto:

/* Acento más fuerte para el estado Sin pagar */
.Polaris-IndexTable__TableRow
  .Polaris-Badge--statusWarning,
.Polaris-IndexTable__TableRow
  .Polaris-Badge--statusAttention {
  outline: 2px solid #d4380d !important;
  font-weight: 700 !important;
}

Oculta los banners de venta y las tarjetas de apps

Shopify promociona con fuerza sus apps y complementos — banners en el escritorio, tarjetas de recomendación, secciones de "pruébalo". Ocupan espacio por encima del trabajo de verdad. Puedes ocultarlas:

/* Oculta los banners promocionales y las tarjetas de recomendación de apps */
.Polaris-Banner--withinPage,
[data-marketing-card],
section[aria-label*="recommend" i],
.Polaris-CalloutCard {
  display: none !important;
}

Los selectores son deliberadamente amplios porque Shopify cambia los nombres de sus clases de marketing. Tras activar la regla, echa un vistazo a la página para confirmar que no desapareció nada útil, y ajusta el patrón si hace falta.

Contenido más ancho y cabeceras de tabla fijas

El panel de Shopify limita el ancho del contenido, lo que deja márgenes vacíos en un monitor grande. Ensancha el área de trabajo y fija la cabecera de la tabla para que las columnas sigan visibles al desplazar una lista larga:

/* Área de contenido más ancha */
.Polaris-Page {
  max-width: 1400px !important;
}

/* Cabecera de tabla fija al desplazar */
.Polaris-IndexTable__TableHeading,
.Polaris-DataTable__Cell--header {
  position: sticky !important;
  top: 56px !important;
  background: #fff !important;
  z-index: 5 !important;
}

Modo enfoque

Cuando trabajas en una sola tarea — por ejemplo, editando productos en lote — la navegación lateral y la barra superior solo distraen. Una regla aparte las oculta mientras dure:

/* Modo enfoque: oculta la navegación y la barra superior */
.Polaris-Navigation,
.Polaris-TopBar {
  display: none !important;
}
.Polaris-Frame__Main {
  padding-left: 0 !important;
}

Monta tu propio conjunto

Mantén los ajustes como reglas separadas y con nombre — "Shopify: tablas densas", "Shopify: stock bajo", "Shopify: enfoque" — cada una fijada a admin.shopify.com. Entonces, en unos segundos, adaptas el panel a la tarea.

Las reglas ya hechas para el panel de Shopify están en el catálogo — mira los ejemplos para admin.shopify.com y copia lo que encaje. Instala JustZix y despeja el panel de tu tienda hoy.