1. Home
  2. Toko Online
  3. Mendesain tema dan tampilan toko

Mendesain tema dan tampilan toko

TokoTalk menyediakan template desain yang dapat kamu pilih sesuai dengan brand atau tokomu. Sangat mudah untuk mempersonalisasikan tampilan tokomu. Ditambah lagi, sekarang kamu bisa melihat perubahan langsung di tokomu untuk setiap opsi desain yang sedang kamu pilih.

Mode Preview membuatmu bisa mengatur Tema dan Tampilan, serta menemukan kombinasi yang cocok tanpa harus mengklik Simpan terlebih dulu. Mode Preview tersedia dalam tampilan mobile maupun dekstop.

Ikuti langkah-langkah di bawah ini untuk mendesain tokomu:

  1. Dari TokoTalk Admin, buka halaman Toko Online > Desain
  2. Atur tiap bagian komponen desain yang tertera, klik Simpan

Tema

Berikut komponen-komponen desain tema di tokomu:

  • Header
  • Nuansa warna
  • Warna tampilan latar
  • Warna font dan ikon
  • Menu
  • Tampilan halaman produk

Masing-masing komponen bisa diubah ubah-ubah sesuai selera dan kebutuhan, serta disesuaikan dengan branding produkmu.

Header adalah hal yang pertama kali terlihat oleh customer ketika mengunjungi tokomu. Header toko terdiri dari logo dan teks pengumuman.

Ada empat pilihan tampilan logo yang bisa kamu pilih, yaitu logo penuh, logo dan nama toko, hanya nama toko, dan sembunyikan logo. Pada contoh di bawah ini opsi yang dipilih adalah sembunyikan logo.

Pengumuman

Bagian pengumuman ini dapat kamu manfaatkan untuk menampilkan pemberitahuan ke customer. Misalnya pengumuman mengenai diskon yang sedang berjalan, waktu tutup toko sementara, dan sebagainya.

Pengumuman akan muncul di bagian atas tampilan tokomu, baik di versi mobile atau dekstop. Warna latar dan teks pengumuman bisa diatur sesuai keinginanmu.

Selain itu, kamu juga bisa menambahkan link di dalam tokomu (internal).

Jika kamu menambahkan link, customer akan diarahkan ke link tersebut ketika mengklik bagian pengumuman.

Nuansa Warna

Nuansa tokomu dapat diubah-ubah berdasarkan warna yang kamu inginkan.

Pada contoh di atas, warna yang dipilih adalah hitam. Warna inilah yang kemudian akan digunakan pada tombol dan label produk pada halaman tokomu.

Warna Tampilan Latar

Jika kamu sudah selesai mengubah nuansa, kamu dapat lanjut ke pengaturan warna tampilan latar. Untuk tampilan yang bagus, sesuaikan warna latar dengan nuansa warna yang telah kamu pilih.

Pada contoh kali ini, warna putih dipilih karena cocok dengan produk-produk yang ditampilkan serta menggambarkan simplicity yang membuat desain website jadi semakin clean dan cantik.

Warna Font dan Ikon

Kamu bisa memilih warna yang akan digunaan untuk font (teks) dan ikon di tokomu. Warna ini akan digunakan untuk semua teks yang terdapat di tokomu, mulai dari nama produk, deksripsi produk, artikel blog, dan sebagainya.

Warna ikon seperti info toko, blog, serta profil juga akan mengikuti warna yang kamu pilih ini.

Agar tampilan tokomu cantik namun kontennya tetap mudah dibaca, usahakan memilih warna-warna gelap dan solid. Seperti contoh pada gambar di atas yang menggunakan warna abu tua.

Kamu bisa menampilkan menu sidebar di tokomu dengan berbagai pengaturan yang berbeda sesuai kebutuhanmu.

Tipe menu yang bisa kamu tambahkan yaitu saluran dan kelompok item. Untuk saluran, kamu bisa menambahkan menu dan kemudian mengarahkannya ke link yang ada di tokomu, misalnya link kategori, produk diskon, FAQ, dan sebagainya.

Sedangkan untuk kelompok item, bisa kamu gunakan untuk mengelompokkan kategori produkmu. Misalnya, jika kamu menjual produk fashion, kamu bisa membuat kelompok item celana, atasan, aksesori, dan sebagainya.

Contoh di atas menggunakan kombinasi saluran dan kelompok item. Misalnya, menu Sale di atas adalah saluran yang diarahkan ke halaman produk diskon. Sedangkan sisanya merupakan kelompok item yang terdiri dari kategori-kategori produk.

Kamu bisa memilih untuk menampilkan menu ini setiap saat atau membuatnya menjadi minimized sehingga hanya akan muncul ketika hamburger button (tiga strip di kiri atas halaman website) diklik.

Tampilan Halaman Produk

Terdapat tiga rasio foto produk yang bisa kamu pilih untuk tokomu:

  • Kotak (1:)
  • Vertikal (4:5)
  • Tampilkan keseluruhan foto

Pada contoh di atas, rasio yang digunakan ialah kotak (1:1). Rasio ala Instagram ini cocok digunakan jika kamu ingin info lain seperti nama produk dan harga langsung terlihat pada pandangan pertama customer ketika membuka halaman.

Tampilan

Kamu bisa mengantur tampilan untuk halaman Home dan Produk di tokomu. Kamu bisa menambah atau mengurangi bagian pada kedua halaman ini, serta mengatur letak masing-masing bagian.

Home

Bagian-bagian yang dapat kamu atur pada halaman Home adalah:

  • Nama toko
  • Informasi toko
  • Semua produk
  • Judul (testimoni, paragraf)
  • Gambar (slideshow, gambar dengan teks, daftar logo)
  • Kategori (satu kategori, banyak kategori)
  • Produk (produk terpilih, produk unggulan, bundle produk, semua produk)
  • Lainnya (pencarian produk, dsb.)

Untuk menambahkan bagian-bagian di atas, klik + Tambah Bagian pada halaman Tampilan.

Untuk mengubah urutan tampilan tiap bagian, kamu bisa drag and drop ikon garis dua.

Sedangkan untuk menyembuyikan bagian tertentu, klik ikon mata.

Produk

Bagian-bagian yang dapat kamu atur pada halaman Produk adalah:

  • Tampilan
  • Urutan produk
  • Tampilan efek
  • Label status produk
  • Ukuran gambar kategori

Pada contoh di bawah ini, tampilan produk yang digunakan adalah flat karena ingin menampilkan harga serta nama produk secara langsung begitu customer membuka halaman ini.

Masing-masing produk di bawah ini memiliki lebih dari satu foto, jadi efek slideshow dipilih agar lebih menarik dan dinamis.

Updated on 16 June 2020

Related Articles