1. Home
  2. Toko Online
  3. Mendesain Tema dan Tampilan Toko

Mendesain Tema dan Tampilan Toko

TokoTalk menyediakan template desain website toko online 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.1-Desain-Layout-tokotalk.png
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 desktop.
Ikuti langkah-langkah di bawah ini untuk mendesain tokomu:

  1. Dari TokoTalk Admin, buka halaman desain toko
  2. Pilih ubah desain
  3. Atur tiap bagian komponen desain yang tertera, klik Simpan

Tema

 

Berikut komponen-komponen desain tema di tokomu:

  • Menu
  • Pengaturan Warna
    • Nuansa warna
    • Warna tampilan latar
    • Warna font dan ikon
    • Warna latar Footer
  • Pengaturan Font
  • Pengaturan custom icon
  • Pengaturan tampilan produk

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

Kamu bisa menampilkan menu sidebar di tokomu untuk meningkatkan daya tarik websitemu.
Untuk menambahkan menu, kamu cukup klik tambah item menu kemudian akan ada dua pilihan item:

  • Saluran
  • Kelompok item

Untuk tampilan dan tipe item dapat disesuaikan dengan kebutuhan masing-masing.

2-Theme -Menu-tokotalk.png
Untuk contoh menu bisa dilihat pada gambar diatas, untuk tipe menu yang digunakan adalah tipe saluran. Kamu juga bisa mengubah urutan menu dengan mudah yaitu hanya dengan cara pilih menu yang akan diubah urutannya lalu geser menggunakan kursor anda.

Warna

1. Nuansa Warna

Kamu bisa mengatur warna nuansa toko kamu dengan berbagai pilihan warna yang menarik. Untuk pengaturan nuansa warna bisa dilakukan seperti pada gambar berikut.

3-Theme-Warna-tokotalk

2.Warna Tampilan Latar
Untuk menambah daya tarik desain tokomu menjadi lebih menarik, kamu bisa mengatur warna pada tampilan latar. Untuk pengaturan nuansa warna bisa dilakukan seperti pada gambar berikut.
4-Theme-Warna-tokotalk.png
3. Warna Font dan Ikon
Selanjutnya kamu bisa bisa mengatur warna pada font/teks dan warna ikon pada toko kamu. Warna tulisan yang baik adalah salah satu bagian penting pada desain website toko kamu. Untuk mengubah warna teks pada bagian nama produk, deskripsi dll pada toko kamu dapat dilihat seperti pada gambar berikut.
5-Theme-Warna-tokotalk.png
Pada saat pemilihan warna, pastikan kamu memilih warna yang sesuai dan memilih warna-warna gelap dan solid sehingga konten pada tokomu tetap mudah dibaca.

4. Warna Latar Footer

Untuk membuat tampilan Footer tokomu lebih menarik dan berbeda, kamu bisa mengatur warna latar yang berbeda dengan warna tampilan latar toko. Untuk menambahkan footer, silakan pilih menu Tampilan > Footer > Tambah Bagian. Di situ pilih apa informasi yang ingin ditampilkan, kemudian klik Tambahkan dan Simpan.
6-Theme-Warna-tokotalk.png

Font

Kamu bisa mengatur tipe font pada halaman website, terdapat banyak pilihan tipe font yang bisa digunakan. Selain itu, kamu juga bisa menambahkan font custom sesuai dengan kebutuhan desain tokomu. Untuk langkah-langkahnya bisa dicek pada gambar berikut:
7-font-tokotalk.png


Icon Custom

Kamu bisa merubah icon di toko online agar sesuai dengan brand milikmu. Icon harus menggunakan format SVG, memiliki 1 warna (monokrom), dan menggunakan ukuran perbandingan 1:1 (kotak).
8-icon-custom-tokotalk.png

Tampilan Halaman Produk


Terdapat tiga rasio foto produk yang bisa kamu pilih untuk tokomu:
– Kotak (1:1)
– Vertikal (4:5)
– Tampilkan keseluruhan foto

9-tampilan-produk-tokotalk.png
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 mengatur tampilan untuk halaman Home dan Produk di tokomu. Kamu bisa menambah atau mengurangi bagian pada kedua halaman ini, serta mengatur letak masing-masing bagian.

Berikut komponen – komponen yang dapat kamu atur di halaman tampilan:

Home

Pada halaman menu Home kamu bisa mengatur hal – hal berikut:

Produk

Pada menu Produk kamu bisa mengatur tampilan produk pada halaman website

  1. Tampilan: Pada bagian ini kamu bisa mengatur bagaimana produk kamu akan ditampilkan di halaman website. Terdapat beberapa jenis tampilan yang bisa kamu gunakan yaitu original, flat, kolase, grid, horisontal, deskriptif.
  2. Urutan produk: Kamu bisa mengatur urutan produk pada halaman website berdasarkan produk terbaru, produk terlama, paling banyak dilihat, paling banyak terjual, harga rendah ke tinggi dan harga tinggi ke rendah.
  3. Tampilan efek: Kamu juga bisa menambahkan efek pada produk, saat ini kamu bisa menggunakan efek original, slideshow dan hover.
  4. Perlihatkan label: Kamu bisa memilih apakah label produk ingin ditampilkan pada halaman website atau tidak.
  5. Ukuran gambar kategori: Kamu bisa mengatur ukuran gambar kategori dengan ukuran penuh atau kecil disesuaikan dengan desain toko kamu.
  6. Perlihatkan label diskon pengiriman: kamu bisa memilih untuk menampilkan atau menyembunyikan label diskon pengiriman pada halaman produk.
  7. Beri jarak kiri kanan lebih di desktop: Khusus tampilan desktop kamu bisa mengatur jarak pada sisi kiri dan kanan
  8. Menu kategori: kamu bisa menambah menu kategori juga pada halaman ini, untuk tampilannya bisa standar atau personalisasi.
    10-Tampilan-Home-Produk-tokotalk.png

Detail Produk
Pada halaman ini kamu bisa mengatur tampilan detail produk:

1. Tampilan variant, kamu bisa mengatur tampilan variant di halaman website, terdapat 3 pilihan tampilan yang bisa digunakan yaitu, daftar dan pilihan. Namun jika kamu tidak ingin menampilkan variant kamu bisa pilih sembunyikan.
11-tampilan-home-variants-tokotalk.png
2. Kamu juga bisa mengatur beberapa detail produk lainnya untuk ditampilkan di halaman website seperti Hashtag, kontak seller, ulasan produk, label kategori, efek pada foto dan rekomendasi.
12-tampilan - home - detail produk-tokotalk.png

Notifikasi

Kamu bisa menambahkan notifikasi dan popup di halaman websitemu, untuk caranya bisa dicek pada menu tampilan > notifikasi seperti pada gambar berikut:
13-tampilan-notif-tokotalk.png

Pengumuman
Kamu bisa menambahkan pengumuman di tokomu, misalnya pengumuman produk baru, diskon dan sebagainya. Caranya bisa dicek pada gambar berikut:
14-notif-pengumuman-tokotalk.png
Popup
Kamu juga bisa menambahkan popup terkait promosi, produk baru dan sebagainya yang dapat diakses oleh pembeli saat mengunjungi tokomu. Popup bisa berupa gambar dan kustom.
15-notif-popup-tokotalk.png

Header adalah hal yang pertama kali terlihat oleh customer ketika mengunjungi tokomu.
Kamu bisa mengatur tampilan logo toko pada halaman website. Langkah pengaturannya bisa dicek pada gambar berikut.
16-header-logo-tokotalk.png
Selanjutnya kamu bisa mengatur posisi logo tokomu untuk tampilan desktop, untuk contoh pengaturan bisa dicek pada gambar berikut
17-logo-posisi-tokotalk.png
Setelah upload logo toko kamu juga mengatur ukuran logo terdapat 3 ukuran pada logo yaitu kecil, sedang dan besar. Warna icon dan teks bisa diubah menjadi hitam atau putih. Untuk langkah-langkahnya bisa dicek pada gambar berikut.18-logo-size-tokotalk.png

Konten

Kamu bisa menambahkan beberapa konten tambahan untuk memaksimalkan penampilan tokomu seperti banner, paragraf dan informasi toko lainnya.
19-tampilan-konten-tokotalk.png
1. Kamu bisa menambahkan banner atau gambar sampul di tokomu. Gambar sampul bisa ditambahkan lebih dari satu disesuaikan dengan kebutuhan. Untuk langkah-langkahnya bisa dicek pada gambar berikut:
 20-banner-tokotalk.png21-banner-tokotalk.png

Ada banyak bagian atau konten yang bisa ditambahkan pada tampilan tokomu, kamu cukup klik tambah bagian lalu pilih bagian yang ingin ditambahkan seperti gambar berikut.
22-add- bagian-tokotalk.png23-add-bagian-tokotalk.png


Footer website adalah bagian konten website yang terletak di bagian paling bawah halaman web. footer berisi beberapa informasi tambahan website yang tidak bisa ditemukan oleh pengguna pada halaman utama.

Informasi tambahan yang bisa kamu tambahkan pada halaman footer adalah informasi pembayaran dan kebijakan toko. Kamu juga bisa menambahkan beberapa informasi custom lainnya cukup dengan tambah bagian seperti pada gambar berikut:
25-footer-tokotalk.png

 

Updated on 27 Juli 2022

Related Articles