Cara Menyesuaikan Hasil Pencarian dengan CSS

Siap membuat hasil pencarian Anda terlihat menakjubkan? Panduan ini akan menunjukkan cara menata hasil pencarian produk dan bagian ringkasan AI dengan CSS. Jangan khawatir jika Anda masih baru menggunakan CSS—kami akan membantu Anda! Jika Anda sudah terbiasa menggunakannya, Anda akan menemukan banyak kiat untuk membawa penyesuaian Anda ke tingkat berikutnya.

Memulai

Baik Shoply AI Chat maupun AI Search dapat menampilkan hasil pencarian, sehingga opsi penyesuaian CSS yang Anda tambahkan akan berlaku untuk keduanya. Catatan: Fitur AI Summary hanya tersedia di Shoply AI Search.

Tempat Menambahkan CSS

Buka bagian Customize AI Search di konsol admin aplikasi Shoply.
Temukan area teks CSS styles for search elements
Masukkan kode CSS khusus Anda di area teks
Klik Save untuk menerapkan perubahan

Dasar-Dasar CSS

CSS memungkinkan Anda mengubah warna, font, jarak, batas, dan lainnya. Sintaks dasarnya adalah:

css


.class-name {
    property: value;
}

Misalnya, untuk mengubah warna teks menjadi merah tua:

css


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

Memahami Class CSS Khusus Shoply

Shoply menyediakan class CSS khusus yang dapat Anda gunakan untuk menargetkan berbagai bagian hasil pencarian. Setiap class berhubungan dengan elemen tertentu dalam hasil pencarian.

Shoply juga telah menetapkan gaya default tertentu untuk class-class ini. Anda dapat memeriksa gaya tersebut menggunakan Chrome DevTools dan mencari setiap class. Jika perlu mengganti gaya default, tambahkan deklarasi !important ke aturan CSS Anda seperti yang dijelaskan dalam dokumentasi CSS !important MDN .

Class Kartu Produk

Menyesuaikan Kartu Produk dalam Hasil Pencarian dengan CSS

Gaya untuk wadah:

.shoply-product-image - Mengatur gaya gambar produk
.shoply-product-card - Mengatur gaya wadah kartu produk

Gaya untuk informasi teks:

.shoply-product-brand - Mengatur gaya nama merek/vendor produk yang ditampilkan di atas judul produk
.shoply-product-name - Mengatur gaya judul/nama produk

Gaya untuk harga:

.shoply-product-price - Mengatur gaya harga produk (setelah diskon diterapkan)
.shoply-product-original-price-before-discount - Mengatur gaya harga asli sebelum diskon (dengan dekorasi coret secara default)
.shoply-product-discount-percent - Mengatur gaya teks persentase diskon (ditampilkan sebagai teks merah tebal secara default)

Gaya untuk tombol tindakan:

.shoply-product-action-button - Mengatur gaya tombol tindakan utama (Add to Cart, View Product, dan lainnya)
.shoply-product-action-button-sold-out - Mengatur gaya tombol tindakan saat produk habis (status dinonaktifkan)

Catatan: Di bagian Customize AI Search pada konsol admin aplikasi Shoply, Anda dapat mengonfigurasi tindakan saat pelanggan mengeklik tombol tindakan—mereka dapat menambahkan produk ke keranjang, diarahkan ke halaman produk, atau Anda dapat memilih untuk menyembunyikan tombol tindakan sepenuhnya.

Class AI Summary

Menyesuaikan Bagian AI Summary dengan CSS

.shoply-ai-summary-box - Mengatur gaya kotak wadah untuk ringkasan yang dibuat AI.
.shoply-ai-summary-button - Mengatur gaya tombol yang memicu pembuatan ringkasan AI.

Contoh Menyesuaikan Kartu Produk dalam Hasil Pencarian dengan CSS

Mengubah Gaya Merek Produk

Merek produk muncul di atas judul produk. Berikut beberapa penyesuaian umum:

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

Menyesuaikan Judul Produk

Nama produk adalah salah satu elemen terpenting. Sesuaikan agar cocok dengan merek Anda:

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

Contoh Menata Harga Produk

Buat harga Anda lebih menonjol dengan gaya khusus:

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

Menyesuaikan Tombol Tindakan

Tombol tindakan Anda (Add to Cart, View Product) dapat ditata agar sesuai dengan desain toko Anda:

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

Menata Gambar Produk

Sempurnakan gambar produk Anda dengan batas, bayangan, atau efek hover:

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

Contoh Menyesuaikan Bagian AI Summary

Untuk toko yang mengaktifkan AI Search, AI Summary akan muncul di bagian atas hasil pencarian dan langsung menjelaskan apa yang harus dibeli dan alasannya berdasarkan hasil pencarian—sebelum pelanggan menggulir produk.

Anda dapat menonaktifkan AI Summary di halaman Customize AI Search pada konsol admin aplikasi. Anda juga dapat menyesuaikan tampilannya menggunakan CSS seperti yang ditunjukkan di bawah ini.

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

Menyesuaikan Tombol AI Summary

Secara default, AI Summary dibuat singkat dan padat untuk menghemat ruang layar. Pelanggan dapat mengeklik “AI Summary Button” untuk memperluas dan melihat detail lengkapnya. Ingin membuatnya sesuai dengan merek Anda? Anda juga dapat menyesuaikan tombol ini! Lihat contoh di bawah ini.

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

Pemecahan Masalah

Perubahan CSS saya tidak terlihat

Periksa kesalahan ketik: Pastikan nama class CSS Anda ditulis dengan benar (diawali dengan .shoply-)
Hapus cache browser: Terkadang browser menyimpan gaya lama dalam cache
Periksa sintaks CSS: Pastikan semua aturan CSS Anda ditutup dengan benar menggunakan }
Gunakan !important: Jika gaya tidak diterapkan, Anda mungkin perlu menambahkan !important untuk mengganti gaya default:
css
```
.shoply-product-action-button {
    background-color: #ff0000 !important;
}
```

Gaya terlihat berbeda di perangkat seluler

Beberapa gaya mungkin memerlukan penyesuaian khusus untuk perangkat seluler. Gunakan media query:

css


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

Perlu mengatur ulang ke gaya default

Cukup hapus area teks CSS dan simpan. Aplikasi akan kembali ke gaya default.

Butuh Bantuan Lebih Lanjut?

Jika Anda memerlukan bantuan tambahan terkait penyesuaian CSS:

Periksa contoh visual di pengaturan aplikasi (Product Card Preview dan AI Summary Preview)
Lihat sumber dokumentasi CSS seperti MDN Web Docs
Hubungi tim dukungan kami untuk bantuan yang dipersonalisasi di customer-obsession@shoplyai.ai

Selamat Menyesuaikan! 🎨

Dengan class CSS ini, Anda memiliki kendali penuh atas tampilan hasil pencarian. Bereksperimenlah, lakukan pengujian, dan buat pengalaman pencarian yang benar-benar sesuai dengan merek Anda!