Arama Sonuçlarınızı CSS ile Nasıl Özelleştirirsiniz

How to Customize Your Search Results with CSS

Arama sonuçlarınızın harika görünmesini sağlamaya hazır mısınız? Bu rehber, ürün arama sonuçlarınızı ve AI özet bölümlerinizi CSS ile nasıl stillendireceğinizi gösterecek. CSS’e yeniyseniz endişelenmeyin—we’ve got you covered! Zaten rahat kullanıyorsanız da özelleştirmeyi bir üst seviyeye taşıyacak birçok ipucu bulacaksınız.

Başlarken

Hem Shoply AI Chat hem de AI Search arama sonuçlarını gösterebilir; bu nedenle eklediğiniz CSS özelleştirme seçenekleri her ikisine de uygulanır. Not: AI Summary özelliği yalnızca Shoply AI Search içinde kullanılabilir.

CSS’inizi Nereye Eklemelisiniz

Filtre çubuğunun tamamını gizlemek için yerleşik denetimi kullanın: Customize AI Search → Search filters bölümüne gidin, Show filters in search results seçeneğini kapatın ve Save düğmesine tıklayın. CSS gerekmez. Ayrıntılar için Hide Search Filters sayfasına bakın.

Shoply uygulamasının yönetici konsolunda Customize AI Search bölümüne gidin.
CSS styles for search elements metin alanını bulun
Özel CSS kodunuzu metin alanına girin
Değişikliklerinizi uygulamak için Save düğmesine tıklayın

CSS Temelleri

CSS; renkleri, yazı tiplerini, boşlukları, kenarlıkları ve daha fazlasını değiştirmenizi sağlar. Temel sözdizimi şöyledir:

css


.class-name {
    property: value;
}

Örneğin, metin rengini koyu kırmızı yapmak için:

css


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

Shoply’ye Özel CSS Sınıflarını Anlamak

Shoply, arama sonuçlarınızın farklı bölümlerini hedeflemek için kullanabileceğiniz özel CSS sınıfları sağlar. Her sınıf, arama sonucundaki belirli bir öğeye karşılık gelir.

Shoply ayrıca bu sınıflar için bazı varsayılan stiller tanımlamıştır. Bu stilleri Chrome DevTools kullanarak inceleyebilir ve sınıfların her birini aratabilirsiniz. Varsayılan stilleri geçersiz kılmanız gerekiyorsa, MDN CSS !important documentation içinde açıklandığı gibi CSS kurallarınıza !important bildirimi ekleyin.

Ürün Kartı Sınıfları

Customizing Product Cards in Search Results with CSS

Kapsayıcı için stiller:

.shoply-product-image - Ürün görselini stillendirir
.shoply-product-card - Ürün kartı kapsayıcısını stillendirir

Metin bilgileri için stiller:

.shoply-product-brand - Ürün başlığının üstünde gösterilen ürün marka/satıcı adını stillendirir
.shoply-product-name - Ürün başlığını/adını stillendirir

Fiyat için stiller:

.shoply-product-price - Ürün fiyatını stillendirir (indirim uygulandıktan sonraki fiyat)
.shoply-product-original-price-before-discount - İndirim öncesi orijinal fiyatı stillendirir (varsayılan olarak üzeri çizili dekorasyonla)
.shoply-product-discount-percent - İndirim yüzdesi metnini stillendirir (varsayılan olarak kalın kırmızı metin şeklinde gösterilir)

Aksiyon düğmesi için stiller:

.shoply-product-action-button - Ana aksiyon düğmelerini stillendirir (Add to Cart, View Product vb.)
.shoply-product-action-button-sold-out - Ürün tükendiğinde aksiyon düğmesini stillendirir (devre dışı durum)

Not: Shoply uygulamasının yönetici konsolundaki Customize AI Search bölümünde, müşteriler aksiyon düğmesine tıkladığında ne olacağını yapılandırabilirsiniz—ürünü sepete ekleyebilirler, ürün sayfasına yönlendirilebilirler ya da aksiyon düğmesini tamamen gizlemeyi seçebilirsiniz.

AI Summary Sınıfları

Customizing the AI Summary Section with CSS

.shoply-ai-summary-box - AI tarafından oluşturulan özetler için kapsayıcı kutuyu stillendirir.
.shoply-ai-summary-button - AI özet oluşturmayı tetikleyen düğmeyi stillendirir.

Arama Sonuçlarında Ürün Kartlarını CSS ile Özelleştirme Örnekleri

Ürün Marka Stilini Değiştirme

Ürün markası, ürün başlığının üstünde görünür. İşte bazı yaygın özelleştirmeler:

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

Ürün Başlığını Özelleştirme

Ürün adı en önemli öğelerden biridir. Markanıza uyacak şekilde özelleştirin:

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

Ürün Fiyatlarını Stillendirme Örnekleri

Özel stillendirme ile fiyatlarınızı öne çıkarın:

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

Aksiyon Düğmelerini Özelleştirme

Aksiyon düğmeleriniz (Add to Cart, View Product) mağazanızın tasarımına uyacak şekilde stillendirilebilir:

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

Ürün Görsellerini Stillendirme

Ürün görsellerinizi kenarlıklar, gölgeler veya hover efektleriyle geliştirin:

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 Bölümünü Özelleştirme Örnekleri

AI Search’ü etkinleştiren mağazalarda AI Summary, arama sonuçlarının en üstünde görünür ve müşteriler ürünler arasında kaydırmaya başlamadan önce arama sonuçlarına göre ne satın almaları gerektiğini ve nedenini anında açıklar.

AI Summary’yi uygulamanın yönetici konsolundaki Customize AI Search sayfasından devre dışı bırakabilirsiniz. Aşağıda gösterildiği gibi görünümünü CSS kullanarak da özelleştirebilirsiniz.

AI Summary Kutusunu Stillendirme

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 Düğmesini Özelleştirme

Varsayılan olarak AI Summary, ekran alanından tasarruf etmek için kısa ve öz tutulur. Müşteriler tam ayrıntıları görmek için “AI Summary Button” düğmesine tıklayarak genişletebilir. Markanıza uymasını mı istiyorsunuz? Bu düğmeyi de özelleştirebilirsiniz! Aşağıdaki örneklere göz atın.

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

Sorun Giderme

CSS değişikliklerim görünmüyor

Yazım hatalarını kontrol edin: CSS sınıf adlarınızın doğru yazıldığından emin olun (.shoply- ile başlarlar)
Tarayıcı önbelleğinizi temizleyin: Bazen tarayıcılar eski stilleri önbelleğe alır
CSS sözdizimini kontrol edin: Tüm CSS kurallarınızın } ile düzgün şekilde kapatıldığından emin olun
!important kullanın: Stiller uygulanmıyorsa, varsayılan stilleri geçersiz kılmak için !important eklemeniz gerekebilir:
css
```
.shoply-product-action-button {
    background-color: #ff0000 !important;
}
```

Stiller mobilde farklı görünüyor

Bazı stiller mobil için özel ayarlamalar gerektirebilir. Media query kullanın:

css


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

Varsayılan stillere geri dönmeniz mi gerekiyor

CSS metin alanını temizleyip kaydetmeniz yeterlidir. Uygulama varsayılan stillere geri dönecektir.

Daha Fazla Yardıma mı İhtiyacınız Var?

CSS özelleştirmesi konusunda ek yardıma ihtiyacınız varsa:

Uygulama ayarlarındaki görsel örnekleri kontrol edin (Product Card Preview ve AI Summary Preview)
MDN Web Docs gibi CSS dokümantasyon kaynaklarına başvurun
Kişiselleştirilmiş yardım için destek ekibimizle customer-obsession@shoplyai.ai adresinden iletişime geçin

Mutlu Özelleştirmeler! 🎨

Bu CSS sınıflarıyla, arama sonuçlarınızın görünümü üzerinde tam kontrole sahip olursunuz. Deneyin, test edin ve markanızla mükemmel şekilde eşleşen bir arama deneyimi oluşturun!