テーマエディタでテーマブロックを自動生成する

Shopify Magic を通じて、入力した詳細情報に基づき、AI (人工知能) を使用してテーマエディタで新しいテーマブロックを生成できます。

このページの内容

テーマブロックの生成に関する考慮事項

テーマブロックを生成する際の以下の考慮事項を確認してください。

AIによって生成されたコードは、常に完璧であるとは限りません。エラー、予期しない結果、あるいはアクセシビリティやパフォーマンスのベストプラクティスを完全に満たさないコードが生成されることがあります。生成されたブロックが基準を満たし、正しく機能するかどうかを確認、テストする必要があります。
テーマエディタのプレビューで、デスクトップとモバイルの両方のビューでブロックがどのように表示されるかを確認してください。
ブロックにカスタマイズ設定が含まれている場合は、ブロックを追加した後にテストして、想定どおりに機能することを確認してください。
テーマブロックを生成すると、そのブロックの新しいLiquidファイルが、テーマのコード内にある「 blocks 」フォルダーに追加されます。
- テーマブロックは、 Liquid、Shopifyのテンプレート言語で構成されています。テーマブロックファイルには、HTML、CSS、JSON、JavaScriptも含まれています。テーマブロックを生成すると、そのブロックの新しいLiquidファイルが、 blocks 」フォルダーに追加されます。
- 生成されたテーマブロックをコードを編集して変更したい場合は、テーマコードを編集できます。テーマコードの編集は、HTMLとCSSを理解しており、Liquidの基本的な知識がある場合にのみ行ってください。
- Shopify Magicによって生成されるLiquidファイルは自己完結型です。新しいバージョンがテーマストアで公開された場合でも、引き続きテーマを更新することができます。

テーマブロックを生成するための利用資格要件

テーマブロックを生成するための以下の要件を確認してください。

料金プランの要件

ストアで、以下のいずれかの料金プランを利用している必要があります。

無料体験
Basic
Growth
Advanced
Plus

Spotlight テーマを使用し、カスタムのテーマセクションやテーマブロックの追加に対応していない Starter プランでは、この機能はご利用いただけません。

テーマの互換性

テーマブロックの生成機能は、Shopify Theme Store のすべてのテーマでご利用いただけます。互換性のある外部サービスのテーマを使用する場合、無料体験版ではこの機能に対応していないため、テーマブロックを生成する前にテーマを購入する必要があります。

この機能はビンテージテーマではご利用いただけません。各テーマアーキテクチャバージョンの機能について、詳しくはこちらをご覧ください。

ユーザー権限の要件

以下のユーザーはテーマでブロックを生成できます。

効果的なテーマブロックのプロンプトを作成するためのヒント

生成されるブロックの品質は、プロンプトの品質に大きく左右されます。以下のベストプラクティスに従ってください。

具体的かつ詳細に記述する: プロンプトは 5語以上にする必要があります。プロンプトが長く詳細であるほど、より正確な結果が返される可能性が高くなります。たとえば、add images and text と入力するのではなく、Create a block with an image on the left, and a heading, paragraph text, and a 'Shop Now' button on the right. Stack on mobile と入力します。
コンテンツ要素を指定する: 見出し、段落、画像、ボタン、フォーム、アイコンなど、ブロックに必要なコンテンツのタイプを列挙します。
レイアウトを指示する: 横並び、グリッド、中央揃え、交互の行など、ブロック内の要素の配置を説明します。
カスタマイズ設定を含める: 画像、テキスト、またはボタンのリンクを変更するオプションなど、テーマエディタで編集可能な特定の設定をブロックに持たせたい場合は、それらをプロンプトに含めます。たとえば、動画のブロックにアニメーション速度を調整する設定を含めるには、Include a setting to control animation speed と入力します。
追加の指示を出して調整を繰り返す: 最初の結果が意図したものではない場合、詳細を追加するか、別の言い回しでプロンプトを調整して、もう一度生成します。

ベストプラクティスに従ったプロンプトの例を以下に示します。

お客様の写真、引用テキスト、顧客名、5つ星評価の表示を含むお客様の声ブロック。
横並びの機能ブロック：左側にアイコンと見出し、右側に説明テキスト。
背景画像、中央揃えの大きな見出しテキスト、その下の小さな小見出しテキスト、コールトゥアクションボタンを含む全幅バナー。

テーマブロックを生成する

ブロックを生成して保持することを決定すると、新しいブロックがブロックピッカーに追加されます。テーマブロックを受け入れる互換性のあるセクションにブロックを追加できます。

手順：

管理画面から、[オンラインストア] > [テーマ] に移動します。
編集するテーマを見つけて、[テーマを編集] をクリックします。
ホームページをカスタマイズするか、[ホームページ] ドロップダウンメニューをタップして、セクションを追加するテンプレートを選択します。
ブロックを生成するセクションをクリックします。
[ブロックを追加] をクリックします。
[生成] をクリックします。
生成するブロックの説明を入力します。
[生成] をクリックします。Shopify Magicがリクエストを処理してコードを作成します。
生成されたブロックをテーマエディタで直接プレビューします。カスタマイズ設定が生成された場合は、ブロックをカスタマイズできます。
生成されたブロックでよろしければ、「保持」をクリックします。そうでない場合は、ブロックを破棄するか、フォローアップの指示を入力することができます。

生成されたテーマブロックをテーマから削除する

テーマブロックを生成すると、そのブロック用の新しい Liquid ファイルがテーマコードの blocks フォルダに追加されます。生成されたテーマブロックがストアで問題を引き起こしている場合は、テーマコードから Liquid ファイルを削除することで、そのテーマブロックを削除できます。

手順：

管理画面から、[オンラインストア] > [テーマ] に移動します。
編集するテーマの横にある 「テーマを編集」 をクリックします。
ホームページをカスタマイズするか、[ホームページ] ドロップダウンメニューをタップして、セクションを追加するテンプレートを選択します。
削除するブロックが含まれているセクションをクリックします。以前にそのブロックのすべてのインスタンスを削除している場合は、「ブロックを追加」をクリックし、ブロックピッカーからブロックを再度追加します。
ブロックの設定で、 > [コードを編集] の順にクリックします。
サイドバーメニューで blocks フォルダをクリックして展開し、現在表示しているブロックファイルを見つけます。ファイル名は、現在開いているブロックの名前と一致し、末尾に .liquid が付きます。
サイドバーメニューで、ブロックファイルの横にあるアイコンをクリックします。
ダイアログで、「ファイルを削除」をクリックして確定します。