AI Search Görünümünü Özelleştirme

Shoply AI arama sonuçlarınızı özelleştirmenin iki yolu vardır:

• Yerleşik seçenekler: Kod yazmadan özetleri, filtreleri, düğmeleri, renkleri ve ürün düzenini değiştirmek için Shoply AI Admin Console içindeki kontrollerle başlayın. Yerleşik seçenekleri ve önizlemeleri inceleyin.
• Özel CSS: Bu kontroller istediğiniz tasarımı sağlamıyorsa, yazı tiplerini, boşlukları, kenarlıkları ve diğer görsel ayrıntıları ince ayarlamak için web sayfalarının stil dili olan CSS’i kullanın. Bunu yerleşik ayarlarla birlikte kullanabilirsiniz. CSS kılavuzuna gidin.

Muhtemelen Hiç CSS’e İhtiyacınız Yok

İster Shopify ister başka bir web sitesi platformu kullanın, arama düzeni ve görünümündeki çoğu değişiklik zaten Shoply AI Admin Console içindeki Customize AI Search bölümünde mevcuttur. Önce bu yerleşik seçenekleri deneyin, ardından seçimlerinizi uygulamak için yönetici panelinde Save düğmesine tıklayın. Bu kontrollerin kapsamadığı stiller için CSS kullanın.

Aşağıdaki etkileşimli örnekler, yönetici panelindekiyle aynı önizlemeleri kullanır. Bunlar burada deneyebileceğiniz gösterimlerdir; mağazanızı değiştirmezler.

• AI Summary: Özeti açın veya kapatın ve ürün sonuçlarının üstünde mi altında mı görüneceğini seçin.

• Arama filtreleri: Filtre çubuğunu gösterin veya gizleyin ve filtreleri üstte, solda ya da kayan bir panelde konumlandırın. Sol düzen, daha küçük ekranlarda sonuçların üstüne taşınır. Sohbet sonuçları üzerindeki ortak etki için arama filtresi görünürlük ayarları bölümüne bakın.

• Ürün işlem düğmeleri ve renkler: Add to Cart, View Product veya No Button seçeneklerinden birini seçin. Düğmenin arka plan ve metin renklerini belirleyin ve puanlama yıldızı rengini mağazanıza uyacak şekilde değiştirin.

• Satır başına ürün sayısı: Masaüstünde üç veya dört sütun, mobilde ise bir veya iki sütun seçin. Daha az sütun, her ürün görseline daha fazla alan sağlar.

• Gösterilen toplam ürün sayısı: Küçük mobil ekranlar, daha büyük mobil ekranlar ve masaüstü için ayrı ürün sayıları belirleyin. Yönetici paneli 3, 4, 6, 8, 9, 12, 15, 16, 18 veya 20 ürün seçenekleri sunar. Bu ayar sütun sayısını değil, sonuç sayısını kontrol eder.

Hâlâ özel bir tasarıma ihtiyacınız varsa, aşağıdaki CSS kılavuzuyla devam edin.

Başlarken

Yerleşik seçenekler istediğiniz görünümü sağlamıyorsa, arama sonuçlarınızı ince ayarlamak için özel CSS kullanın.

Hem Shoply AI Chat hem de AI Search arama sonuçları 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.

Öncelikle, değişiklikleri gerçek sonuçlar üzerinde önizleyebilmek için stil vermeden önce AI Search’ü etkinleştirin.

CSS’inizi Nereye Eklemelisiniz

Tüm filtre çubuğunu gizlemek için yerleşik kontrolü 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  bölümüne bakın.

1. Shoply uygulamasının yönetici konsolunda Customize AI Search bölümüne gidin.
2. CSS styles for search elements metin alanını bulun
3. Özel CSS kodunuzu metin alanına girin
4. 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öz dizimi şöyledir:

.class-name {
    property: value;
}

Örneğin, metin rengini koyu kırmızıya değiştirmek için:

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

Shoply’ye Özgü 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 her bir sınıfı aratabilirsiniz. Varsayılan stilleri geçersiz kılmanız gerekiyorsa, MDN CSS !important dokümantasyonunda  açıklandığı gibi CSS kurallarınıza !important bildirimi ekleyin.

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

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 üzerinde gösterilen ürün markasını/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 üstü çizili dekorasyonla)
• .shoply-product-discount-percent - İndirim yüzdesi metnini stillendirir (varsayılan olarak kalın kırmızı metin olarak gösterilir)

İşlem düğmesi için stiller:

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

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

AI Summary Sınıfları

• .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.

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

Ürün Marka Stilini Değiştirme

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

/* 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:

/* 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 stillerle fiyatlarınızı öne çıkarın:

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

İşlem Düğmelerini Özelleştirme

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

/* 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:

/* 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 üst kısmında görünür ve müşteriler ürünler arasında kaydırmaya başlamadan önce, arama sonuçlarına dayanarak ne satın alınması gerektiğini ve nedenini anında açıklar.

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

AI Summary Kutusunu Stillendirme

    /* 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 tüm ayrıntıları görmek için “AI Summary Button” düğmesine tıklayarak genişletebilir. Bunun markanıza uymasını mı istiyorsunuz? Bu düğmeyi de özelleştirebilirsiniz! Aşağıdaki örneklere göz atın.

/* 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

1. 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)
2. Tarayıcı önbelleğinizi temizleyin: Bazen tarayıcılar eski stilleri önbelleğe alır
3. CSS söz dizimini kontrol edin: Tüm CSS kurallarınızın } ile düzgün şekilde kapatıldığından emin olun
4. !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 cihazlara özel ayarlamalar gerektirebilir. Media query’leri kullanın:

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

Varsayılan stillere geri dönmeniz mi gerekiyor

Yalnızca CSS metin alanını temizleyin ve kaydedin. Uygulama varsayılan stile geri dönecektir.

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

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

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

İyi Ö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!