Cara Menyesuaikan Tampilan AI Search

Ada dua cara untuk menyesuaikan hasil pencarian Shoply AI Anda:

• Opsi bawaan: Mulailah dengan kontrol di Shoply AI Admin Console Anda untuk mengubah ringkasan, filter, tombol, warna, dan tata letak produk tanpa menulis kode. Jelajahi opsi bawaan dan pratinjau.
• CSS kustom: Jika kontrol tersebut tidak memberikan desain yang Anda inginkan, gunakan CSS—bahasa styling untuk halaman web—untuk menyempurnakan font, spasi, border, dan detail visual lainnya. Anda dapat menggunakannya bersamaan dengan pengaturan bawaan. Buka panduan CSS.

Anda Mungkin Sama Sekali Tidak Memerlukan CSS

Sebagian besar perubahan tata letak dan tampilan pencarian sudah tersedia di bawah Customize AI Search dalam Shoply AI Admin Console Anda, baik Anda menggunakan Shopify maupun platform situs web lainnya. Coba opsi bawaan ini terlebih dahulu, lalu klik Save di admin untuk menerapkan pilihan Anda. Gunakan CSS untuk styling yang tidak dicakup oleh kontrol ini.

Contoh interaktif di bawah menggunakan pratinjau yang sama seperti di admin. Ini adalah ilustrasi yang dapat Anda coba di sini; ini tidak mengubah toko Anda.

• AI Summary: Aktifkan atau nonaktifkan ringkasan, dan pilih apakah tampil di atas atau di bawah hasil produk.

• Filter pencarian: Tampilkan atau sembunyikan bilah filter, dan tempatkan filter di bagian atas, di sebelah kiri, atau dalam panel mengambang. Tata letak kiri akan berpindah ke atas hasil pada layar yang lebih kecil. Lihat pengaturan visibilitas filter pencarian untuk efek bersama pada hasil chat.

• Tombol aksi produk dan warna: Pilih Add to Cart, View Product, atau No Button. Pilih warna latar belakang dan teks tombol, serta ubah warna bintang rating agar sesuai dengan toko Anda.

• Produk per baris: Pilih tiga atau empat kolom di desktop, dan satu atau dua kolom di mobile. Kolom yang lebih sedikit memberi lebih banyak ruang untuk setiap gambar produk.

• Total produk yang ditampilkan: Atur jumlah produk terpisah untuk layar mobile kecil, layar mobile yang lebih besar, dan desktop. Admin menyediakan 3, 4, 6, 8, 9, 12, 15, 16, 18, atau 20 produk. Ini mengontrol jumlah hasil, bukan jumlah kolom.

Jika Anda masih memerlukan desain kustom, lanjutkan dengan panduan CSS di bawah ini.

Memulai

Jika opsi bawaan tidak memberikan tampilan yang Anda inginkan, gunakan CSS kustom untuk menyempurnakan hasil pencarian Anda.

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

Pertama, aktifkan AI Search sebelum menatanya agar Anda dapat mempratinjau perubahan pada hasil nyata.

Tempat Menambahkan CSS Anda

Untuk menyembunyikan seluruh bilah filter, gunakan kontrol bawaan: buka Customize AI Search → Search filters, matikan Show filters in search results, lalu klik Save. Tidak perlu CSS. Lihat Hide Search Filters  untuk detailnya.

1. Buka bagian Customize AI Search di konsol admin aplikasi Shoply.
2. Temukan area teks CSS styles for search elements
3. Masukkan kode CSS kustom Anda ke dalam area teks
4. Klik Save untuk menerapkan perubahan Anda

Dasar-Dasar CSS

CSS memungkinkan Anda mengubah warna, font, spasi, border, dan lainnya. Sintaks dasarnya adalah:

.class-name {
    property: value;
}

Sebagai contoh, untuk mengubah warna teks menjadi merah tua:

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

Memahami Kelas CSS Khusus Shoply

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

Shoply juga telah menentukan gaya default tertentu untuk kelas-kelas ini. Anda dapat memeriksa gaya tersebut menggunakan Chrome DevTools  dan mencari masing-masing kelas. Jika Anda perlu menimpa gaya default, tambahkan deklarasi !important ke aturan CSS Anda seperti dijelaskan dalam dokumentasi MDN CSS !important .

Kelas Kartu Produk

Gaya untuk kontainer:

• .shoply-product-image - Mengatur gaya gambar produk
• .shoply-product-card - Mengatur gaya kontainer 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 aksi:

• .shoply-product-action-button - Mengatur gaya tombol aksi utama (Add to Cart, View Product, dll.)
• .shoply-product-action-button-sold-out - Mengatur gaya tombol aksi saat produk habis terjual (status nonaktif)

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

Kelas AI Summary

• .shoply-ai-summary-box - Mengatur gaya kotak kontainer 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:

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

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

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

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

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

Tingkatkan tampilan gambar produk Anda dengan border, bayangan, atau efek hover:

/* 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 perlu dibeli dan alasannya berdasarkan hasil pencarian — bahkan sebelum pelanggan menggulir daftar produk.

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

Menata Kotak AI Summary

    /* 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 mengklik “AI Summary Button” untuk memperluas dan melihat detail lengkap. Ingin membuatnya sesuai dengan merek Anda? Anda juga dapat menyesuaikan tombol ini! Lihat contoh di bawah.

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

1. Periksa typo: Pastikan nama kelas CSS Anda dieja dengan benar (diawali dengan .shoply-)
2. Bersihkan cache browser Anda: Terkadang browser menyimpan gaya lama dalam cache
3. Periksa sintaks CSS: Pastikan semua aturan CSS Anda ditutup dengan benar menggunakan }
4. Gunakan !important: Jika gaya tidak diterapkan, Anda mungkin perlu menambahkan !important untuk menimpa gaya default:
   css

   .shoply-product-action-button {
       background-color: #ff0000 !important;
   }

Gaya terlihat berbeda di mobile

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

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

Perlu mengembalikan ke gaya default

Cukup hapus area teks CSS lalu simpan. Aplikasi akan kembali ke styling default.

Butuh Bantuan Lebih Lanjut?

Jika Anda memerlukan bantuan tambahan untuk penyesuaian CSS:

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

Selamat Menyesuaikan! 🎨

Dengan kelas CSS ini, Anda memiliki kendali penuh atas tampilan hasil pencarian Anda. Bereksperimenlah, uji, dan ciptakan pengalaman pencarian yang benar-benar sesuai dengan merek Anda!