Unzip the download and keep the folder together
Ekstrak zip dan jangan pisahkan isi foldernya
After checkout you get a .zip file. Right-click it and choose Extract All (Windows) or double-click it (Mac). You will get one folder that looks like this:
Setelah bayar kamu dapat file .zip. Klik kanan lalu pilih Extract All (Windows) atau klik dua kali (Mac). Hasilnya satu folder seperti ini:
Always move or upload the whole folder. If index.html is separated from img/ and fonts/, photos disappear and the letters change.
Selalu pindahkan atau upload satu folder utuh. Kalau index.html dipisah dari img/ dan fonts/, foto akan hilang dan hurufnya berubah.
Open it on your computer
Buka di komputer kamu
- Double-click
index.html. It opens in Chrome, Safari or Edge, exactly like the live demo. - Right-click
index.htmland choose Open with → Visual Studio Code. This is where you edit. - Keep both windows side by side. After every change press Ctrl + S (Mac: ⌘ + S) in VS Code, then refresh the browser with F5 (Mac: ⌘ + R).
- Klik dua kali
index.html. Website terbuka di Chrome, Safari atau Edge, sama persis seperti live demo. - Klik kanan
index.html, pilih Open with → Visual Studio Code. Di sinilah kamu mengedit. - Taruh dua jendela berdampingan. Setiap selesai mengubah, tekan Ctrl + S (Mac: ⌘ + S) di VS Code, lalu refresh browser dengan F5 (Mac: ⌘ + R).
Change the words
Ganti teksnya
In VS Code press Ctrl + F and type a few words you see on the page, for example Skin that looks like you. VS Code jumps to that line. Change only the words between the > and <.
Di VS Code tekan Ctrl + F lalu ketik beberapa kata yang kamu lihat di halaman, misalnya Skin that looks like you. VS Code langsung lompat ke baris itu. Ganti hanya kata-kata di antara tanda > dan <.
- Don't delete the tags in pink (
<p>,</p>). They hold the design. - Made a mistake? Press Ctrl + Z to undo, as many times as you need.
- To change a whole word everywhere at once (like a brand name), use Ctrl + H (Replace).
- Jangan hapus tag yang berwarna pink (
<p>,</p>). Itu yang menjaga desainnya. - Salah edit? Tekan Ctrl + Z untuk membatalkan, berapa kali pun.
- Untuk mengganti satu kata di semua tempat sekaligus (misalnya nama brand), pakai Ctrl + H (Replace).
Change the colours in one place
Ganti warna di satu tempat
Every template keeps its colours at the very top of the file, inside :root{ … }. Change a code there and the whole website follows. Try it here first:
Setiap template menyimpan warnanya di bagian paling atas file, di dalam :root{ … }. Ganti kode warna di sana dan seluruh website ikut berubah. Coba dulu di sini:
Pick colours on the right and copy the code.
Pilih warna di kanan lalu salin kodenya.
Book now:root{--porcelain:#F5F0EA;--cocoa:#3A2A22;--champ:#B8955C}Names differ per template (Lune uses --cocoa, Koma uses --dusk). Only change the part after the colon, like #3A2A22, and keep the semicolon.
Nama warnanya beda di tiap template (Lune pakai --cocoa, Koma pakai --dusk). Ganti hanya bagian setelah titik dua, misalnya #3A2A22, dan biarkan titik komanya.
Swap the photos
Ganti foto
The easiest way: put your photo in the img folder with exactly the same file name as the one you replace (for example hero.jpg), and delete the old one. Nothing in the code needs to change.
Cara paling gampang: taruh fotomu di folder img dengan nama file yang persis sama dengan foto yang mau diganti (misalnya hero.jpg), lalu hapus yang lama. Kode tidak perlu diubah sama sekali.
Photos are cropped to fit, so the centre of your photo is what people see. Keep faces and products in the middle. To change the short description that screen readers and Google read, edit the alt="…" text next to the image.
Foto otomatis dipotong agar pas, jadi bagian tengah foto yang terlihat. Taruh wajah dan produk di tengah. Untuk mengganti deskripsi foto yang dibaca Google, edit teks alt="…" di sebelah gambar.
Connect your WhatsApp number
Sambungkan nomor WhatsApp kamu
Booking and reservation buttons in Koma, Lune, Arunika and Sekar send a ready-made message to WhatsApp. Near the bottom of index.html, search for WA_NUMBER and replace the line with the one this tool makes for you.
Tombol booking dan reservasi di Koma, Lune, Arunika dan Sekar mengirim pesan otomatis ke WhatsApp. Di bagian bawah index.html, cari WA_NUMBER lalu ganti barisnya dengan hasil dari alat ini.
Settings for your template
Pengaturan khusus tiap template
Some templates have menus, prices or schedules stored in one list near the bottom of the file, so you edit them once instead of hunting through the page. Pick yours:
Beberapa template menyimpan menu, harga atau jadwal di satu daftar di bagian bawah file, jadi cukup edit sekali tanpa mencari di seluruh halaman. Pilih template kamu:
Each guest gets a personal link, and the cover greets them by name. Paste your website address and your guest list, one name per line, then copy the links into WhatsApp.
Setiap tamu dapat link pribadi, dan sampul undangan menyapa nama mereka. Tempel alamat website dan daftar tamu (satu nama per baris), lalu salin link-nya ke WhatsApp.
Guest link maker
Pembuat link tamu
- Countdown: search
new Date('2026-12-20T08:00:00+07:00')and change the date and time.+07:00is WIB,+08:00WITA,+09:00WIT. - Bank accounts: in the "Tanda kasih" section change the bank, number and name. Also change
data-copy="1234567890"to the same number without spaces, so the copy button copies the right one. - Maps and calendar: replace the
google.com/mapslink on "Lihat lokasi" with the share link of your venue.
- Hitung mundur: cari
new Date('2026-12-20T08:00:00+07:00')lalu ganti tanggal dan jamnya.+07:00untuk WIB,+08:00WITA,+09:00WIT. - Rekening: di bagian "Tanda kasih" ganti nama bank, nomor dan nama pemilik. Ganti juga
data-copy="1234567890"dengan nomor yang sama tanpa spasi, supaya tombol salin menyalin nomor yang benar. - Lokasi: ganti link
google.com/mapsdi tombol "Lihat lokasi" dengan link share lokasi acaramu.
The whole menu (coffee, matcha, soda, desserts, snacks) lives in one list called MENU. Each drink or dish is one line: name, description, price in thousands, and an optional label.
Seluruh menu (kopi, matcha, soda, dessert, snack) ada di satu daftar bernama MENU. Setiap minuman atau makanan satu baris: nama, deskripsi, harga dalam ribuan, dan label (opsional).
For the map, open your café in Google Maps, tap Share → Embed a map, copy the link inside src="…" and paste it into the map's <iframe src="…">. The README explains it step by step.
Untuk peta, buka café kamu di Google Maps, pilih Bagikan → Sematkan peta, salin link di dalam src="…" lalu tempel ke <iframe src="…"> peta. README menjelaskan langkahnya.
Villa names and nightly rates are in one list. The stay calculator, the booking bar and the WhatsApp message all read from it.
Nama villa dan tarif per malam ada di satu daftar. Kalkulator menginap, form booking dan pesan WhatsApp semuanya mengambil dari sini.
Extras are the checkboxes in the calculator: data-p is the price, data-per="night" charges it every night. Tax and service is 21%; search 0.21 to change it. Also update the matching prices written on the villa cards.
Layanan tambahan ada di checkbox kalkulator: data-p adalah harganya, data-per="night" artinya dihitung per malam. Pajak dan service 21%; cari 0.21 untuk mengubahnya. Jangan lupa ganti juga harga yang tertulis di kartu villa.
Treatments are written straight in the page. The filter buttons read data-c: use facial, laser or inj. The "What would you like to change?" plans are in a list called P near the bottom: title, text, steps and starting price for each concern.
Daftar treatment ditulis langsung di halaman. Tombol filter membaca data-c: isi dengan facial, laser atau inj. Rekomendasi "What would you like to change?" ada di daftar P di bagian bawah: judul, teks, langkah dan harga mulai untuk tiap keluhan.
Before you publish a beauty clinic site, check that treatment names and claims follow your local health advertising rules.
Sebelum dipublikasikan, pastikan nama treatment dan klaimnya sesuai aturan iklan kesehatan yang berlaku.
The schedule builds itself for the next 7 days. Change the classes and coaches in C, and the weekday class times in TIMES. Weekend times are in the line that starts with const wk=.
Jadwal otomatis dibuat untuk 7 hari ke depan. Ganti kelas dan coach di C, dan jam kelas hari kerja di TIMES. Jam akhir pekan ada di baris yang diawali const wk=.
The Book buttons are a demo. When you go live, point them and the membership buttons to your booking app or a WhatsApp link.
Tombol Book masih demo. Saat online, arahkan tombol ini dan tombol membership ke aplikasi booking kamu atau link WhatsApp.
The booking (Biscuit) and reservation (Halte) forms show a thank-you message but don't send anything yet. The free way to receive them by email:
Form booking (Biscuit) dan reservasi (Halte) menampilkan pesan terima kasih tapi belum mengirim data ke mana pun. Cara gratis menerimanya lewat email:
- Create a free form at formspree.io and copy your address, like
https://formspree.io/f/abcdwxyz. - Find the form tag (
id="bform"orid="rsvForm") and addaction="your-address" method="POST". - Near the bottom, delete the line that starts with
….addEventListener('submit'for that form.
- Buat form gratis di formspree.io lalu salin alamatnya, seperti
https://formspree.io/f/abcdwxyz. - Cari tag form (
id="bform"atauid="rsvForm") lalu tambahkanaction="alamat-kamu" method="POST". - Di bagian bawah, hapus baris yang diawali
….addEventListener('submit'untuk form itu.
Noon to Night builds its whole shop from one list called PRODUCTS: category cards, filters, sorting, "Show more", quick view and the bag. To add a product, put the photo in img and copy one line:
Noon to Night membangun seluruh tokonya dari satu daftar bernama PRODUCTS: kartu kategori, filter, urutan harga, tombol "Show more", quick view dan keranjang. Untuk menambah produk, taruh fotonya di folder img lalu salin satu baris:
Hundreds of products? Use a Google Sheet instead. Import the included products.csv into Google Sheets, then choose File → Share → Publish to web → CSV and paste that link into sheet:''. From then on you edit the spreadsheet and the website follows. The bag sends the order to your WhatsApp; set the number in whatsapp: and the currency with currency:'IDR', locale:'id-ID'.
Produknya ratusan? Pakai Google Sheet. Import file products.csv yang sudah disertakan ke Google Sheets, lalu pilih File → Bagikan → Publikasikan ke web → CSV dan tempel link-nya di sheet:''. Setelah itu cukup edit spreadsheet, website ikut berubah. Keranjang mengirim pesanan ke WhatsApp kamu; isi nomornya di whatsapp: dan ubah mata uang dengan currency:'IDR', locale:'id-ID'.
Dewlab shows a fixed set of products. Link each product button to where you already sell (Lynk.id, Shopee, Tokopedia or a WhatsApp message) by changing its href="#".
Dewlab menampilkan produk tetap. Sambungkan tombol tiap produk ke tempat kamu berjualan (Lynk.id, Shopee, Tokopedia atau pesan WhatsApp) dengan mengganti href="#"-nya.
Lumen, Loud Hours, Ivers, Sora and Amara have no hidden settings. Everything you see is plain text in the page: steps 03 to 05 are all you need. For Amara, paste your own links into each href="#".
Lumen, Loud Hours, Ivers, Sora dan Amara tidak punya pengaturan tersembunyi. Semua yang terlihat adalah teks biasa di halaman, jadi cukup langkah 03 sampai 05. Untuk Amara, tempel link kamu di setiap href="#".
Put it online, free, with Netlify Drop
Online-kan gratis lewat Netlify Drop
- Open app.netlify.com/drop and sign up free with Google.
- Drag the whole folder (not the zip, not only index.html) onto the dotted box.
- Wait about 10 seconds. You get a link ending in
.netlify.app. Your website is live and works on every phone. - Go to Site configuration → Change site name to make the link readable, like
lune-clinic.netlify.app. - Made changes later? Open your site in Netlify, choose Deploys, and drag the updated folder in again.
- Buka app.netlify.com/drop lalu daftar gratis pakai Google.
- Drag satu folder utuh (bukan file zip, bukan hanya index.html) ke kotak bergaris.
- Tunggu sekitar 10 detik. Kamu dapat link berakhiran
.netlify.app. Website sudah online dan bisa dibuka di semua HP. - Masuk ke Site configuration → Change site name supaya link-nya mudah dibaca, misalnya
lune-clinic.netlify.app. - Ada perubahan nanti? Buka situsmu di Netlify, pilih Deploys, lalu drag folder yang sudah diperbarui ke sana.
Vercel, GitHub Pages and any hosting with a file manager also work. Upload the contents of the folder into public_html.
Vercel, GitHub Pages dan hosting apa pun yang punya file manager juga bisa. Upload isi folder ke public_html.
Use your own domain
Pakai domain sendiri
- Buy a domain at any registrar (Niagahoster, Rumahweb, Namecheap, Cloudflare). A
.comor.idcosts around Rp150–250k a year. - In Netlify open Domain management → Add a domain and type your domain.
- In your registrar's DNS page, add the two records below. Netlify shows the exact values for your site.
- Wait. It usually works within an hour, sometimes up to 24 hours. Netlify adds the free HTTPS padlock automatically.
- Beli domain di registrar mana pun (Niagahoster, Rumahweb, Namecheap, Cloudflare). Domain
.comatau.idsekitar Rp150–250 ribu per tahun. - Di Netlify buka Domain management → Add a domain lalu ketik domain kamu.
- Di halaman DNS registrar, tambahkan dua record di bawah. Netlify menampilkan nilai yang tepat untuk situsmu.
- Tunggu. Biasanya aktif dalam satu jam, kadang sampai 24 jam. Netlify otomatis memasang gembok HTTPS gratis.
| Type | Name / Host | Value |
|---|---|---|
A | @ | 75.2.60.5 |
CNAME | www | your-site.netlify.app |
Edit the design in Figma
Edit desainnya di Figma
Useful if you design for clients and want to show changes before you code them.
Berguna kalau kamu mendesain untuk klien dan mau menunjukkan perubahan sebelum dikerjakan di kode.
- Put the site online first (step 08) and copy its link.
- In Figma, open Plugins and run the free html.to.design plugin.
- Paste the link, tick Desktop and Mobile, and import. Every section becomes editable layers.
- Online-kan dulu websitenya (langkah 08) lalu salin link-nya.
- Di Figma, buka Plugins lalu jalankan plugin gratis html.to.design.
- Tempel link, centang Desktop dan Mobile, lalu import. Setiap bagian jadi layer yang bisa diedit.
Something not working?
Ada yang tidak jalan?
Photos are missing or the letters look differentFoto hilang atau hurufnya berubah
index.html was moved away from its img and fonts folders. Put them back in the same folder, or upload the whole folder again.
index.html terpisah dari folder img dan fonts. Satukan lagi dalam satu folder, atau upload ulang folder utuhnya.
One photo doesn't showSatu foto tidak muncul
The file name doesn't match exactly. Check uppercase letters and the ending: hero.jpg, hero.JPG and hero.jpeg are three different names online.
Nama file tidak persis sama. Cek huruf besar kecil dan akhirannya: hero.jpg, hero.JPG dan hero.jpeg dianggap tiga nama berbeda saat online.
The layout broke after I editedTampilan berantakan setelah diedit
A tag or quote mark was deleted by accident. Press Ctrl + Z in VS Code until the page looks right again, then edit only the words between the tags.
Ada tag atau tanda kutip yang tidak sengaja terhapus. Tekan Ctrl + Z di VS Code sampai tampilan normal lagi, lalu edit hanya kata-kata di antara tag.
WhatsApp opens the wrong numberWhatsApp membuka nomor yang salah
The number must start with the country code and have no +, spaces or dashes, for example 6281234567890. Use the fixer in step 06.
Nomor harus diawali kode negara tanpa +, spasi atau strip, contohnya 6281234567890. Pakai perapih nomor di langkah 06.
My changes don't show on the live sitePerubahan tidak muncul di website online
Drag the updated folder into Netlify again (Deploys tab), then refresh your phone with the browser's reload button. Old versions can stay cached for a minute.
Drag lagi folder terbaru ke Netlify (tab Deploys), lalu refresh browser di HP. Versi lama kadang masih tersimpan sekitar satu menit.
Rather not do it yourself?
Tidak mau repot?
Send us your texts, photos and WhatsApp number. We set up the template, connect your domain and hand you a live website, usually within 3 working days.
Kirim teks, foto dan nomor WhatsApp kamu. Kami pasangkan templatenya, sambungkan domain, dan serahkan website yang sudah online, biasanya dalam 3 hari kerja.