ログイン
無料体験を始める

アプリでテーマを拡張する

アプリをインストールして、テーマに機能を追加して拡張できます。アプリはShopify App Storeで見つけることができます。

以下の方法でアプリをテーマと統合できます。

  • アプリブロックとして: アプリブロックを使用して、テーマ内の使用したい場所にアプリ機能を追加することができます。テーマエディタを使用して、アプリブロックの追加、削除、プレビュー、位置変更、およびカスタマイズを行うことができます。
  • 埋め込み式アプリの使用：埋め込み式アプリは、テーマのオーバーレイとして (フロート) 表示させたり、お客様に見えることなくオンラインストアにコードを追加したりできる、アプリ提供の要素です。埋め込み式アプリは、テーマエディタを使用して有効化、無効化、プレビュー、カスタマイズできます。
  • カスタムコードを追加する: 一部のアプリでは、テーマコードに直接コードを入力し、テーマに機能を追加します。アプリ設定を使用して、またはテーマエディタを使用してアプリをカスタマイズすることができます。

目次

アプリブロック

アプリは、セクションのブロックとして、またテンプレートのセクションとして追加できます。これにより、ページ上の使用したい場所にアプリの機能を正確に追加できます。テーマエディタを使用して、アプリブロックの追加、削除、調整、カスタマイズを行うことができます。

アプリブロックは、特定のページタイプとのみ互換性がある場合があります。たとえば、サイズ表のアプリは、商品ページとのみ互換性がある場合があります。

セクションで使用されているアプリブロック:

セクションで使用されているアプリブロック。

テンプレートのセクションとして使用されているアプリブロック:

テンプレートのセクションとして使用されているアプリブロック。

アプリブロックに対応しているセクション

一部のテーマセクションは、アプリブロックに対応していない場合があります。どのテーマセクションがアプリブロックに対応しているかを確認するには、テーマのドキュメントを参照するか、テーマ開発者にお問い合わせください。

セクションがアプリブロックに対応しており、互換性のあるアプリをインストール済みの場合、ブロックピッカーに [アプリ] セクションが表示されます。

セクションにアプリブロックを追加する

デスクトップ
  1. 管理画面から [オンラインストア] > [テーマ] に移動します。
  2. 編集するテーマを見つけて、[カスタマイズする] をクリックします。
  3. アプリブロックを追加するページとセクションに移動します。
  4. サイドバーで、[ブロックを追加] をクリックします。
  5. ドロップダウンメニューから、[アプリ] セクションで、セクションに追加するアプリブロックを選択するか、[検索] バーをクリックしてインストール済みのアプリを検索するワードを入力します。
  6. オプション：[⠿] iconをクリックしてドラッグし、ブロックをページの空いている別のロケーションに移動します。利用可能な設定を使用して、ブロックをカスタマイズすることもできます。
  7. [保存] をクリックします。
iPhone
  1. Shopifyアプリで [...] ボタンをタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [すべてのテーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
  5. [編集] をタップします。
  6. アプリブロックを追加するページとセクションに移動します。
  7. サイドバーで、[ブロックを追加] をタップします。
  8. ドロップダウンメニューの [アプリ] セクションで、セクションに追加するアプリブロックを選択するか、[検索] バーをタップしてインストール済みのアプリを検索するキーワードを入力します。
  9. オプション：[⠿] iconをタップしてドラッグし、ブロックをページの空いている別のロケーションに移動します。利用可能な設定を使用して、ブロックをカスタマイズすることもできます。
  10. [保存] をタップします。
Android
  1. Shopifyアプリで [...] ボタンをタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [すべてのテーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
  5. [編集] をタップします。
  6. アプリブロックを追加するページとセクションに移動します。
  7. サイドバーで、[ブロックを追加] をタップします。
  8. ドロップダウンメニューの [アプリ] セクションで、セクションに追加するアプリブロックを選択するか、[検索] バーをタップしてインストール済みのアプリを検索するキーワードを入力します。
  9. オプション：[⠿] iconをタップしてドラッグし、ブロックをページの空いている別のロケーションに移動します。利用可能な設定を使用して、ブロックをカスタマイズすることもできます。
  10. [保存] をタップします。

テンプレートにアプリブロックを追加する

デスクトップ
  1. 管理画面から [オンラインストア] > [テーマ] に移動します。
  2. 編集するテーマを見つけて、[カスタマイズする] をクリックします。
  3. アプリセクションを追加するページに移動します。
  4. サイドバーで、[セクションを追加] をクリックします。
  5. ドロップダウンメニューから、[アプリ] セクションで、ページに追加するアプリを選択するか、[検索] バーをクリックし、インストール済みのアプリを検索するテキストを入力します。
  6. オプション：[⠿] iconをクリックしてドラッグし、ブロックをページの空いている別のロケーションに移動します。利用可能な設定を使用して、ブロックをカスタマイズすることもできます。
  7. [保存] をクリックします。
iPhone
  1. Shopifyアプリで [...] ボタンをタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [すべてのテーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
  5. [編集] をタップします。
  6. アプリセクションを追加するページに移動します。
  7. サイドバーで、[セクションを追加] をタップします。
  8. ドロップダウンメニューから、[アプリ] セクションで、ページに追加するアプリを選択するか、[検索] バーをタップし、インストール済みのアプリを検索するテキストを入力します。
  9. オプション：[⠿] iconをタップしてドラッグし、ブロックをページの空いている別のロケーションに移動します。利用可能な設定を使用して、ブロックをカスタマイズすることもできます。
  10. [保存] をタップします。
Android
  1. Shopifyアプリで [...] ボタンをタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [すべてのテーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
  5. [編集] をタップします。
  6. アプリセクションを追加するページに移動します。
  7. サイドバーで、[セクションを追加] をタップします。
  8. ドロップダウンメニューから、[アプリ] セクションで、ページに追加するアプリを選択するか、[検索] バーをタップし、インストール済みのアプリを検索するテキストを入力します。
  9. オプション：[⠿] iconをタップしてドラッグし、ブロックをページの空いている別のロケーションに移動します。利用可能な設定を使用して、ブロックをカスタマイズすることもできます。
  10. [保存] をタップします。

アプリは [アプリ] セクションでブロックとして追加されます。セクションにはアプリブロックをさらに追加できます。1つのページには、複数の [アプリ] セクションを追加することもできます。

埋め込みアプリ

埋め込み式アプリは、テーマのオーバーレイとして (フロート) 表示させたり、お客様に見えることなくオンラインストアにコードを追加したりできる、アプリ提供の要素です。たとえば、ストアのオンラインページの隅にチャットアプリ「bubble」を表示させたり、ストア分析アプリや追跡アプリを埋め込み式アプリとしてストアに追加したりすることができます。埋め込み式アプリは、テーマエディタを使用して有効化、無効化、カスタマイズできます。埋め込み式アプリは、どのテーマバージョンでも使用可能です。

埋め込みアプリブロック。

埋め込みアプリを有効にする

デスクトップ
  1. 管理画面から [オンラインストア] > [テーマ] に移動します。
  2. 編集するテーマを見つけて、[カスタマイズする] をクリックします。
  3. サイドバーで、[埋め込みアプリ] アイコンをクリックします。
  4. 有効化する埋め込みアプリを選択するか、[検索] バーをクリックし、インストール済みのアプリを検索するワードを入力します。
  5. 有効にする埋め込みアプリの横にあるトグルボタンをクリックして、アプリを有効にします。
  6. 任意：埋め込みアプリ名の横にある展開アイコン [▸] をクリックして、埋め込みアプリの設定を表示します。
  7. [保存] をクリックします。
  8. ストアをプレビューして埋め込み式アプリをライブ表示します。
iPhone
  1. Shopifyアプリで [...] ボタンをタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [すべてのテーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
  5. […] > [埋め込みアプリ] の順にタップします。
  6. 有効にする埋め込みアプリを選択するか、検索バーに検索ワードを入力して、インストール済みのアプリを検索します。
  7. 有効にする埋め込みアプリの横にあるトグルボタンをタップして、アプリを有効にします。
  8. 任意：埋め込みアプリ名の横にある展開アイコン [▸] をクリックして、埋め込みアプリの設定を表示します。
  9. [保存] をタップします。
  10. ストアをプレビューして埋め込み式アプリをライブ表示します。
Android
  1. Shopifyアプリで [...] ボタンをタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [すべてのテーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
  5. […] > [埋め込みアプリ] の順にタップします。
  6. 有効にする埋め込みアプリを選択するか、検索バーに検索ワードを入力して、インストール済みのアプリを検索します。
  7. 有効にする埋め込みアプリの横にあるトグルボタンをタップして、アプリを有効にします。
  8. 任意：埋め込みアプリ名の横にある展開アイコン [▸] をクリックして、埋め込みアプリの設定を表示します。
  9. [保存] をタップします。
  10. ストアをプレビューして埋め込み式アプリをライブ表示します。

テーマコードに追加されたアプリ

一部のアプリでは、テーマコードに直接コードを入力し、テーマに機能を追加します。アプリをインストールすると、コードを編集してテーマの表示したい場所にアプリ機能を追加する方法などについて、オンボーディング指示が与えられる場合があります。アプリの設定またはテーマエディタを使用して、アプリをカスタマイズすることができます。

利用しているテーマに [カスタムLiquid] セクションがある場合、テーマコードを直接編集する代わりに、アプリコードをテーマエディタの [カスタムLiquid] セクションに追加することができる場合があります。

お探しの情報が見つかりませんか？いつでもお気軽にお問い合わせください。