Shopifyアシスタントのデザインとフロントエンド

目次

アシスタントデザイン設定

チャットデザイン タブでは、チャットウィジェットの外観を完全にカスタマイズして、ストアのブランディングとシームレスに統合できるようにします。

基本アイデンティティとポジショニング

アイデンティティ: ヘッダーに表示される「アシスタント名」(例:「AIアシスタント」)を定義でき、オプションで「アシスタントアバターURL」を提供して、名前の横にカスタムロゴや画像を表示できます。

配置: 「画面上の位置」ドロップダウンを使用して、ウィジェットがストアフロントのどこに配置されるかを選択します(通常は右下)。

レイアウトと寸法

ピクセル(px)、ビューポート高さ(vh)、またはrem単位を使用して、チャットインターフェースの物理的なサイズと形状を正確に制御できます:

全体の「チャット幅」(例:400px)と「チャット最大高さ」(例:50vh)を調整します。.

「メッセージのパディング」で間隔を微調整し、「メッセージコンテナの角丸」(18px)や「チャットウィンドウの角丸」(12px)などの半径コントロールでインターフェースの曲率を調整します。.

「チャットフォントサイズ」、「チャットヘッダーテキストサイズ」、「チャットヘッダーアイコンサイズ」の設定でタイポグラフィのサイズを制御します。.

カラーテーマ

インターフェースには、チャットウィンドウのすべての要素を変更するための豊富な16進数コードピッカーが用意されています。.

背景: 主要な「チャット背景」(#FFFFFF)、「顧客メッセージ背景」、「アシスタントメッセージ背景」(#000000)をカスタマイズできます。「ウェルカムテキストエリア背景」や「FAQ背景色」(#F9FAFB)など、特定のセクションの色合いも調整できます。

ボーダー: メッセージフィールド、FAQボックス、リンクの繊細な輪郭を定義し、統一感のある外観を作成します。

よくある質問

FAQタブでは、ユーザーが最初のメッセージを入力する前に表示される定型質問を作成できます。これにより、AI生成を必要とせずに一般的な問い合わせを即座に解決できます。.

「+ FAQを追加」をクリックして新しいエントリを作成します。.

各エントリについて、共通の「質問」(例:「この商品を米国に発送できますか?」)を入力し、リッチテキストエディタ(太字、斜体、下線、取り消し線)を使用して静的な「回答」をフォーマットします。.

質問を並べ替えるにはドラッグアンドドロップするか、鉛筆とゴミ箱のアイコンを使用して編集または削除できます。.

クイックリンク

リンクタブでは、チャットのウェルカム画面の下部に直接ナビゲーションボタンを追加できます。これは、ユーザーを代替のサポートチャネルや重要なストアページに誘導するのに最適です。.

グリッドレイアウト: まず、「グリッド列数」を選択してリンクの表示方法を定義します(例:3に設定すると横一列に表示されます)。

リンクの追加: 「+ リンクを追加」をクリックして新しいボタンを作成します。「リンクタイトル」(「WhatsApp」や「メール」など)を入力し、正確な「リンクURL」(メールの場合はmailto:、直接電話番号などの標準形式を使用)を入力します。

アイコン: 封筒、電話、地球儀、カレンダーなど、リンクを視覚的に表現するためのベクターアイコンの内蔵ライブラリから選択できます。または、「カスタム画像」の下にある「ファイルを選択」ボタンを使用して、独自のアイコンをアップロードすることもできます。

Shopifyでもっと売り上げを伸ばす準備はできましたか?

ShopifyストアにLiliwiをインストールすると、当社チームによる無料セットアップが受けられます。. 

フルサービスを最低$1からご利用いただけます。.