← Все статьи

Туториалы

Перекройте админку Shopify с JustZix — CSS и JS

18 мая 2026 · автор JustZix Team

Админка Shopify (admin.shopify.com) построена на дизайн-системе Polaris и выглядит аккуратно — но когда вы управляете сотнями товаров и заказов, стандартные отступы слишком свободные, баннеры с рекламой приложений отнимают место, а низкий остаток теряется в таблице. Изменить это в настройках магазина нельзя. Зато можно наложить собственный CSS и JS правилом JustZix, привязанным к админке. Вот несколько готовых настроек.

Уплотните таблицы товаров и заказов

Списки в Shopify используют компонент Polaris-IndexTable. По умолчанию строки высокие, поэтому на экран помещается их немного. Уплотнение — первое и самое заметное изменение:

/* Более плотные строки таблиц товаров и заказов */
.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;
}

Меньшая миниатюра товара и более тесные ячейки позволяют видеть вдвое больше строк на одном экране — меньше прокрутки при просмотре каталога.

Подсветите низкий остаток

Колонка остатка на складе — это обычный текст, легко не заметить, что товара осталось несколько штук. С помощью JS можно пометить такие строки цветом, чтобы они выделялись:

// Подсветить строки с низким остатком (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 });

MutationObserver здесь ключевой — Shopify подгружает строки динамически при пагинации, поэтому после одного только первого запуска новые страницы остались бы без цвета.

Выделите неоплаченные заказы

В списке заказов статус оплаты показывается как «бейдж» Polaris. Неоплаченные заказы стоит выделить сильнее, чем по умолчанию:

/* Более сильный акцент для статуса Unpaid */
.Polaris-IndexTable__TableRow
  .Polaris-Badge--statusWarning,
.Polaris-IndexTable__TableRow
  .Polaris-Badge--statusAttention {
  outline: 2px solid #d4380d !important;
  font-weight: 700 !important;
}

Скройте баннеры апсела и карточки приложений

Shopify активно продвигает свои приложения и дополнения — баннеры на панели управления, карточки рекомендаций, разделы «попробуйте». Они занимают место над реальной работой. Их можно скрыть:

/* Скрыть промо-баннеры и карточки рекомендаций приложений */
.Polaris-Banner--withinPage,
[data-marketing-card],
section[aria-label*="recommend" i],
.Polaris-CalloutCard {
  display: none !important;
}

Селекторы намеренно широкие, потому что Shopify меняет имена своих маркетинговых классов. После включения правила окиньте взглядом страницу, чтобы убедиться, что не исчезло ничего нужного, и при необходимости сузьте шаблон.

Более широкое содержимое и липкие шапки таблиц

Админка Shopify ограничивает ширину содержимого, из-за чего на большом мониторе остаются пустые поля. Расширьте рабочую область и закрепите шапку таблицы, чтобы столбцы оставались видны при прокрутке длинного списка:

/* Более широкая область содержимого */
.Polaris-Page {
  max-width: 1400px !important;
}

/* Липкая шапка таблицы при прокрутке */
.Polaris-IndexTable__TableHeading,
.Polaris-DataTable__Cell--header {
  position: sticky !important;
  top: 56px !important;
  background: #fff !important;
  z-index: 5 !important;
}

Режим фокуса

Когда вы работаете над одной задачей — например, массово редактируете товары — боковая навигация и верхняя полоса только отвлекают. Отдельное правило прячет их на это время:

/* Режим фокуса: прячет навигацию и верхнюю полосу */
.Polaris-Navigation,
.Polaris-TopBar {
  display: none !important;
}
.Polaris-Frame__Main {
  padding-left: 0 !important;
}

Соберите свой набор

Держите настройки отдельными именованными правилами — «Shopify: плотные таблицы», «Shopify: низкий остаток», «Shopify: фокус» — каждое привязано к admin.shopify.com. Тогда за несколько секунд вы подстроите панель под задачу.

Готовые правила для админки Shopify есть в каталоге — посмотрите примеры для admin.shopify.com и скопируйте то, что подходит. Установите JustZix и расчистите админку своего магазина уже сегодня.