コンテンツにスキップ

Shopify

最終更新日:

このガイドでは、Quickchat AI ウィジェットを Shopify ストアに追加する方法をご紹介します。

完了時間:約 2 分


ステップ 1:テーマエディターを開く

Section titled “ステップ 1:テーマエディターを開く”

2 つの方法があります:

オプション A(推奨):Quickchat AI アプリから

Section titled “オプション A(推奨):Quickchat AI アプリから”

Quickchat AI AppYour websiteInstallタブ → Embed in your Shopify Storeをクリック。

これにより、アプリの埋め込みを有効にできるページでストアのテーマエディターが直接開きます。

オプション B:Shopify 管理画面から

Section titled “オプション B:Shopify 管理画面から”

Shopify AdminOnline Store → Themes → 現在のテーマでCustomizeをクリック。

スクリーンショット:Customizeボタンがハイライトされたテーマページ


ステップ 2:アプリの埋め込みを有効にする

Section titled “ステップ 2:アプリの埋め込みを有効にする”

テーマエディター内で、左サイドバーを開き、App embedsに移動します。

スクリーンショット:App embedsパネル

Quickchat AI Widgetを見つけて、オンに切り替えます。

スクリーンショット:テーマエディターでQuickchat AIを有効にする

その後、Save(右上)をクリックします。

スクリーンショット:テーマエディターのSaveボタン


ステップ 3:ストアフロントで確認

Section titled “ステップ 3:ストアフロントで確認”

ストアフロント(プレビューまたはライブサイト)を開き、ページの右下角にある Quickchat AI チャットバブルを探してください。

それで完了です!

Quickchat AI エージェントが Shopify ストアでライブになりました 🎉


ウィジェットスクリプトを手動で追加する方法

Section titled “ウィジェットスクリプトを手動で追加する方法”

Quickchat AI アプリで既に AI エージェントを構築しているため、Shopify アプリをインストールしたくない場合は、Shopify ストアに表示するシンプルなスクリプトを追加できます。

1. テーマコードエディターを開く

Section titled “1. テーマコードエディターを開く”
  1. Shopify 管理パネルに移動します。
  2. 左メニューでOnline Store → Themesをクリックします。

テーマコードを編集

  1. 「Current theme」セクションで、Customizeボタンの横の**三点(⋯)**をクリックします。
  2. ドロップダウンからEdit codeを選択します。

theme.liquidを開く

  1. コードエディターで、左側のlayoutフォルダーを展開します。
  2. theme.liquidをクリックして、テーマのメインレイアウトファイルを開きます。

theme.liquidを開く

  1. Quickchat Appで、Your Website → Installに移動します。
  2. 生成されたスクリプトをコピーします。
  3. theme.liquidファイルの最後の**</body>タグの直上**に貼り付けます。
<script>
window.__quickchat = {
host: "app.quickchat.ai",
init: "YOUR_AI_ID_HERE",
};
</script>