アプリでテーマを拡張する
アプリをインストールして、テーマに機能や統合を追加することができます。Shopify App Storeでアプリを見つけることができます。
アプリは、以下の方法でテーマに統合できます。
- アプリブロックとして：アプリブロックを使用すると、テーマ内の使用したい場所にアプリの機能を追加できます。テーマエディタでアプリブロックの追加、削除、プレビュー、再配置、カスタマイズが可能です。
- 埋め込みアプリとして：埋め込みアプリは、アプリが提供する要素であり、テーマ内でフロート表示やオーバーレイ表示されるか、お客様に表示されることなくオンラインストアにコードを追加します。テーマエディタで埋め込みアプリの有効化、無効化、プレビュー、カスタマイズが可能です。
- カスタムコードを追加する：一部のアプリでは、テーマのコードにコードを直接挿入して、テーマに機能を追加します。アプリの設定またはテーマエディタを使用して、アプリをカスタマイズすることがあります。
このページの内容
アプリブロック
アプリは、セクション内のブロックとして、またテンプレートのセクションとして追加できます。これにより、ページのどこにでも使用したい場所に、アプリの機能を追加できます。アプリブロックは、テーマエディタで追加、削除、再配置、カスタマイズが可能です。
アプリブロックは、特定のページタイプとのみ互換性がある場合があります。たとえば、サイズチャートアプリは、商品ページとのみ互換性がある場合があります。
セクションで使用されているアプリブロック：
テンプレートのセクションとして使用されているアプリブロック：
セクションでのアプリブロックのサポート
一部のテーマセクションでは、アプリブロックがサポートされていない場合があります。どのテーマセクションでアプリブロックがサポートされているかを確認するには、テーマのドキュメントを参照するか、テーマの開発者にお問い合わせください。
セクションがアプリブロックをサポートしており、互換性のあるアプリをインストールしている場合、ブロックピッカーに [アプリ] セクションが表示されます。
セクションにアプリブロックを追加する
デスクトップ
管理画面から、[オンラインストア] > [テーマ] に移動します。
編集するテーマを見つけて、[テーマを編集] をクリックします。
アプリブロックを追加するページとセクションに移動します。
サイドバーで、[ブロックを追加] をクリックします。
ドロップダウンメニューの [アプリ] セクションから、セクションに追加するアプリブロックを選択するか、検索バーをクリックして検索語を入力し、インストール済みのアプリを検索します。
任意：[⠿] アイコンをクリックしてドラッグし、ブロックをページ上の別の利用可能な場所に移動します。また、利用可能な設定を使用してブロックをカスタマイズすることもできます。
[保存] をクリックします。
モバイル
Shopify アプリから、
アイコンをタップします。[販売チャネル] セクションで、[オンラインストア] をタップします。
[すべてのテーマを管理] をタップします。
編集するテーマを見つけて、[テーマを編集] をタップします。
[編集] をタップします。
アプリブロックを追加するページとセクションに移動します。
サイドバーで、[ブロックを追加] をタップします。
ドロップダウンメニューの [アプリ] セクションから、セクションに追加するアプリブロックを選択するか、検索バーをタップして検索語を入力し、インストール済みのアプリを検索します。
任意：⠿ アイコンをタップ & ドラッグして、ブロックをページ上の利用可能な別のロケーションに移動します。利用可能な設定を使用してブロックをカスタマイズすることもできます。
「保存」または ✓ をタップします。
テンプレートにアプリブロックを追加する
デスクトップ
管理画面から、[オンラインストア] > [テーマ] に移動します。
編集するテーマを見つけて、[テーマを編集] をクリックします。
アプリセクションを追加するページに移動します。
サイドバーで、[セクションを追加] をクリックします。
ドロップダウンメニューの [アプリ] セクションで、ページに追加するアプリを選択するか、[検索] バーをクリックしてテキストを入力し、インストール済みのアプリを検索します。
任意：[⠿] アイコンをクリックしてドラッグし、ブロックをページ上の別の利用可能な場所に移動します。また、利用可能な設定を使用してブロックをカスタマイズすることもできます。
[保存] をクリックします。
モバイル
Shopify アプリから、
アイコンをタップします。[販売チャネル] セクションで、[オンラインストア] をタップします。
[すべてのテーマを管理] をタップします。
編集するテーマを見つけて、[テーマを編集] をタップします。
[編集] をタップします。
アプリセクションを追加するページに移動します。
サイドバーで、[セクションを追加] をタップします。
ドロップダウンメニューの [アプリ] セクションで、ページに追加するアプリを選択するか、[検索] バーをタップしてテキストを入力し、インストール済みのアプリを検索します。
任意：⠿ アイコンをタップ & ドラッグして、ブロックをページ上の利用可能な別のロケーションに移動します。利用可能な設定を使用してブロックをカスタマイズすることもできます。
「保存」または ✓ をタップします。
アプリが [アプリ] セクションにブロックとして追加されます。セクションにアプリブロックをさらに追加できます。また、ページに複数の [アプリ] セクションを追加することもできます。
埋め込みアプリ
埋め込みアプリとは、テーマ内でフローティング表示やオーバーレイ表示されるか、お客様に表示されることなくオンラインストアにコードを追加する、アプリ提供の要素のことです。たとえば、ストアの隅に表示されるチャットバブルアプリや、分析アプリやトラッキングアプリなどが、埋め込みアプリとしてストアに追加される場合があります。埋め込みアプリは、テーマエディタで有効化、無効化、カスタマイズできます。埋め込みアプリは、どのテーマバージョンでも使用できます。
複数のマーケットがある場合、各マーケットに合わせて埋め込みアプリをカスタマイズできます。たとえば、北米のマーケットでのみチャットの埋め込みアプリを有効化したり、マーケットごとに異なる埋め込みアプリを設定したりできます。特定のマーケット向けに埋め込みアプリをカスタマイズするには、埋め込みアプリを有効化または設定する前に、テーマエディタのマーケットのドロップダウンメニューから該当するマーケットを選択します。特定のマーケット向けにテーマをカスタマイズする方法について詳しくは、特定のマーケットや Shopify B2B に合わせてテーマを調整するを参照してください。
埋め込みアプリを有効にする
デスクトップ
管理画面から、[オンラインストア] > [テーマ] に移動します。
編集するテーマを見つけて、[テーマを編集] をクリックします。
オプション: 特定のマーケット向けに埋め込みアプリをカスタマイズする場合は、マーケットのドロップダウンメニューをクリックし、カスタマイズするマーケットを選択します。マーケットを選択しない場合、変更はストアのデフォルトに適用されます。
サイドバーで、[埋め込みアプリ] アイコンをクリックします。
有効にする埋め込みアプリを選択するか、[検索] バーをクリックして検索ワードを入力し、インストール済みのアプリを検索します。
有効にする埋め込みアプリの横にあるトグルボタンをクリックして有効にします。
任意：埋め込みアプリ名の横にある展開アイコン
▸をクリックして、埋め込みアプリの設定を表示します。[保存] をクリックします。
ストアをプレビューして、埋め込みアプリのライブビューを表示します。
モバイル
Shopify アプリから、
アイコンをタップします。[販売チャネル] セクションで、[オンラインストア] をタップします。
[すべてのテーマを管理] をタップします。
編集するテーマを見つけて、[テーマを編集] をタップします。
オプション: 特定のマーケット向けに埋め込みアプリをカスタマイズする場合は、マーケットのドロップダウンメニューをタップし、カスタマイズするマーケットを選択します。マーケットを選択しない場合、変更はストアのデフォルトに適用されます。
[…］ > [埋め込みアプリ] の順にタップします。
有効にする埋め込みアプリを選択するか、検索バーに検索ワードを入力して、インストール済みのアプリを検索します。
有効にする埋め込みアプリの横にあるトグルボタンをタップして有効にします。
任意：埋め込みアプリ名の横にある展開アイコン
▸をタップして、埋め込みアプリの設定を表示します。[保存] をタップします。
ストアをプレビューして、埋め込みアプリのライブビューを表示します。
テーマコードに追加されるアプリ
アプリによっては、テーマに機能を追加するために、テーマのコードに直接コードを挿入するものがあります。アプリをインストールすると、テーマ内の表示したい場所にアプリの機能を追加するため、ご自身のコードを編集する手順を含むオンボーディング手順が示されることがあります。アプリの設定またはテーマエディタを使用して、アプリをカスタマイズできる場合があります。
テーマに カスタム Liquid セクション が用意されている場合は、テーマコードを直接編集する代わりに、テーマエディタでそのセクションにアプリコードを追加できることがあります。