Shoply AI
デモ
導入事例
料金
ブログ
FAQ
動画
パートナーシップ
会社情報
デモ
導入事例
料金
Shopifyにインストール
あなたのWebサイトにインストール
ブログ
FAQ
動画
パートナーシップ
会社情報
言語

AI Searchの表示をカスタマイズする方法

管理コントロールとCSSでAI Searchの外観をカスタマイズする方法

Shoply AI の検索結果をカスタマイズする方法は 2 つあります。

  • 組み込みオプション: まずは Shoply AI Admin Console のコントロールを使って、コードを書かずに要約、フィルター、ボタン、色、商品レイアウトを変更できます。組み込みオプションとプレビューを見る
  • カスタム CSS: これらのコントロールだけでは希望するデザインにならない場合は、Web ページのスタイル言語である CSS を使って、フォント、余白、枠線、そのほかの見た目の細部を調整できます。組み込み設定と併用することも可能です。CSS ガイドへ移動
Customize AI Search includes built-in summary controls and a preview before you use custom CSS.
Customize AI Search includes built-in summary controls and a preview before you use custom CSS. Click the screenshot to view it at full size.

おそらく CSS はまったく不要です

Shopify を使っている場合でも、他の Web サイトプラットフォームを使っている場合でも、検索レイアウトや見た目の変更のほとんどは、Shoply AI Admin Console の Customize AI Search ですでに利用できます。まずはこれらの組み込みオプションを試し、その後、管理画面で Save をクリックして選択内容を適用してください。これらのコントロールで対応できないスタイリングにだけ CSS を使いましょう。

以下のインタラクティブな例では、管理画面と同じプレビューを使用しています。ここで試せるデモであり、あなたのストアは変更されません。

  • AI Summary: 要約のオン・オフを切り替えたり、商品結果の上または下に表示するかを選べます。
AI Summary preview
AI Summary

AI Summary appears automatically above the products and grows as the text is generated. Illustrative summary; actual text depends on the search.
  • 検索フィルター: フィルターバーの表示・非表示を切り替え、フィルターを上部、左側、またはフローティングパネルに配置できます。左側レイアウトは、小さい画面では結果の上に移動します。チャット結果への共通の影響については、検索フィルターの表示設定 を参照してください。
Layout preview
Search productsPriceBrandSize
Filters appear in a row above the products.
  • 商品アクションボタンと色: Add to Cart、View Product、または No Button を選べます。ボタンの背景色と文字色を選び、評価スターの色もストアに合わせて変更できます。
Action Button preview
Everyday winter jacket
$129.00

Customers can add products to their cart directly from search results. Try the example button.

Illustrative product. Preview clicks do not change a real cart or leave this page.
  • 1 行あたりの商品数: デスクトップでは 3 列または 4 列、モバイルでは 1 列または 2 列を選べます。列数を少なくすると、各商品画像により広い表示スペースを確保できます。
Product
Product
Product
Product
Product
  • 表示する商品の合計数: 小さいモバイル画面、大きいモバイル画面、デスクトップ向けに、それぞれ別々の商品数を設定できます。管理画面では 3、4、6、8、9、12、15、16、18、20 件の商品を選択できます。これは列数ではなく、結果件数を制御します。

それでもカスタムデザインが必要な場合は、以下の CSS ガイドに進んでください。

はじめに

組み込みオプションだけでは希望する見た目にならない場合は、カスタム CSS を使って検索結果を細かく調整できます。

Shoply AI Chat と AI Search はどちらも検索結果を表示できるため、追加した CSS カスタマイズオプションはその両方に適用されます。なお、AI Summary 機能は Shoply AI Search でのみ利用できます。

まず、スタイリングする前に AI Search を有効化 して、実際の検索結果で変更内容をプレビューできるようにしてください。

CSS を追加する場所

フィルターバー全体を非表示にするには、組み込みコントロールを使用してください。Customize AI Search → Search filters に移動し、Show filters in search results をオフにして Save をクリックします。CSS は不要です。詳しくは Hide Search Filters  をご覧ください。

  1. Shoply アプリの管理コンソールで Customize AI Search セクションに移動します。
  2. CSS styles for search elements のテキストエリアを見つけます
  3. テキストエリアにカスタム CSS コードを入力します
  4. Save をクリックして変更を適用します

CSS の基本

CSS を使うと、色、フォント、余白、枠線などを変更できます。基本構文は次のとおりです。

css
.class-name {
    property: value;
}

たとえば、文字色をダークレッドに変更するには次のようにします。

css
.shoply-product-name {
    color:rgb(82, 2, 2);
}

Shoply 固有の CSS クラスを理解する

Shoply では、検索結果のさまざまな部分を対象にできる固有の CSS クラスを提供しています。各クラスは、検索結果内の特定の要素に対応しています。

Shoply はこれらのクラスに対して、いくつかのデフォルトスタイルも定義しています。これらのスタイルは Chrome DevTools  で確認し、各クラスを検索できます。デフォルトスタイルを上書きする必要がある場合は、MDN CSS !important documentation  で説明されているように、CSS ルールに !important 宣言を追加してください。

商品カードのクラス

Customizing Product Cards in Search Results with CSS

コンテナ用のスタイル:

  • .shoply-product-image - 商品画像のスタイル
  • .shoply-product-card - 商品カードコンテナのスタイル

テキスト情報用のスタイル:

  • .shoply-product-brand - 商品タイトルの上に表示される商品ブランド名／販売元名のスタイル
  • .shoply-product-name - 商品タイトル／商品名のスタイル

価格用のスタイル:

  • .shoply-product-price - 商品価格のスタイル（割引適用後）
  • .shoply-product-original-price-before-discount - 割引前の元価格のスタイル（デフォルトでは取り消し線付き）
  • .shoply-product-discount-percent - 割引率テキストのスタイル（デフォルトでは太字の赤文字で表示）

アクションボタン用のスタイル:

  • .shoply-product-action-button - メインのアクションボタン（Add to Cart、View Product など）のスタイル
  • .shoply-product-action-button-sold-out - 商品が売り切れの場合のアクションボタンのスタイル（無効状態）

注: Shoply アプリの管理コンソールにある Customize AI Search セクションでは、顧客がアクションボタンをクリックしたときの動作を設定できます。商品をカートに追加する、商品ページへリダイレクトする、またはアクションボタン自体を非表示にすることが可能です。

AI Summary のクラス

Customizing the AI Summary Section with CSS
  • .shoply-ai-summary-box - AI 生成要約のコンテナボックスのスタイル。
  • .shoply-ai-summary-button - AI Summary の生成をトリガーするボタンのスタイル。

CSS で検索結果の商品カードをカスタマイズする例

商品ブランドのスタイルを変更する

商品ブランドは商品タイトルの上に表示されます。よくあるカスタマイズ例を紹介します。

css
/* Make brand name smaller and gray */
.shoply-product-brand {
    font-size: 11px;
    color: #888888;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

商品タイトルをカスタマイズする

商品名は最も重要な要素のひとつです。ブランドに合わせてカスタマイズしましょう。

css
/* Make product title bold and larger */
.shoply-product-name {
    font-size: 18px;
    font-weight: 600;
    color: #1a1a1a;
    line-height: 1.4;
    margin-bottom: 8px;
}
 
/* Add hover effect */
.shoply-product-name:hover {
    color: #0066cc;
    text-decoration: underline;
}

商品価格のスタイリング例

カスタムスタイルで価格をより目立たせましょう。

css
/* Style the current price (after discount) */
.shoply-product-price {
    font-size: 20px;
    font-weight: 700;
    color: #e74c3c;
    margin-top: 10px;
}
 
/* Style the original price (before discount) - greyed out with strikethrough */
.shoply-product-original-price-before-discount {
    font-size: 14px;
    color: #999999;
    margin-left: 8px;
    text-decoration: line-through;
}

アクションボタンをカスタマイズする

アクションボタン（Add to Cart、View Product）は、ストアのデザインに合わせてスタイリングできます。

css
/* Style the main action button with blue background, white text, rounded corners, and smooth transitions */
.shoply-product-action-button {
    background-color: #0066cc !important;
    color: #ffffff !important;
    border-radius: 6px;
    padding: 12px 24px;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s ease;
    border: none;
}
 
/* Add hover effect - darker blue background, slight lift, and shadow */
.shoply-product-action-button:hover {
    background-color: #0052a3 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 102, 204, 0.3);
}
 
/* Style sold-out button - grey background, darker grey text, disabled cursor, and reduced opacity */
.shoply-product-action-button-sold-out {
    background-color: #cccccc !important;
    color: #666666 !important;
    cursor: not-allowed;
    opacity: 0.6;
}

商品画像をスタイリングする

枠線、シャドウ、ホバー効果で商品画像をより魅力的に見せましょう。

css
/* Add border and shadow to product images */
.shoply-product-image {
    border-radius: 8px;
    border: 2px solid #f0f0f0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}
 
/* Add hover effect of the product image*/
.shoply-product-image:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

AI Summary セクションをカスタマイズする例

AI Search を有効にしているストアでは、AI Summary が検索結果の上部に表示され、顧客が商品一覧をスクロールする前に、検索結果に基づいて「何を買うべきか」と「その理由」を即座に説明します。

アプリの管理コンソールにある Customize AI Search ページで AI Summary を無効にすることもできます。また、以下のように CSS を使って見た目をカスタマイズすることも可能です。

AI Summary ボックスをスタイリングする

css
    /* Style the AI summary box with purple gradient background, white text, rounded corners, shadow, and semi-transparent border */
.shoply-ai-summary-box {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #ffffff;
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
}
 
/* Alternative: Light theme - light gray background with subtle border and shadow */
.shoply-ai-summary-box {
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

AI Summary ボタンをカスタマイズする

デフォルトでは、AI Summary は画面スペースを節約するため、短く簡潔に保たれています。顧客は “AI Summary Button” をクリックして展開し、詳細をすべて確認できます。ブランドに合わせたいですか？ このボタンもカスタマイズできます。以下の例をご覧ください。

css
/* Customize the summary button */
.shoply-ai-summary-button {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: #ffffff !important;
    border: none;
    border-radius: 20px;
    padding: 10px 20px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}
 
/* Add hover effect */
.shoply-ai-summary-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

トラブルシューティング

CSS の変更が表示されない

  1. タイプミスを確認する: CSS クラス名が正しく綴られているか確認してください（.shoply- で始まります）
  2. ブラウザキャッシュをクリアする: ブラウザが古いスタイルをキャッシュしていることがあります
  3. CSS 構文を確認する: すべての CSS ルールが } で正しく閉じられていることを確認してください
  4. !important を使う: スタイルが適用されない場合は、デフォルトスタイルを上書きするために !important の追加が必要なことがあります:
    css
    .shoply-product-action-button {
    background-color: #ff0000 !important;
}

モバイルでスタイルの見え方が異なる

一部のスタイルは、モバイル向けに個別の調整が必要な場合があります。media query を使用してください。

css
@media (max-width: 768px) {
    .shoply-product-name {
        font-size: 14px;
    }
}

デフォルトスタイルに戻したい

CSS テキストエリアの内容を空にして保存するだけです。アプリはデフォルトのスタイルに戻ります。

さらにサポートが必要ですか？

CSS のカスタマイズについて追加のサポートが必要な場合:

  1. アプリ設定のビジュアル例（Product Card Preview と AI Summary Preview）を確認する
  2. MDN Web Docs  のような CSS ドキュメント資料を参照する
  3. 個別サポートが必要な場合は customer-obsession@shoplyai.ai までサポートチームにお問い合わせください

カスタマイズを楽しんでください！ 🎨

これらの CSS クラスを使えば、検索結果の見た目を完全にコントロールできます。ぜひ試して、検証して、ブランドにぴったり合う検索体験を作り上げてください！