CSSで検索結果をカスタマイズする方法
検索結果を魅力的な見た目にしたいですか？このガイドでは、CSS を使って商品検索結果や AI 要約セクションをスタイリングする方法をご紹介します。CSS が初めてでも心配いりません。しっかりサポートします！すでに慣れている方にも、カスタマイズをさらに一段上のレベルに引き上げるためのヒントがたくさんあります。
はじめに
Shoply AI Chat と AI Search はどちらも検索結果を表示できるため、追加した CSS のカスタマイズオプションは両方に適用されます。なお、AI Summary 機能は Shoply AI Search でのみ利用できます。
CSS を追加する場所
フィルターバー全体を非表示にするには、組み込みの設定を使用します：Customize AI Search → Search filters に移動し、Show filters in search results をオフにして、Save をクリックしてください。CSS は不要です。詳細は Hide Search Filters をご覧ください。
- Shoply アプリの管理コンソールで Customize AI Search セクションに移動します。
- CSS styles for search elements テキストエリアを見つけます
- テキストエリアにカスタム CSS コードを入力します
- Save をクリックして変更を適用します
CSS の基本
CSS を使うと、色、フォント、余白、境界線などを変更できます。基本構文は次のとおりです：
.class-name {
property: value;
}たとえば、テキストの色を濃い赤に変更するには次のようにします：
.shoply-product-name {
color:rgb(82, 2, 2);
}Shoply 固有の CSS クラスを理解する
Shoply では、検索結果のさまざまな部分を指定するために使える専用の CSS クラスを提供しています。各クラスは検索結果内の特定の要素に対応しています。
また、Shoply はこれらのクラスに対していくつかのデフォルトスタイルも定義しています。これらのスタイルは Chrome DevTools を使って確認し、各クラスを検索できます。デフォルトスタイルを上書きする必要がある場合は、MDN CSS !important documentation で説明されているように、CSS ルールに !important 宣言を追加してください。
商品カードのクラス
コンテナのスタイル：
.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 のクラス
.shoply-ai-summary-box- AI によって生成された要約のコンテナボックスのスタイル。.shoply-ai-summary-button- AI 要約の生成をトリガーするボタンのスタイル。
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;
}商品タイトルをカスタマイズする
商品名は最も重要な要素のひとつです。ブランドに合わせてカスタマイズしましょう：
/* 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;
}商品価格のスタイリング例
カスタムスタイルで価格をより目立たせましょう：
/* 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）は、ストアのデザインに合わせてスタイリングできます：
/* 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;
}商品画像をスタイリングする
境界線、影、ホバー効果などで商品画像をより魅力的に見せましょう：
/* 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 ボックスをスタイリングする
/* 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” をクリックして展開し、詳細全体を確認できます。これをブランドに合わせたいですか？このボタンもカスタマイズできます！以下の例をご覧ください。
/* 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 の変更が表示されない
- タイプミスを確認する: CSS クラス名が正しく綴られているか確認してください（
.shoply-で始まります） - ブラウザのキャッシュをクリアする: ブラウザが古いスタイルをキャッシュしていることがあります
- CSS 構文を確認する: すべての CSS ルールが
}で正しく閉じられていることを確認してください !importantを使う: スタイルが適用されない場合は、デフォルトスタイルを上書きするために!importantを追加する必要があるかもしれません：css.shoply-product-action-button { background-color: #ff0000 !important; }
モバイルでスタイルの見え方が異なる
一部のスタイルでは、モバイル向けの調整が必要になる場合があります。メディアクエリを使用してください：
@media (max-width: 768px) {
.shoply-product-name {
font-size: 14px;
}
}デフォルトスタイルに戻したい
CSS テキストエリアを空にして保存するだけです。アプリはデフォルトのスタイリングに戻ります。
さらにサポートが必要ですか？
CSS のカスタマイズについて追加のサポートが必要な場合は、以下をご利用ください：
- アプリ設定内のビジュアル例を確認する（Product Card Preview と AI Summary Preview）
- MDN Web Docs などの CSS ドキュメントを参照する
- 個別サポートが必要な場合は、customer-obsession@shoplyai.ai までサポートチームへお問い合わせください
カスタマイズを楽しんでください！ 🎨
これらの CSS クラスを使えば、検索結果の見た目を完全にコントロールできます。いろいろ試して、テストして、ブランドにぴったり合う検索体験を作り上げましょう！