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

Shopify Magicでは、人工知能 (AI) が、指定した詳細に基づいてTheme Blockをテーマエディタに生成します。

Theme Blockを生成する際の考慮事項

Theme Blockを生成する際は、次の考慮事項を確認してください。

AIによって生成されたコードは、常に完璧であるとは限りません。エラーや予期しない結果が生じたり、アクセシビリティやパフォーマンスのベストプラクティスを完全に満たさないコードが生成される場合もあります。生成されたブロックが標準に適合し、正しく動作することを確認し、テストし、保証する責任があります。
テーマエディタのプレビューで、デスクトップビューとモバイルビューの両方におけるブロックの外観を確認します。
ブロックにカスタマイズ設定が含まれている場合は、ブロックを追加した後にテストして、期待どおりに動作することを確認します。
Theme Blockを生成すると、ブロックの新しいリキッドファイルがテーマの、コード内の [Blocks] フォルダに追加されます。 - Theme BlockはShopifyのテンプレート言語であるLiquidで構成されています。Theme BlockファイルにはHTML、CSS、JSON、JavaScriptも含まれています。Theme Blockを生成すると、そのブロックの新しいLiquidファイルがテーマのコード内の [blocks] フォルダーに追加されます。
- コードを編集することで生成されたテーマブロックを編集したい場合は、テーマコードを編集できます。ユーザーがHTMLとCSSの知識があり、Liquidの基本知識をお持ちの場合にのみ、テーマコードを編集してください - Shopify Magicによって生成された液体ファイルは自己完結型です。新しいバージョンがテーマストアに公開されたら、をテーマを更新できます。

Theme Blockを生成するための資格要件

Theme Blockを生成するための次の要件を確認してください。

料金プランの要件

ストアが次のいずれかの料金プランに加入している必要があります。

無料トライアル
Basic
成長
Advanced
プラス

この機能はStarterプランではご利用いただけません。StarterプランではSpotlightテーマが使用されており、カスタムのテーマセクションやブロックの追加はサポートされていません。

言語要件

アカウントの優先言語は「英語」に設定する必要があります。

テーマの互換性

テーマブロック生成機能は、Shopify Theme Storeのフリーテーマなど、Shopifyによって構築されたテーマでのみ使用できます。テーマは、テーマブロックを受け入れるセクションをサポートする必要があります。テーマブロックを受け入れるセクションに対してのみブロックを生成できます。

さまざまなブロックソースについて詳しくご覧ください。

効果的なプロンプトを書くためのヒント

生成されるブロックの品質は、プロンプトの内容に大きく左右されます。プロンプトの書き方については、以下のベストプラクティスを参照してください。

具体的で詳細な説明

プロンプトは5語以上にしてください。詳細が記載された長いプロンプトほど、より正確な結果が得られやすくなります。

たとえば、「画像とテキストを追加」と入力する代わりに、「左側に画像を配置し、右側に見出し、段落テキスト、および [今すぐ購入] ボタンを配置したブロックを作成します。モバイルでは縦に並べます」と入力してください。

コンテンツ要素を記載する

見出し、段落、画像、ボタン、フォーム、アイコンなど、ブロックに必要なコンテンツの種類をリストします。

レイアウトを提案する

ブロック内の要素の配置 (横並び、グリッド、中央揃え、交互の行など) を説明します。

カスタマイズ設定を含める

テーマエディタでブロックに特定の編集可能な設定 (画像、テキスト、ボタンのリンクの変更など) を設定したい場合は、それらをプロンプトに含めます。

たとえば、ビデオを含むブロックにアニメーション速度を制御する設定を含めるには、「アニメーション速度を制御する設定を含める」と入力します。

フォローアップの指示を繰り返す

最初の結果が適切でない場合は、プロンプトを詳細にしたり、言い回しを変えたりして調整し、再度生成します。

プロンプトの例

ベストプラクティスに沿ったプロンプトの例を以下でご確認ください。

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

Theme Blockを生成する

ブロックを生成し、それを保持することを決定すると、新しいブロックがブロックピッカーに追加されます。Theme Blockに対応したセクションにブロックを追加できます。

手順

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

生成したTheme Blockをテーマから削除する

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

手順

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