CSSで検索結果をカスタマイズする方法

How to Customize Your Search Results with CSS

検索結果を魅力的に見せる準備はできましたか？このガイドでは、CSS を使って商品検索結果や AI 要約セクションをスタイリングする方法をご紹介します。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 をご覧ください。

Shoply アプリの管理コンソールで Customize AI Search セクションに移動します。
CSS styles for search elements のテキストエリアを見つけます
テキストエリアにカスタム CSS コードを入力します
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 ドキュメントで説明されているように、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 が検索結果の上部に表示され、顧客が商品をスクロールして見る前に、検索結果に基づいて「何を買うべきか」「その理由」を即座に説明します。

AI Summary は、アプリの管理コンソールにある Customize AI Search ページで無効にできます。また、以下のように 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 の変更が表示されない

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

モバイルで見た目が異なる

スタイルによっては、モバイル向けの個別調整が必要になる場合があります。メディアクエリを使用してください：

css


@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 クラスを使えば、検索結果の見た目を完全にコントロールできます。ぜひ試して、テストして、ブランドにぴったり合う検索体験を作り上げてください！