Dokumentasi Fitur Kostum Website Olshop Oleh Pengguna bukaOlshop

bukaOlshop merilis fitur baru yang memungkinkan pengguna bukaOlshop untuk melakukan kostumasi tampilan website olshopnya sendiri. Melalui fitur Kostum Website, pengguna diberikan kebebasan untuk menyesuaikan tampilan dan fungsi toko online sesuai dengan karakter brand masing-masing, sehingga membuat tiap website memiliki ciri khas yang berbeda dan unik.

Artikel ini menyajikan dokumentasi lengkap mengenai penggunaan fitur Kostum Website Olshop oleh pengguna bukaOlshop.

Untuk menggunakan fitur ini dengan baik dan optimal, kami sarankan agar teman-teman memahami terlebih dulu konsep dasar kode HTML dan penggunaan framework bootstrap 5.

Chapter 1 : Penjelasan Fitur

Pada fitur kostum website olshop, anda dapat melakukan perubahan pada bagian header dan footer halaman website anda. Pada bagian content atau body, akan diisi oleh tampilan yang sudah disediakan oleh bukaOlshop.

Penjelasan Struktur Website

Berikut ini penjelasan pada struktur website modern pada umummnya:

Kalau diibaratkan, website itu seperti tubuh manusia. Ada kepala (header), badan (body), dan kaki (footer). Masing-masing punya peran penting supaya website enak dilihat, mudah digunakan, dan tetap rapi secara teknis.

1. Header — Bagian Atas

Header adalah bagian paling atas dari sebuah website. Ini biasanya jadi hal pertama yang dilihat pengunjung.

Secara teknis, header sering berisi:

• Logo atau nama website

• Menu navigasi (Home, Produk, Kategori, dll)

• Tombol login, daftar, atau keranjang belanja (untuk website olshop)

Di sisi kode HTML, header umumnya dibungkus dengan tag <header> atau <nav>. Header biasanya konsisten di semua halaman, supaya pengunjung nggak bingung saat berpindah halaman.

2. Body — Isi Utama Website

Body adalah bagian inti dari website, tempat semua konten utama ditampilkan.

Di sinilah biasanya ada:

• Daftar produk, Deskripsi produk

• Form input, tabel, atau konten dinamis lainnya

3. Footer — Bagian Bawah

Footer adalah bagian paling bawah website. Walaupun sering dianggap “penutup”, fungsinya tetap krusial.

Biasanya footer berisi:

• Informasi copyright

• Link tambahan (Tentang Kami, Syarat & Ketentuan, Kebijakan Privasi)

• Kontak atau media sosial, DLL

Secara HTML, footer menggunakan tag <footer>. Sama seperti header, footer biasanya sama di semua halaman, sehingga memudahkan pengelolaan dan menjaga konsistensi tampilan.

Penjelasan Fitur Kostum Website di bukaOlshop

Fitur ini memberikan kamu kebebasan dalam melakukan perubahan pada bagian header dan footer, tanpa perlu pusing melakukan editing tiap halaman website yang jumlahnya cukup banyak. Pihak bukaOlshop juga menyediakan berbagai jenis tampilan pada bagian body ini sehingga kamu bisa memilih mana yang lebih cocok dengan identitas brand toko kamu. Pada tahap awal rilis fitur ini, kami menyediakan dua tema body, yaitu light dan dark yang bisa anda pilih.

Kamu mungkin bertanya, kenapa pada bagian body tidak bisa pengguna edit langsung?

Jawabannya, karena isi konten pada website memiliki banyak bagian yang perlu untuk selalu dimaintenance dari bug, dan perlu selalu dilakukan upgrade fitur-fitur yang mempermudah pengguna dalam menggunakan website. Dengan menyerahkan isi bagian content ini ke kami, pihak bukaOlshop dengan mudah dan cepat memperbaiki bug yang muncul dan juga melakukan update pada tampilan website, seperti melakukan penambahan jenis halaman, tanpa perlu merusak kode yang sudah ada.

Cara Kerja Fitur Kostum Website

Fitur ini memiliki kerja dengan cara menggabungkan antara header yang anda inputkan, kode html body dari bukaOlshop, dan footer yang anda inputkan.

Pada bagian body, tampilan didapatkan menggunakan <iframe> sehingga tidak akan mengganggu kode css dan javascript yang ada pada kode anda. Anda dapat dengan bebas mengganti teknologi framework yang digunakan oleh tema bawaan, tanpa merusak tampilan body.

Chapter 2 : Cara Menggunakan Fitur

Untuk mengaktifkan fitur ini, anda bisa mengklik icon gear pada tab Aplikasi -> Website Olshop

Anda akan diarahkan untuk melakukan instalasi tema website khusus terlebih dulu, setelah itu anda sudah bisa melakukan editing kode HTML.

Untuk melakukan editing kode HTML, anda memiliki 2 opsi, yaitu melalui aplikasi bukaOlshop di android, dan melalui website Admin. Bagi anda yang memiliki komputer atau laptop, kami sangat menyarankan anda  untuk melakukan editing via website Admin karena anda bisa lebih leluasa dalam melakukan editing kode, dibandingkan melalui aplikasi yang lebih terbatas.

Melakukan Editing Via Website Admin

Untuk melakukan editing via website admin, anda terlebih dulu harus mencetang izin untuk melakukan editing website.

Pertama, buka halaman user Admin anda, klik edit informasi seperti gambar dibawah:

Centang opsi “Kostum Website Olshop” lalu tekan tombol simpan di pojok kanan atas.

Jika anda login ke user tersebut di website admin, maka anda bisa melakukan editing dari website Admin.

 

Chapter 3 : Shortcode Yang Bisa Digunakan

Shortcode ini ditujukan untuk mereplace data yang bersifat umum, seperti nama toko, warna tema, icon aplikasi, dan notifikasi. Anda dapat menggunakan shortcode ini dimanapun.

Shortcode	Penjelasan
{{nama_toko}}	Nama toko
{{nama_aplikasi}}	Nama aplikasi
{{icon_aplikasi}}	URL icon aplikasi
{{judul_halaman}}	Judul halaman olshop, bisa diletakkan di head pada tag <title></title>
{{nama_saldo}}	Nama saldo olshop
{{url_website}}	URL website olshop saat ini
{{warna_utama}}	Warna utama dalam format HEX
{{warna_gelap}}	Turunan warna gelap dari warna utama, dalam format HEX
{{warna_terang}}	Turunan warna terang dari warna utama, dalam format HEX
{{warna_utama_rgb}}	Warna utama dalam format RGB
{{warna_gelap_rgb}}	Turunan warna gelap dari warna utama, dalam format RGB
{{nama_poin}}	Nama poin dari fitur POIN
{{teks_cari}}	Placeholder teks pencarian pada pengaturan branding
{{url_gambar_header}}	URL gambar header website
{{data_json_akun}}	Berisi data json data user yang sedang login