← 全部文章

教程

用 JustZix 改造 Shopify 后台——CSS 与 JS

18 5月 2026 · 作者 JustZix Team

Shopify 后台(admin.shopify.com)构建在 Polaris 设计系统之上,看起来很整洁——但当你管理成百上千的商品和订单时,默认间距太松,应用推销横幅吃掉空间,低库存也会消失在表格里。这些你在店铺设置里改不了。不过,你可以用一条固定到后台的 JustZix 规则叠加自己的 CSS 和 JS。下面是几个现成的微调。

加密商品和订单表格

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 徽章。未付款订单值得标记得比默认更强:

/* 给“未付款”状态更强的强调 */
.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,今天就清理你的店铺后台。