Theme e-commerce modern untuk toko online UMKM Indonesia. Dibangun dengan Tabler Core CSS dan Inter — tampilan bersih, profesional, dan fully responsive.
Halaman
| File | Deskripsi |
|---|---|
index.html |
Beranda — hero banner, kategori, produk unggulan, testimoni |
products.html |
Katalog produk — filter sidebar, grid produk, pagination |
product.html |
Detail produk — galeri, varian, ulasan, produk terkait |
cart.html |
Keranjang belanja — ringkasan, voucher, estimasi ongkir |
checkout.html |
Checkout — form alamat, pilih kurir, metode pembayaran |
orders.html |
Riwayat pesanan — filter status, daftar pesanan |
order-detail.html |
Detail pesanan — produk, timeline pengiriman, ringkasan |
order-success.html |
Konfirmasi pesanan berhasil |
invoice.html |
Invoice cetak-siap — tabel produk, total, info kurir |
account.html |
Profil akun — data diri, statistik, sidebar navigasi |
addresses.html |
Manajemen alamat pengiriman |
wishlist.html |
Daftar produk tersimpan — tambah ke keranjang, hapus |
tracking.html |
Lacak pengiriman via nomor resi — timeline status |
about.html |
Tentang kami — cerita, nilai perusahaan, tim |
blog.html |
Daftar artikel — featured post, grid, sidebar |
blog-post.html |
Artikel lengkap — author bio, artikel terkait |
faq.html |
FAQ accordion — filter kategori, search |
cara-belanja.html |
Panduan belanja 4 langkah — metode pembayaran |
contact.html |
Kontak — form, info kantor |
login.html |
Halaman masuk |
register.html |
Halaman daftar akun baru |
forgot-password.html |
Alur reset password |
404.html |
Halaman tidak ditemukan |
Fitur
Belanja
- Katalog produk dengan filter kategori, harga, dan rating
- Halaman detail produk dengan galeri foto dan pilihan varian
- Keranjang belanja dengan input kode voucher
- Checkout multi-langkah: alamat → kurir → pembayaran
- Wishlist untuk menyimpan produk favorit
Akun & Pesanan
- Profil akun dengan sidebar navigasi dan statistik
- Manajemen multi-alamat pengiriman
- Riwayat pesanan dengan filter status
- Timeline pengiriman per pesanan
- Invoice print-ready dengan
@media print - Lacak resi pengiriman
Konten
- Blog dengan featured post, grid artikel, dan sidebar
- FAQ accordion dengan filter kategori dan live search
- Panduan cara belanja langkah demi langkah
- Halaman tentang kami dan kontak
Teknis
- Tabler Core CSS (CDN)
- Google Fonts — Inter
- Navbar dan footer lengkap per halaman (tanpa injeksi JS)
- Fully responsive (mobile-first)
- Bootstrap Icons via Tabler
Struktur Direktori
indotoko/
├── assets/
│ └── images/
│ └── screenshot.png
├── css/
│ └── style.css
├── index.html
├── products.html
├── product.html
├── cart.html
├── checkout.html
├── orders.html
├── order-detail.html
├── order-success.html
├── invoice.html
├── account.html
├── addresses.html
├── wishlist.html
├── tracking.html
├── about.html
├── blog.html
├── blog-post.html
├── faq.html
├── cara-belanja.html
├── contact.html
├── login.html
├── register.html
├── forgot-password.html
├── 404.html
├── CHANGELOG.md
└── theme.json
Warna
| Variabel | Nilai | Keterangan |
|---|---|---|
--primary-color |
#28c76f |
Hijau utama |
--secondary-color |
#20bf6b |
Hijau sekunder |
--accent-color |
#1dd1a1 |
Aksen teal |
Untuk mengganti warna tema, ubah variabel di bagian :root pada css/style.css.
Dependensi (CDN)
<!-- Tabler Core CSS -->
<link href="https://unpkg.com/@tabler/core@latest/dist/css/tabler.min.css" rel="stylesheet"/>
<!-- Google Fonts: Inter -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet"/>
<!-- Tabler Core JS -->
<script src="https://unpkg.com/@tabler/core@latest/dist/js/tabler.min.js"></script>