Shopifyテーマ開発の新時代を象徴する「Theme Blocks」が、ついに本格始動します。昨年のShopify Editionsで初めて紹介されたこの革新的な機能は、これまで開発者プレビュー限定で提供されていましたが、Winter ’25のアップデートを機に、すべてのテーマで正式に利用可能となりました。
さらに、新テーマではAIによるブロックの生成もできるようになります(2025年5月27日現在は、「アカウントの言語」が「English」になっている時のみ利用可能)。
いろいろなメディアですでに本Editionの紹介がされていますが、本記事では実際に触ってわかったことなどを突っ込んで書いていきます。
新テーマ”Horizon”は、Shopify の「新しいデザイン基盤」「テーマブロックの力」を活用することで、「完全な柔軟性」を実現することを目的としているとのこと。
デザインプロセスを効率化するために、AIの活用も強調されています。
具体的には、「カスタムテーマブロック」。プロンプトで指示するだけでAIがセクションブロックを生成します。
2025年5月27日現在は、「アカウントの言語」が「English」になっている時のみ対応している。
現在でもこの設定を変更すれば機能は使用できる。
この機能は現在、アカウントの言語を「英語」に設定してないと使用できません。
と、記載されている。
これまた分かりづらいのですが、以下の操作でアカウントの言語を変更できます。
「設定」>「言語」で設定できる、ストアの言語の方ではないので注意!
①管理画面右上のストア名をクリック
②表示されるメニュー内の「アカウント管理」をクリック
③「言語」を「English」にして保存する
(保存後、ブラウザをリロードすると管理画面上の日本語が英語に変わりますが、「日本語」に戻すときの手順も同じです)
英語に変わった。
①セクション内のブロック追加のときに表示される”Add block”の表示
②これを押すと、以下のように「生成」または「Generate」というボタンが出現する(アカウントの言語を「English」にしていないと出ない)
③以下のようにプロンプトを入力する枠が表示される
超適当に日本語のプロンプトを入力してみた。言語を英語にしているから英語のプロンプトでないと認識されていない?
↓
“Generating Block…”と表示され、ブロックのコード生成が開始された
↓
新たなブロックが生成され追加された
↓
Github上で変更ログを見ると、確かに”blocks”と”templates”に変更があったことがわかる
GUI操作のみで裏側で実際にコードが生成されていくのは、「コードを管理している人=エンジニア」という構造じゃなくなる、ということを、プロジェクトメンバーの共通認識にしていく必要がある。
場合によっては、コーディングをしない担当者が、ノーコードで作ったセクションブロックの動作検証・・・例えば、GUIでの作成時にデスクトップでの表示だけを見ていて、モバイルでの表示を見ないままテーマを公開すると、モバイル版ではおかしな表示になって、その修正が必要になることもあり得る。
そうした際に、「AIによるブロック生成」でテーマをカスタマイズすると、裏側でコーディングされる、ということを共通認識している必要がある。
以下の動画で実際に生成しているところを見れるが、途中、生成されたブロック内のテキストを打ち替えると、ほかのブロックにも連動してしまう挙動などが見られたので、やはりブロック生成時にプロンプトで要件を的確にする必要がある。この点、筆者が推しているAIコーディング同様に、エンジニアが書くプロンプトは論理が通っているのでますますこれから「プロンプトエンジニアリング」のスキルが必須リテラシーになっていく時代になる。
また、生成したブロックは他のセクションでも再利用できるところも収録できた。
なお、Summer ’25 Editions 全体で見ると、AIはストアデザイン以外にも様々な領域で活用されています。
例えば、Sidekick は「image generation」機能を提供し、キーワードに基づいてビジュアルを生成できます。
以下、別記事に記載したが、”Horizon”のテーマでは、アカウントページ周りを「新しいお客様アカウント」の仕様にアップデートしなければいけない。
“Horizon”でなきテーマでも、2026年8月26日までに、Shopifyのサンキューページと注文状況ページを新バージョンにアップグレードする必要があります。新しいページでは、アプリブロックやウェブピクセルによるカスタマイズが可能で、旧バージョンの機能はサポートされなくなります。アップグレードしない場合、既存ページは自動的に新ページに置き換えられる。
以前からShopifyが、このアカウントページの仕様を推進していたが、本格的に全ストアが2026年8月26日までにこの仕様になるということだ。
上記記事でも記載しているが、新しいお客様アカウントのページは、URLがストアのサブドメインURLを使用しなければいけないため、必然的にDNSの追加設定が必要になる。
推測ですが、新しいお客様アカウントのページは、おそらくセキュリティ的にShopifyの中ででサーバーが別になっていると思われます。
この新しいお客様アカウントのページは”Shop”アプリとも連動していて、”Shopアプリ”単体の使い方も面白く、いくつものShopifyストアを横断する形になっている。
このアプリでは主に、アカウントの決済の履歴として、全Shopifyストアで決済をした履歴を一括で確認でき、一度決済したストアはShopアプリ上で最新情報が確認できたりする。
Shop Apple App Store
Shop Google Play
↓
追加すべきもの
必須
- アプリやチャネル全体で使用される一般的なブランドアセット
- デフォルトのロゴ
- 正方形のロゴ
- 色
一部のアプリやSNSチャネルで使用されるもの
- カバー画像
- タグライン └ブランドや企業の理念や魅力を簡潔に表現する短いフレーズのことです。日本語では「キャッチコピー」「スローガン」に近い意味で使われることがあります。例: ブランド タグライン(英語) 意味/日本語訳例 Nike Just Do It. とにかくやってみよう。 Apple Think Different. 常識を疑え。 L’Oréal Because you’re worth it. あなたには、その価値がある。
- 簡単な説明
- SNSリンク
右上に表示されているボタンからSidekickを呼び出せる
↓
Sidekickで操作方法を質問できる
このアプリはすでに公開されていますが、日本語対応はまだされていません。
AIショッピング・エージェントのアプリ
主な機能は3つ
アプリの画面
日本語対応はまだされていません。現時点ではサポートも英語のみとのこと!