はじめに
- Shopifyの管理画面が新しいデザインになったが、自分のアプリだけ古い見た目のままになっている
- Polaris 2.0に移したいが、何を書き換えればいいのか分からない
- Built for Shopifyの期限までに何をすればいいのか知りたい
このような方のための記事です。
2026年10月22日、Shopifyアプリの管理画面で使う部品集「Polaris」の2.0が正式版になりました。この記事では、アプリをPolaris 2.0に移す手順を、自社のお気に入りアプリ「RYX Wishlist」を実際に移したときの作業に沿って解説します。公式の手順には「ライブラリを2.1.0以上に」と一行だけ書かれていますが、実際には一緒に上げるものが4つありました。
Polaris 2.0で何が変わったか
Shopifyの管理画面は、2026年9月15日から順に新しいデザインへ切り替わっています。枠とメニューが変わり、文字・色・余白も全体に変わりました。Polaris 2.0は、この新しい管理画面と同じ見た目でアプリの画面を描くための版です。
自社のアプリを移す前と後で、ホームの画面を比べたのが次の2枚です。どちらも新しいデザインの管理画面で開いています。
セクションの見出しがカードの外に出て、お知らせの帯は薄い水色の一枚に、ボタンは灰色の丸みのある形に変わりました。アプリのコードは画面の部分を一行も書き換えていません。Polaris 2.0は、管理画面の見た目に合わせて部品が自分で描き方を変えるからです。
まだ古いデザインのままの店で開くと、Polaris 2.0でも今までと同じ見た目で描かれます。店ごとに管理画面のデザインが違う時期でも、同じアプリで両方に対応できます。
自動では切り替わらない
Polaris 2.0は、待っていても届きません。今まで読み込んでいたpolaris.jsは1.1のまま据え置かれ、この先も2.xには上がらないと明記されています。新しい見た目にするには、読み込み先をpolaris-2.jsに書き換える必要があります。
読み込み先は2つあります。
<!-- 2.x の最新に追従する -->
<script src="https://cdn.shopify.com/shopifycloud/polaris-2.js"></script>
<!-- 2.0 に固定する -->
<script src="https://cdn.shopify.com/shopifycloud/polaris-2.0.js"></script>
自社のアプリはpolaris-2.jsにしました。管理画面のデザインは段階的に切り替わっている途中で、部品の細かな手直しも続くと見ています。2.0に固定すると、そのたびに手で上げることになります。
React Routerのテンプレートで作ったアプリの手順
Shopify CLIで作ったアプリには、自分で書いたscriptタグがありません。@shopify/shopify-app-react-routerのAppProviderがPolarisを読み込み、サーバー側の設定が先読みの指示を返しています。この2か所に同じ読み込み先を入れます。
1. 読み込み先を1か所にまとめる
値が2か所でずれると、先読みしたPolarisと実際に読むPolarisが別の版になります。定数にして両方から使うのが安全です。
// app/constants.ts
export const POLARIS_URL = "https://cdn.shopify.com/shopifycloud/polaris-2.js";
shopify.server.tsに置くと、画面側のコードから読めません。React Routerは.serverの付いたファイルをブラウザ向けの出力から外すので、ビルドで止まります。
2. AppProviderとshopifyAppに入れる
// app/routes/app.tsx
<AppProvider apiKey={apiKey} polarisUrl={POLARIS_URL}>
<Outlet />
</AppProvider>
// app/shopify.server.ts
const shopify = shopifyApp({
// ...
polarisUrl: POLARIS_URL,
});
自分でPolarisのscriptタグを足してはいけません。2本読み込まれるとエラーで画面が止まります。
3. 型の定義を2に上げる
TypeScriptを使っているなら、型の定義も読み込む版に合わせます。
npm install -D @shopify/polaris-types@^2.0.0
ライブラリを2.1に上げると、一緒に上がるもの
polarisUrlが使えるのは@shopify/shopify-app-react-routerの2.1.0からです。テンプレートで作った時期によっては1.x系のままのはずで、自社のアプリも1.1でした。1から2への更新には破壊的な変更が入っていて、次の4つを一緒に直す必要がありました。
Node.jsを22以上に
2.0でNode.js 20のサポートが外れました。Renderなどで動かしているなら、Dockerfileの土台も上げてください。
FROM node:22-alpine
package.jsonのenginesに20を残しているなら、そこも直します。
セッションの保存のライブラリとPrisma
2.1は内部で@shopify/shopify-apiの14を使います。セッションをPrismaで保存しているなら、保存のライブラリも14に対応した10系に上げます。8系は13向けで、組み合わせが合いません。10系はPrismaの6.19以上を求めるので、Prismaも上げます。
npm install @shopify/shopify-app-react-router@^2.1.0 \
@shopify/shopify-app-session-storage-prisma@^10.0.1 \
@prisma/client@^6.19.0 prisma@^6.19.0
上げたらnpm ls @shopify/shopify-apiで、14が1つだけになっているかを確かめてください。
AppProviderのembeddedが無くなった
2.0でAppProviderは管理画面に埋め込む専用になり、embeddedの指定が無くなりました。埋め込みの画面はembeddedを消すだけです。
- <AppProvider embedded apiKey={apiKey}>
+ <AppProvider apiKey={apiKey} polarisUrl={POLARIS_URL}>
困るのは、テンプレートに入っているログインの画面/auth/loginです。<AppProvider embedded={false}>で包んでPolarisの部品を出していたので、包みを外すと入力欄が描かれなくなります。自社のアプリでは、ここだけ素のHTMLのフォームに書き換えました。App Storeから入れる店はこの画面を通らないので、見た目より動けばよい画面です。
customShopDomainsが無くなった
1.2.0でcustomShopDomainsの設定が無くなり、domainTransformationsに置き換わりました。テンプレートのSHOP_CUSTOM_DOMAINを読む書き方が残っていたら、設定から消します。自社のアプリでは使っていなかったので、そのまま消しました。
移したあとに見るところ
画面の部品はPolarisが描き直しますが、自分で書いた見た目はそのまま残ります。公式の点検の項目のうち、見落としやすいのは次の3つです。
- Polarisの色の値を写したCSS：
var(--p-color-bg-fill-brand, #303030)のような書き方は、古い色に固定されます。自社のアプリでは、メールの送信数を示すバーがこの書き方でした - 自分で作った丸やバッジ：手で色を決めた部品は、新しい部品の横で浮きます。自社のアプリでは、CSVの取り込みの手順に付けた番号の丸が当てはまりました
- 画面の下に固定した要素：新しい管理画面はSidekickの入力欄が下に重なります。App Bridgeが重なる高さを
--shopify-safe-area-inset-bottomで渡してくれるので、固定の要素はその分だけ上げます
設定の画面も比べておきます。トグルや入力欄の形はほぼ同じで、「プランを変更」などのボタンが灰色の丸い形に変わりました。
確かめるときは、新しいデザインの管理画面の店で開いてください。古いデザインの店では見た目が変わらないので、移せたかどうかが分かりません。開発ストアを作るときに新しいデザインの先行公開を選ぶか、Shopify CLIのshopify store create dev --feature-preview new_admin_designで作れます。
Built for Shopifyの期限は2027年5月1日
Built for Shopifyの認定を持っているアプリは、2027年5月1日までに管理画面の見た目を新しいデザインに合わせる必要があります。認定を目指しているアプリも、申請のときには新しい見た目で見られることになります。
まだ@shopify/polarisのReactの部品で画面を作っているアプリは、Polaris 2.0を読み込んでもその部分は古い見た目のままです。Webコンポーネントへの書き換えが先に要るので、期限まで半年あるうちに始めてください。
さいごに
Polaris 2.0への移行は、Webコンポーネントで作ったアプリなら読み込み先を2か所書き換えるだけです。手間がかかるのは、テンプレートのライブラリを1.xから2.1に上げるときの付随作業でした。Node.js 22、セッションの保存のライブラリとPrisma、ログインの画面、使わなくなった設定の4つを一緒に直せば済みます。自社のアプリでは、調べるところから本番に出すまで1時間かかりませんでした。
アプリのセキュリティまわりの対応はShopifyが全アプリ開発者に求めたセキュリティ対応の記事にまとめています。ぜひ参考にしてみてください。
自社アプリの改修や、管理画面のデザインの移行については、お問い合わせからお気軽にご相談ください。