Online Store / 新機能

Canvas
ストアの全ページを「1枚の無限キャンバス」で設計する

全ページが一つのインタラクティブなワークスペースに並ぶ新しいデザイン面。パン&ズームでストア全体を見渡し、要素を直接クリック編集、または Sidekick にチャットで指示して、変更がリアルタイムに反映される。

このページの構成
  1. そもそも何が変わるのか(30秒で理解)
  2. Canvas でできる4つのこと
  3. 仕組み図解 : 編集〜プレビューの流れ
  4. 始め方(3ステップ)
  5. ローンチ時点の非対応・制約
  6. 従来テーマエディタ vs Canvas の比較
  7. 技術者が押さえるべき5つのポイント
  8. 業務に活かせる3つのユースケース
  9. 提案で使える1行サマリ

1そもそも何が変わるのか

これまでのテーマ編集は「1ページずつ開いて直す」作業だった。
Canvas は ストアの全ページを1つの無限ワークスペースに並べ、ストア全体の雰囲気を見ながら、どの部分でも文脈の中で編集できる新しいデザイン面。

従来 : ページ単位の編集

現行のテーマエディタ。ページを切り替えながら個別に編集する。Canvas 導入後も元テーマはこちらに残る。

Canvas : 全ページを一望

全ページが一枚に並ぶ。パンで移動、ズームで細部へ。要素を直接クリック編集、または Sidekick にチャットで指示。

2Canvas でできる4つのこと

パン&ズーム
全ページを横断移動し、任意の細部を拡大
直接クリック編集
要素をクリックしてその場で編集
Sidekick に指示
セクション単位〜ストア全体の刷新までリアルタイム反映
実ストアのプレビュー
インタラクション・アニメーション・商品/コレクション・画面サイズ切替

3仕組み図解 : 編集〜プレビューの流れ

マーチャント デザイン担当 直接クリック編集 要素を選んでその場で Sidekick チャット やりたいことを伝える Canvas(無限ワークスペース) 変更がリアルタイムに反映 実ストアのプレビュー インタラクション アニメーション 商品/コレクション切替 画面サイズ切替 1セクションの修正 〜 ストア全体のリデザインまで同じ面で完結
プレビューは静的なモックではなく 「本物の、動くストア」 と記載されている。Sidekick の変更範囲は「単一セクション」から「ストア全体のリデザイン」まで。Sidekick の具体的な指示例・制限は記事に記載なし。

4始め方(3ステップ)

1

オンラインストア > テーマ

管理画面の Online Store > Themes を開く。

2

Canvas でテーマを作る

新規テーマを Canvas で作成、または Shopify テーマ/カスタムテーマを Canvas に複製。

3

元テーマはそのまま

オリジナルのテーマは現行テーマエディタに残る。

既存ストアへは 今後数日かけて順次ロールアウト。「複製」方式なので、現行テーマを壊さずに Canvas を試せる。対象プラン・料金は記事に記載なし。

5ローンチ時点の非対応・制約

非対応

Theme Store のサードパーティテーマ

Shopify Theme Store のサードパーティ製テーマは Canvas で扱えない。

非対応

Markets

Markets はローンチ時点でサポート外。

非対応

Rollouts

rollouts はローンチ時点でサポート外。

非対応

翻訳(translations)

翻訳はローンチ時点でサポート外。

非対応

App blocks / App embeds

アプリのブロックや埋め込みはローンチ時点でサポート外。

注意

テーマアップデートが届かない

Canvas で編集したテーマはテーマのアップデートを受け取らない。

非対応項目の今後の対応予定・時期は記事に記載なし(「At launch」=ローンチ時点の制約とだけ書かれている)。

6従来テーマエディタ vs Canvas の比較

項目現行テーマエディタCanvas
作業面 ページ単位 全ページ一望 無限ワークスペース
編集手段 記事に記載なし 2通り 直接クリック + Sidekick チャット
プレビュー 記事に記載なし 動く実ストア(インタラクション・アニメーション・商品/コレクション・画面サイズ)
サードパーティテーマ — 非対応(ローンチ時点)
Markets / 翻訳 / Rollouts / アプリブロック — 非対応(ローンチ時点)
テーマアップデート — 受け取らない

7技術者が押さえるべき5つのポイント

1. 「複製して移行」が前提

Canvas 用のテーマは新規作成か複製で作る。元テーマは現行エディタに残るので、本番テーマと並行して検証できる。

2. テーマアップデートから切り離される

Canvas で編集したテーマは更新を受け取らない。テーマ提供元の修正・新機能を取り込む運用は別途考える必要がある。

3. App blocks / App embeds 非対応

アプリ依存(レビュー・CRM・計測タグ等をアプリ埋め込みで入れている)ストアは、Canvas テーマに切り替えると機能が欠ける前提で評価する。

4. 多言語・多市場ストアは現時点で不向き

Markets・翻訳・rollouts が非対応。越境/多言語構成のストアは、ローンチ時点では現行エディタ継続が無難。

API ?

5. 開発者向け仕様の言及は無い

Liquid/テーマファイル構造への影響、Shopify CLI や GitHub 連携との関係、Canvas テーマを現行エディタへ戻せるかは記事に記載なし。コード管理しているテーマを触る前に、複製テーマで差分の出方を確認すること。

8業務に活かせる3つのユースケース

全体を刷新して
USE CASE 1

リブランディング時の「ストア全体リデザイン」を短期で回す

課題
ブランド刷新でトーンを変えたいが、ページごとに直すと全体の統一感を確認しづらく、修正の往復が増える。
打ち手
現行テーマを Canvas に複製 → 全ページを並べて俯瞰しながら、Sidekick にストア全体のリデザインを指示 → 細部は直接クリックで調整。
効果
ストア全体の見え方を一枚で確認しながら進められ、ページ間の不整合に早く気づける。元テーマは残るので比較・切り戻しもしやすい。
技術メモ
Canvas 編集後はテーマアップデートが届かない。アプリ埋め込み・翻訳を使っていないかを事前に棚卸し。
Canvas
USE CASE 2

クライアントとの「デザインレビュー会」を実ストアで行う

課題
静的なデザインカンプでは、アニメーションやスマホ表示、実商品が入った状態の見え方が伝わらず、公開後に手戻りが出る。
打ち手
Canvas で全ページを並べて見せつつ、プレビューで商品・コレクション・画面サイズを切り替えながら、その場で直接クリック編集して合意を取る。
効果
「動く実ストア」で確認できるため認識ズレが減り、レビュー 1 回あたりの決定事項が増える。
技術メモ
レビュー用は複製テーマで行い、本番テーマは現行エディタ側に温存。共同編集・権限の扱いは記事に記載なし。
USE CASE 3

Canvas 移行可否の「適合診断」をサービス化する

課題
マーチャントから「Canvas に乗り換えるべきか」と相談されても、非対応項目が多く即答できない。
打ち手
チェックリスト化して診断:① Theme Store のサードパーティテーマか ② Markets/翻訳/rollouts を使用中か ③ App blocks/embeds 依存があるか ④ テーマアップデートを今後も受けたいか。
効果
単一市場・アプリ依存が少ないストアから優先して Canvas を提案でき、移行後の機能欠落トラブルを防げる。
技術メモ
非対応はいずれも「ローンチ時点」の制約。対応状況が変わる可能性があるため、診断時に Help Center の最新情報を確認する前提で運用。

9提案で使える1行サマリ

「ストアの全ページを一枚に並べ、クリック or Sidekick で直して動く実ストアで確かめられる新デザイン面。
複製して試せるので本番は無傷。ただし Markets・翻訳・アプリブロック・サードパーティテーマは未対応、テーマ更新も届かない。
単一市場・アプリ依存の少ないストアから試すのが現実解。」