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

このページはJan 19, 2022に印刷されています。最新のバージョンについては、https://help.shopify.com/ja/manual/online-store/themes/theme-structure/extend/appsをご覧ください。

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

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

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

アプリブロック

アプリブロックを、セクション内のブロックとして、またテンプレート内のセクションとして追加できる場合があります。これにより、アプリの機能をページ上の使用したい場所に追加することができます。テーマエディタを使用して、アプリブロックの追加、削除、位置変更、およびカスタマイズを行うことができます。一部のアプリブロックは、特定のページタイプとのみ互換性があります。たとえば、サイズチャートアプリは、商品ページとのみ互換性があります。

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

An app block being used in a section.

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

An app block being used as a section in a template.

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

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

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

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

  1. 管理画面から [オンラインストア] > [テーマ] の順に移動します。
  2. 編集するテーマを見つけて、[カスタマイズする] をクリックします。
  1. Shopifyアプリから [ストア] をタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [テーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
  5. [編集] をタップします。
  1. Shopifyアプリから [ストア] をタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [テーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
  5. [編集] をタップします。
  1. アプリブロックを追加するページとセクションに移動します。
  2. [ブロックを追加] をクリックします。
  3. ドロップダウンメニューから、[アプリ] セクションで、セクションに追加するアプリブロックを選択するか、[検索] バーをクリックしてインストール済みのアプリを検索するワードを入力します。
  4. オプション: セクション内の掲載したい位置にアプリブロックを移動し、利用可能な設定を使用してブロックをカスタマイズします。
  5. [保存] をクリックします。

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

  1. 管理画面から [オンラインストア] > [テーマ] の順に移動します。
  2. 編集するテーマを見つけて、[カスタマイズする] をクリックします。
  1. Shopifyアプリから [ストア] をタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [テーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
  5. [編集] をタップします。
  1. Shopifyアプリから [ストア] をタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [テーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
  5. [編集] をタップします。
  1. アプリセクションを追加するページに移動します。
  2. [セクションを追加する] をクリックします。
  3. ドロップダウンメニューから、[アプリ] セクションで、ページに追加するアプリを選択するか、[検索] バーをクリックし、インストール済みのアプリを検索するテキストを入力します。
  4. オプション: ページ上の掲載したい位置にアプリセクションを移動し、利用可能な設定を使用してブロックをカスタマイズします。
  5. [保存] をクリックします。

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

埋め込みアプリ

埋め込みアプリは、アプリが提供する要素で、テーマ上にオーバーレイとしてフロート表示されます。お客様には非表示のまま、オンラインストアにコードを追加することもできます。たとえば、ストアの隅に表示されるチャットバブルアプリや、分析や追跡を行うアプリを埋め込みアプリとしてストアに追加できます。テーマエディタを使用して、埋め込みアプリを有効化、無効化、カスタマイズできます。埋め込みアプリは、どのテーマバージョンでも使用できます。

An app embed block.

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

  1. 管理画面から [オンラインストア] > [テーマ] の順に移動します。
  2. 編集するテーマを見つけて、[カスタマイズする] をクリックします。
  1. Shopifyアプリから [ストア] をタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [テーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
  5. [編集] をタップします。
  1. Shopifyアプリから [ストア] をタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [テーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
  5. [編集] をタップします。
  1. [テーマ設定] をクリックします。
  2. [埋め込みアプリ] タブをクリックします。
  3. 有効化する埋め込みアプリを選択するか、[検索] バーをクリックし、インストール済みのアプリを検索するワードを入力します。
  4. 有効にする埋め込みアプリの横にある切り替えボタンをクリックして、アプリを有効にします。
  5. オプション: 埋め込みアプリ名の横にある展開アイコン▸をクリックして、埋め込みアプリの設定を表示します。

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

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

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

Shopifyで販売を開始する準備はできていますか?

無料体験を試す