← All posts

Tutorials

Reshape the Shopify admin with JustZix — CSS and JS

18 May 2026 · by JustZix Team

The Shopify admin (admin.shopify.com) is built on the Polaris design system and looks tidy — but when you manage hundreds of products and orders, the default spacing is too loose, app-promo banners eat space, and low stock disappears into the table. You cannot change that in store settings. You can, however, layer your own CSS and JS with a JustZix rule pinned to the admin. Here are a few ready-made tweaks.

Densify the product and order tables

Shopify lists use the Polaris-IndexTable component. By default rows are tall, so few fit on screen. Densifying them is the first and most noticeable change:

/* Denser rows in product and order tables */
.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;
}

A smaller product thumbnail and tighter cells let you see twice as many rows on one screen — less scrolling while browsing the catalog.

Highlight low stock

The inventory column is plain text — it is easy to miss that only a few units of a product are left. With JS you can flag those rows with a color so they stand out:

// Highlight low-stock rows (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 });

The MutationObserver is key here — Shopify loads rows dynamically on pagination, so after the first run alone the new pages would be left uncolored.

Flag unpaid orders

On the orders list the payment status shows up as a Polaris badge. Unpaid orders are worth flagging more strongly than the default:

/* Stronger accent for the Unpaid status */
.Polaris-IndexTable__TableRow
  .Polaris-Badge--statusWarning,
.Polaris-IndexTable__TableRow
  .Polaris-Badge--statusAttention {
  outline: 2px solid #d4380d !important;
  font-weight: 700 !important;
}

Hide upsell banners and app cards

Shopify heavily promotes its apps and add-ons — banners on the dashboard, recommendation cards, "try it" sections. They take up space above the real work. You can hide them:

/* Hide promo banners and app recommendation cards */
.Polaris-Banner--withinPage,
[data-marketing-card],
section[aria-label*="recommend" i],
.Polaris-CalloutCard {
  display: none !important;
}

The selectors are deliberately broad because Shopify changes its marketing class names. After enabling the rule, glance over the page to confirm nothing useful disappeared, and narrow the pattern if needed.

Wider content and sticky table headers

The Shopify admin caps the content width, which leaves empty margins on a large monitor. Widen the work area and pin the table header so columns stay visible while scrolling a long list:

/* Wider content area */
.Polaris-Page {
  max-width: 1400px !important;
}

/* Sticky table header while scrolling */
.Polaris-IndexTable__TableHeading,
.Polaris-DataTable__Cell--header {
  position: sticky !important;
  top: 56px !important;
  background: #fff !important;
  z-index: 5 !important;
}

Focus mode

When you work on a single task — for example bulk-editing products — the side navigation and top bar only distract. A separate rule hides them for the duration:

/* Focus mode: hides navigation and the top bar */
.Polaris-Navigation,
.Polaris-TopBar {
  display: none !important;
}
.Polaris-Frame__Main {
  padding-left: 0 !important;
}

Build your own set

Keep the tweaks as separate, named rules — "Shopify: dense tables", "Shopify: low stock", "Shopify: focus" — each pinned to admin.shopify.com. Then in a few seconds you fit the panel to the task.

Ready-made rules for the Shopify admin are in the catalog — see the examples for admin.shopify.com and copy whatever fits. Install JustZix and declutter your store admin today.