Skip to main content
Helpdesk Kasir Pintar

Cara Mengatur Tema Toko Olshopin

Posted
Updated
ByTechnical Writer
You are here:
← All Topics

Fitur pengaturan tema toko membantu Anda menata tampilan katalog Olshopin agar lebih menarik dan sesuai dengan bidang usaha. Dengan memilih dan mengatur tema yang tepat, Anda dapat meningkatkan daya tarik produk, kenyamanan berbelanja, dan potensi penjualan.

Fitur yang Tersedia Berdasarkan Jenis Akun

Status Akun FreePro (Premium)Pro + Plugin Bisnis
Tema tersediaTema SimpleTema Simple + 1 Tema CustomTema Simple + 2 Tema Custom
Batas penggunaan widget Widget tidak tersediaWidget maks. 7Widget maks. 15

Cara Mengatur Tampilan Katalog Toko Olshopin

Anda dapat mengatur tampilan halaman katalog toko online (Olshopin) melalui Website/Back Office Kasir Pintar agar sesuai dengan kebutuhan bisnis Anda.

Langkah-langkah:

  1. Login ke website/back office Kasir Pintar menggunakan akun Anda.

  2. Masuk ke menu Pengaturan → Toko → Toko Online.


  3. Pada halaman Pengaturan Toko Online, pilih tab Tema Toko untuk mulai mengatur tampilan toko.


  4. Pilih tema yang ingin digunakan untuk tampilan katalog toko online. Tersedia beberapa jenis tema yang dapat disesuaikan dengan kebutuhan bisnis Anda.

    • Tema Simple: Tema bawaan dengan tampilan sederhana yang otomatis terpasang. Tema ini tidak dapat dikustomisasi atau diubah tampilannya. Cocok digunakan jika ingin membuat katalog toko dengan cepat tanpa melakukan banyak pengaturan.


    • Custom Tema:


      • Custom Preset Tema:
        Tema siap pakai berdasarkan bidang usaha seperti FnB, Retail, dan Fashion. Tema sudah memiliki pengaturan awal (preset) sehingga dapat digunakan lebih cepat tanpa perlu mengatur dari awal, namun tetap dapat disesuaikan kembali sesuai kebutuhan toko Anda.


      • Custom Tema Sendiri: Tema yang dapat diatur sepenuhnya sesuai preferensi tampilan toko Anda.


  5. Sebelum menggunakannya, Anda dapat menambahkan nama pada tema yang dipilih.


  6. Setelah itu, klik tema hingga tampil dalam kondisi tercentang atau ter-highlight untuk melakukan pengaturan, lalu klik tombol Pilih & Lanjut Edit untuk masuk ke halaman editor tema.
    Pada panduan ini, contoh yang digunakan adalah Tema Retail.


  7. Lakukan proses verifikasi dengan mencentang kolom berikut untuk menuju ke halaman editor.

Cara Melakukan Pengaturan Umum & Widget pada Editor Tema

Pada halaman Editor Tema, Anda dapat menyesuaikan tampilan katalog toko dengan menambahkan berbagai widget melalui tombol +Widget sesuai kebutuhan tampilan toko Anda.


  • Cover Toko: digunakan untuk menampilkan gambar utama atau visual branding toko agar halaman katalog terlihat lebih menarik dan profesional.

  • Atur Kategori: digunakan untuk menampilkan kategori produk pada halaman toko, dengan maksimal 10 kategori.

  • Banner Toko: dapat digunakan untuk menampilkan banner promosi yang dapat diarahkan ke produk atau kategori tertentu.

  • Slide Show: digunakan untuk menampilkan beberapa gambar promosi dalam bentuk slideshow yang dapat digeser, dengan maksimal 5 gambar.
  • Produk Pilihan: digunakan untuk menampilkan produk unggulan atau best seller pada halaman katalog, dengan maksimal 5 produk.

  • Daftar Gambar: digunakan untuk menampilkan beberapa gambar dalam bentuk grid dengan pilihan layout seperti 2×2, 3×2, atau 4×2.

  • Gambar dengan Teks: digunakan untuk menampilkan gambar yang dilengkapi judul dan deskripsi, seperti informasi promo atau produk.

  • Embed YouTube: digunakan untuk menampilkan video YouTube pada halaman katalog toko. Pastikan link video dapat diakses publik.
  • Embed TikTok: digunakan untuk menampilkan video TikTok pada halaman katalog toko. Pastikan link video dapat diakses publik.


Berikut langkah-langkah melakukan pengaturan umum dan widget pada halaman Editor Tema:

Cover Toko

Cover Toko digunakan untuk menampilkan gambar utama atau visual branding toko agar halaman katalog terlihat lebih menarik dan profesional.

Langkah-langkah:

  1. Klik ikon pensil di samping tulisan Cover Toko


  2. Klik Ubah pada bagian gambar


  3. Klik tombol Pilih Gambar, lalu unggah gambar sesuai ketentuan yang tertera.
    Ketentuan unggah gambar untuk cover toko:
    • Ukuran: maks. 1MB
    • Resolusi: Rekomendasi 1200 x 628 px
    • Format: JPG, JPEG, PNG


  4. Pilih gambar yang akan menjadi cover toko olshopin Anda, lalu klik Open untuk mengunggahnya.


  5. Setelah gambar berhasil diunggah, atur posisi gambar sesuai kebutuhan. Jika posisi gambar sudah sesuai, klik Simpan untuk menerapkan.


  6. Cover toko tampil sesuai gambar yang telah Anda unggah.


  7. Jika pengaturan sudah sesuai, klik Simpan untuk menyimpan perubahan.


Kategori Produk

Atur Kategori digunakan untuk menampilkan kategori produk pada halaman toko, dengan maksimal 10 kategori.

Langkah-langkah:

  1. Klik ikon pensil di samping tulisan Atur Kategori


  2. Pilih salah satu opsi: Semua Kategori atau Kategori Tertentu.


    • Jika memilih opsi Kategori Tertentu, centang kategori yang ingin ditampilkan, lalu klik Simpan.
      *Anda dapat memilih maksimal 10 kategori.


  3. Kategori akan tampil sesuai pengaturan yang telah dipilih. Untuk melihat hasilnya, klik tab “Semua Produk” pada halaman toko.


  4. Jika pengaturan sudah sesuai, klik Simpan untuk menyimpan perubahan.


Banner Toko

Banner Toko dapat digunakan untuk menampilkan banner promosi yang dapat diarahkan ke produk atau kategori tertentu.

Langkah-langkah:

  1. Klik ikon pensil di samping tulisan Banner Toko


  2. Klik Ubah pada bagian gambar


  3. Klik tombol Pilih Gambar, lalu unggah gambar sesuai ketentuan yang tertera.
    Ketentuan unggah gambar untuk banner toko:
    • Ukuran: maks. 1MB
    • Resolusi: Rekomendasi 1200 x 628 px
    • Format: JPG, JPEG, PNG


  4. Pilih gambar yang akan menjadi banner toko Anda, lalu klik Open untuk mengunggahnya.


  5. Setelah gambar berhasil diunggah, atur posisi gambar sesuai kebutuhan. Jika posisi gambar sudah sesuai, klik Konfirmasi untuk menerapkan.


  6. Anda juga dapat menambahkan link tujuan pada banner. Dengan fitur ini, pelanggan akan diarahkan ke halaman tertentu saat banner diklik, misalnya ke halaman produk atau kategori produk.


  7. Pastikan gambar dan link tujuan yang digunakan sudah sesuai. Banner toko akan tampil sesuai gambar yang telah Anda unggah.


  8. Jika pengaturan sudah sesuai, klik Simpan untuk menyimpan perubahan.


Slide Show

Slide Show digunakan untuk menampilkan beberapa gambar promosi dalam bentuk slideshow yang dapat digeser, dengan maksimal 5 gambar.

Langkah-langkah:

  1. Klik tombol +Widget, lalu pilih Slide Show


  2. Klik ikon pensil di samping tulisan Slide Show


  3. Klik Ubah pada bagian gambar


  4. Klik tombol Pilih Gambar, lalu unggah gambar sesuai ketentuan yang tertera.
    Ketentuan unggah gambar untuk slide show:
    • Ukuran: maks. 1MB
    • Resolusi: Rekomendasi 1200 x 628 px
    • Format: JPG, JPEG, PNG


  5. Pilih gambar untuk slide show (gambar yang dapat digeser), lalu klik Open untuk mengunggahnya.


  6. Setelah gambar berhasil diunggah, atur posisi gambar sesuai kebutuhan. Jika posisi gambar sudah sesuai, klik Konfirmasi untuk menerapkan.


  7. Slide show akan tampil sesuai gambar yang telah Anda unggah.


  8. Untuk mengatur urutan gambar, tekan dan geser gambar ke atas atau bawah sesuai posisi yang diinginkan.


  9. Jika pengaturan sudah sesuai, klik Simpan untuk menyimpan perubahan.


Produk Pilihan

Produk Pilihan digunakan untuk menampilkan produk unggulan, terlaris, yang sedang promo, atau yang paling direkomendasikan pada halaman katalog toko, dengan maksimal 5 produk.

Langkah-langkah:

  1. Klik tombol +Widget, lalu pilih Produk Pilihan


  2. Klik ikon pensil di samping tulisan Produk Pilihan


  3. Klik Tambah Produk


  4. Pilih dan centang produk pilihan yang ingin ditampilkan pada beranda katalog toko (maksimal 5 produk). Setelah itu, klik tombol Pilih.


  5. Produk pilihan akan tampil pada halaman katalog toko.


  6. Jika pengaturan sudah sesuai, klik Simpan untuk menyimpan perubahan.


Daftar Gambar

Daftar Gambar digunakan untuk menampilkan promosi merek, kategori, atau konten unggulan lainnya. Gambar ditampilkan dalam berbagai pilihan layout grid atau galeri.

Langkah-langkah:

  1. Klik tombol +Widget, lalu pilih Daftar Gambar


  2. Klik ikon pensil di samping tulisan Daftar Gambar


  3. Pilih ukuran layout yang diinginkan


  4. Klik Ubah pada bagian gambar


  5. Klik tombol Pilih Gambar, lalu unggah gambar sesuai ketentuan yang tertera.
    Ketentuan unggah gambar untuk daftar gambar:
    • Ukuran: maks. 1MB
    • Resolusi: Maksimal 1200 x 1200 px
    • Format: JPG, JPEG, PNG


  6. Pilih gambar yang akan ditampilkan, lalu klik Open untuk mengunggahnya.


  7. Setelah gambar berhasil diunggah, atur posisi gambar sesuai kebutuhan. Jika posisi gambar sudah sesuai, klik Simpan untuk menerapkan.


  8. Anda juga dapat menambahkan link tujuan pada gambar. Dengan fitur ini, pelanggan akan diarahkan ke halaman tertentu saat gambar diklik, misalnya ke halaman produk atau kategori produk.


  9. Pastikan gambar dan link tujuan yang digunakan sudah sesuai. Daftar gambar akan tampil sesuai layout yang dipilih.


  10. Jika semua pengaturan sudah dilakukan, klik Simpan untuk menyimpan perubahan.


Gambar dengan Teks

Gambar dengan Teks dapat digunakan untuk menampilkan pengumuman atau promosi khusus dengan menggabungkan gambar dan teks dalam satu tampilan.

Langkah-langkah:

  1. Klik tombol +Widget, lalu pilih opsi Gambar dengan Teks


  2. Klik ikon pensil di samping tulisan Gambar dengan Teks


  3. Pilih posisi gambar untuk menentukan letak gambar, seperti di sebelah kiri, kanan, atau bagian atas.


  4. Klik Ubah pada bagian gambar


  5. Klik tombol Pilih Gambar, lalu unggah gambar sesuai ketentuan yang tertera.
    Ketentuan unggah gambar:
    • Ukuran: maks. 1MB
    • Resolusi: Maksimal 1200 x 1200 px
    • Format: JPG, JPEG, PNG


  6. Pilih gambar yang akan ditampilkan, lalu klik Open untuk mengunggahnya.


  7. Setelah gambar berhasil diunggah, atur posisi gambar sesuai kebutuhan. Jika posisi gambar sudah sesuai, klik Simpan untuk menerapkan.


  8. Selanjutnya, Anda dapat menambahkan judul gambar, deskripsi, serta link tujuan yang akan diarahkan ketika gambar diklik.


  9. Jika semua pengaturan sudah dilakukan, klik Simpan untuk menyimpan perubahan.


Video YouTube

Widget Embed YouTube digunakan untuk menampilkan video YouTube pada halaman katalog toko.

Langkah-langkah:

  1. Klik tombol +Widget, lalu pilih opsi Embed YouTube


  2. Klik ikon pensil di samping tulisan Embed Youtube


  3. Masukkan link video YouTube yang ingin ditampilkan di katalog toko Olshopin Anda


  4. Preview video akan muncul pada halaman katalog toko Anda. Setelah itu, klik Simpan untuk menyimpan pengaturan yang telah dilakukan.


Video TikTok

Widget Embed TikTok digunakan untuk menampilkan video TikTok pada halaman katalog toko.

Langkah-langkah:

  1. Klik tombol +Widget, lalu pilih opsi Embed TikTok


  2. Klik ikon pensil di samping tulisan Embed TikTok


  3. Pilih jumlah video TikTok yang ingin ditampilkan. Setelah itu, masukkan link video TikTok yang ingin ditampilkan di katalog toko Olshopin Anda


  4. Video TikTok akan muncul pada halaman katalog toko Anda. Setelah itu, klik Simpan untuk menyimpan pengaturan yang telah dilakukan.


Menyimpan Pengaturan Tema

Fitur Simpan digunakan untuk menyimpan pengaturan tema yang sedang diedit tanpa menerapkannya ke toko Olshopin Anda.

Langkah-langkah:

  1. Setelah selesai melakukan pengaturan tema, klik tombol Simpan.


  2. Sistem akan menyimpan pengaturan tema yang telah Anda lakukan sebagai draft.


Melihat Preview Tema

Fitur Preview Tema digunakan untuk melihat tampilan katalog toko sebelum tema dipublikasikan atau diterapkan di toko Olshopin Anda. Dengan fitur ini, Anda dapat memastikan tampilan katalog sudah sesuai, baik pada perangkat mobile maupun desktop.

Catatan:
• Fitur preview hanya digunakan untuk melihat simulasi tampilan tema.
• Perubahan yang terlihat di preview belum tampil di toko hingga tema dipublikasikan dan diaktifkan.

Langkah-langkah:

  1. Masuk ke halaman Editor Tema. Pada bagian preview, pilih jenis tampilan layar.


  2. Tampilan katalog akan otomatis menyesuaikan dengan perangkat yang dipilih. Lakukan pengecekan pada widget yang telah diatur sebelum tema dipublikasikan.
    • Ikon Laptop untuk melihat tampilan versi desktop.


    • Ikon HP untuk melihat tampilan versi mobile.


Mempublikasikan Tema

Fitur Publikasikan digunakan untuk menyimpan sekaligus menerapkan perubahan tema pada toko Olshopin Anda.

Langkah-langkah:

  1. Setelah selesai melakukan pengaturan tema, klik tombol Publikasikan.


  2. Sistem akan menyimpan sekaligus menerapkan tema di toko Olshopin Anda.


Mengaktifkan Tema Toko

Fitur Aktifkan Tema digunakan untuk menerapkan tema tertentu ke tampilan toko Olshopin Anda.

Langkah-langkah:

  1. Pada halaman Pengaturan Toko Online, pilih dan klik tema yang ingin diaktifkan atau diterapkan di toko Anda.


  2. Klik tombol Aktifkan Tema.


  3. Setelah berhasil diaktifkan, tema akan ditandai dengan label Aktif dan tampilan katalog toko Olshopin Anda akan berubah sesuai tema yang dipilih.

Dengan mengatur tema toko, Anda dapat membuat tampilan katalog lebih rapi dan menarik, menyesuaikan tampilan toko dengan identitas brand, memberikan pengalaman belanja yang lebih nyaman bagi pelanggan.

Selamat mencoba!


FAQS

  • Apa perbedaan fungsi tombol Simpan, Publikasikan, dan Aktifkan Tema?

    • Simpan: Digunakan untuk menyimpan pengaturan tema yang sedang diedit tanpa menerapkannya ke toko Olshopin Anda.
      Contoh:
      Anda mengubah cover dan banner, lalu klik Simpan. Perubahan tetap tersimpan, tetapi belum tampil di toko Olshopin Anda.

    • Publikasikan: Digunakan untuk menyimpan sekaligus menerapkan tema di toko Olshopin Anda.
      Contoh:
      Setelah selesai mengatur tampilan tema dan melakukan preview, klik “Publikasikan” agar tema diterapkan di toko Anda.

    • Aktifkan Tema: Digunakan untuk memilih tema mana yang ingin diterapkan sebagai tampilan aktif toko Anda.
      Contoh:
      Anda memiliki beberapa tema custom yang sudah diatur. Dengan fitur Aktifkan Tema, Anda dapat memilih salah satu tema untuk diterapkan di toko Olshopin Anda.


Apakah artikel ini cukup membantu?

Table of Contents