CSS के साथ अपने Search Results को कैसे Customize करें

How to Customize Your Search Results with CSS

क्या आप अपने search results को शानदार बनाना चाहते हैं? यह guide आपको दिखाएगी कि CSS के साथ अपने product search results और AI summary sections को कैसे style करें। अगर आप CSS में नए हैं तो चिंता न करें—we’ve got you covered! और यदि आप पहले से इसमें सहज हैं, तो आपको अपनी customization को अगले स्तर तक ले जाने के लिए बहुत-सी उपयोगी tips मिलेंगी।

शुरुआत करें

Shoply AI Chat और AI Search, दोनों search results दिखा सकते हैं, इसलिए जो CSS customization options आप जोड़ेंगे वे दोनों पर लागू होंगे। नोट: AI Summary feature केवल Shoply AI Search में उपलब्ध है।

अपना CSS कहाँ जोड़ें

पूरी filter bar को छिपाने के लिए built-in control का उपयोग करें: Customize AI Search → Search filters पर जाएँ, Show filters in search results को बंद करें, और Save पर क्लिक करें। CSS की आवश्यकता नहीं है। अधिक जानकारी के लिए Hide Search Filters देखें।

Shoply app के admin console में Customize AI Search section पर जाएँ।
CSS styles for search elements text area खोजें
text area में अपना custom CSS code दर्ज करें
अपने changes लागू करने के लिए Save पर क्लिक करें

CSS की मूल बातें

CSS आपको colors, fonts, spacing, borders, और बहुत कुछ बदलने की अनुमति देता है। इसका basic syntax इस प्रकार है:

css


.class-name {
    property: value;
}

उदाहरण के लिए, text color को dark red में बदलने के लिए:

css


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

Shoply-specific CSS Classes को समझना

Shoply कुछ specific CSS classes प्रदान करता है जिनका उपयोग आप अपने search results के अलग-अलग हिस्सों को target करने के लिए कर सकते हैं। प्रत्येक class search result के एक specific element से संबंधित होती है।

Shoply ने इन classes के लिए कुछ default styles भी निर्धारित किए हैं। आप Chrome DevTools का उपयोग करके उन styles को inspect कर सकते हैं और हर class को search कर सकते हैं। यदि आपको default styles को override करना है, तो MDN CSS !important documentation में बताए अनुसार अपने CSS rules में !important declaration जोड़ें।

Product Card Classes

Customizing Product Cards in Search Results with CSS

container के लिए styles:

.shoply-product-image - product image को style करता है
.shoply-product-card - product card container को style करता है

text information के लिए styles:

.shoply-product-brand - product title के ऊपर दिखने वाले product brand/vendor name को style करता है
.shoply-product-name - product title/name को style करता है

price के लिए styles:

.shoply-product-price - product price को style करता है (discount लागू होने के बाद)
.shoply-product-original-price-before-discount - discount से पहले के original price को style करता है (default रूप से line-through decoration के साथ)
.shoply-product-discount-percent - discount percentage text को style करता है (default रूप से bold red text के रूप में प्रदर्शित)

action button के लिए styles:

.shoply-product-action-button - main action buttons को style करता है (Add to Cart, View Product, आदि)
.shoply-product-action-button-sold-out - product sold out होने पर action button को style करता है (disabled state)

नोट: Shoply app के admin console के Customize AI Search section में, आप configure कर सकते हैं कि customers action button पर क्लिक करने पर क्या हो—वे product को cart में जोड़ सकते हैं, product page पर redirect हो सकते हैं, या आप action button को पूरी तरह hide करना चुन सकते हैं।

AI Summary Classes

Customizing the AI Summary Section with CSS

.shoply-ai-summary-box - AI-generated summaries के container box को style करता है।
.shoply-ai-summary-button - AI summary generation को trigger करने वाले button को style करता है।

CSS के साथ Search Results में Product Cards को Customize करने के उदाहरण

Product Brand Styling बदलना

Product brand, product title के ऊपर दिखाई देता है। यहाँ कुछ सामान्य customizations दिए गए हैं:

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;
}

Product Title को Customize करना

Product name सबसे महत्वपूर्ण elements में से एक है। इसे अपने brand के अनुसार customize करें:

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;
}

Product Prices को Style करने के उदाहरण

Custom styling के साथ अपने prices को उभारें:

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;
}

Action Buttons को Customize करना

आपके action buttons (Add to Cart, View Product) को आपके store के design से मेल खाने के लिए style किया जा सकता है:

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;
}

Product Images को Style करना

Borders, shadows, या hover effects के साथ अपनी product images को बेहतर बनाएँ:

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 Section को Customize करने के उदाहरण

उन stores के लिए जो AI Search को enable करते हैं, AI Summary search results के शीर्ष पर दिखाई देगा और products को scroll करने से पहले ही search results के आधार पर तुरंत बताएगा कि क्या खरीदना चाहिए और क्यों।

आप app के admin console में Customize AI Search page से AI Summary को disable कर सकते हैं। आप नीचे दिखाए अनुसार CSS का उपयोग करके इसकी appearance को भी customize कर सकते हैं।

AI Summary Box को Style करना

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 Button को Customize करना

Default रूप से, screen space बचाने के लिए AI Summary को छोटा और संक्षिप्त रखा जाता है। Customers “AI Summary Button” पर क्लिक करके इसे expand कर सकते हैं और पूरी details देख सकते हैं। क्या आप इसे अपने brand से मेल खाना चाहते हैं? आप इस button को भी customize कर सकते हैं! नीचे दिए गए examples देखें।

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);
}

Troubleshooting

मेरे CSS changes दिखाई नहीं दे रहे हैं

Typos जाँचें: सुनिश्चित करें कि आपके CSS class names सही ढंग से लिखे गए हैं (वे .shoply- से शुरू होते हैं)
अपने browser cache को clear करें: कभी-कभी browsers पुराने styles को cache कर लेते हैं
CSS syntax जाँचें: सुनिश्चित करें कि आपके सभी CSS rules सही तरीके से } के साथ बंद हैं
!important का उपयोग करें: यदि styles लागू नहीं हो रहे हैं, तो default styles को override करने के लिए आपको !important जोड़ना पड़ सकता है:
css
```
.shoply-product-action-button {
    background-color: #ff0000 !important;
}
```

Mobile पर styles अलग दिखते हैं

कुछ styles के लिए mobile-specific adjustments की आवश्यकता हो सकती है। Media queries का उपयोग करें:

css


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

Default styles पर reset करना है

बस CSS text area को खाली करें और save करें। App default styling पर वापस लौट आएगा।

और मदद चाहिए?

यदि आपको CSS customization में अतिरिक्त सहायता चाहिए:

App settings में visual examples देखें (Product Card Preview और AI Summary Preview)
MDN Web Docs जैसे CSS documentation resources देखें
व्यक्तिगत सहायता के लिए हमारी support team से customer-obsession@shoplyai.ai पर संपर्क करें

Happy Customizing! 🎨

इन CSS classes के साथ, आपके पास अपने search results की appearance पर पूरा नियंत्रण है। Experiment करें, test करें, और ऐसा search experience बनाएँ जो आपके brand से पूरी तरह मेल खाता हो!