Desain dan frontend asisten Shopify

DAFTAR ISI

Konfigurasi desain asisten

Tab desain Chat memungkinkan Anda menyesuaikan sepenuhnya tampilan visual widget chat untuk memastikan integrasi yang mulus dengan branding toko Anda.

Identitas dan Posisi Dasar

Identitas: Anda dapat menentukan “Nama asisten” (misalnya, “Asisten AI”) yang muncul di header, dan secara opsional memberikan “URL avatar asisten” untuk menampilkan logo atau gambar khusus di samping nama.

Posisi: Gunakan dropdown “Posisi di layar” untuk memilih tempat widget berlabuh di storefront Anda (biasanya Kanan bawah).

Tata Letak dan Dimensi

Anda memiliki kontrol yang tepat atas ukuran fisik dan bentuk antarmuka obrolan menggunakan unit piksel (px), tinggi viewport (vh), atau rem:

Sesuaikan keseluruhan “Lebar obrolan” (misalnya, 400px) dan “Tinggi maksimum obrolan” (misalnya, 50vh).

Sesuaikan spasi dengan “Messages padding” dan atur kelengkungan antarmuka menggunakan kontrol radius seperti “Messages container radius” (18px) dan “Chat window radius” (12px).

Kontrol ukuran tipografi dengan pengaturan untuk “Ukuran font obrolan,” “Ukuran teks header obrolan,” dan “Ukuran ikon header obrolan”.

Tema Warna

Antarmuka ini menyediakan pemilih kode hex yang lengkap untuk mengubah setiap elemen jendela obrolan.

Latar Belakang: Sesuaikan “Latar belakang obrolan” utama (#FFFFFF), “Latar belakang pesan pelanggan,” dan “Latar belakang pesan asisten” (#000000). Anda juga dapat mewarnai bagian tertentu seperti “Latar belakang area teks sambutan” atau “Warna latar belakang FAQ” (#F9FAFB).

Batas: Tentukan garis luar yang halus untuk kolom pesan, kotak FAQ, dan tautan untuk menciptakan tampilan yang kohesif.

Pertanyaan yang sering diajukan

Tab FAQ memungkinkan Anda membuat pertanyaan yang sudah ditulis sebelumnya yang muncul sebelum pengguna mengetikkan pesan pertama mereka. Ini membantu menyelesaikan pertanyaan umum secara instan tanpa memerlukan pembuatan AI.

Klik “+ Tambah FAQ” untuk membuat entri baru.

Untuk setiap entri, masukkan “Pertanyaan” umum (misalnya, “Dapatkah Anda mengirim produk ke AS?”) dan format “Jawaban” statis menggunakan editor teks kaya (tebal, miring, garis bawah, coret).

Anda dapat menyeret dan melepas untuk mengatur ulang pertanyaan atau menggunakan ikon pensil dan tempat sampah untuk mengedit atau menghapusnya.

Tautan cepat

Tab Tautan memungkinkan Anda menambahkan tombol navigasi langsung ke bagian bawah layar sambutan obrolan. Ini ideal untuk mengarahkan pengguna ke saluran dukungan alternatif atau halaman toko penting.

Tata Letak Grid: Pertama, tentukan bagaimana tautan ditampilkan dengan memilih jumlah “Kolom grid” (misalnya, mengaturnya ke 3 akan menampilkannya dalam baris horizontal).

Menambahkan Tautan: Klik “+ Tambah tautan” untuk membuat tombol baru. Berikan “Judul Tautan” (seperti “WhatsApp” atau “Mail”) dan masukkan “URL Tautan” yang tepat (menggunakan format standar seperti mailto: untuk email atau nomor telepon langsung).

Ikon: Anda dapat memilih dari pustaka ikon vektor bawaan (seperti amplop, telepon, globe, atau kalender) untuk merepresentasikan tautan secara visual. Alternatifnya, Anda dapat menggunakan tombol “Pilih File” di bawah “Gambar kustom” untuk mengunggah ikon Anda sendiri.

Siap untuk menjual lebih banyak di Shopify?

Pasang Liliwi di toko Shopify Anda dan dapatkan penyiapan gratis dari tim kami. 

Gunakan layanan lengkap ini hanya dengan $1.