# Cara Setup E-Catalog

Pernah kepikiran punya **katalog online** yang bisa dibuka orang lewat HP, tampilannya rapi seperti mini website, dan bisa dibagikan lewat WhatsApp atau Instagram?

Nah, fitur **E-Catalog Builder** ini ibarat “tukang jahit” yang merapikan semua: mulai dari nama usaha, logo, daftar produk, sampai link ke marketplace. Kamu tinggal isi dan pilih-pilih, lalu katalog jadi.

Sebelum mulai, ada urutan paling aman biar gak bingung:

1. **Buat dulu produk di menu Manage Products** (nama, harga, foto, dll).
2. Baru setelah itu, masuk ke **E-Catalog** untuk menyusun tampilannya.

***

### 1) Kenalan dulu dengan halaman E-Catalog

Setelah kamu login:

* Masuk menu **E-Catalog**.
* Kamu akan lihat layar terbagi dua:

**Bagian kiri (besar)** → tempat ngatur semuanya (nama usaha, link, produk, tampilan, dan lain-lain).\
**Bagian kanan (lebih kecil)** → **preview** katalog (seperti tampilan di HP), jadi kamu bisa lihat hasilnya langsung.

Di bagian atas ada tombol yang sering dipakai:

* **Mulai Cepat** → panduan cepat untuk yang baru pertama kali.
* **Load** → ambil versi terakhir yang pernah tersimpan.
* **Save** → simpan manual (walau biasanya sudah otomatis).
* **Preview** → bikin tampilan contoh dari server (opsional).
* **Publish** → ini yang membuat katalog kamu benar-benar tampil di link publik.

Ada juga tulisan kecil seperti “tersimpan”, “menyimpan…”, atau “belum tersimpan”. Itu penanda apakah perubahanmu sudah aman tersimpan.

***

### 2) Isi Identitas Katalog (Nama usaha, logo, warna, font)

Di bagian paling atas, kamu akan ketemu bagian **Identitas katalog**. Ini ibarat “wajah” katalog kamu.

Yang perlu kamu isi:

#### A. Nama usaha & tagline

* **Nama Usaha**: misalnya *Toko Roti Ibu Ani*
* **Tagline**: kalimat singkat, misalnya *Fresh bakery setiap pagi*

#### B. Upload logo

* Klik pilih file logo.
* Setelah itu biasanya muncul layar kecil untuk menyesuaikan posisi logo (biar pas).
* Kalau sudah oke, klik **Simpan**.

Kalau logo sukses, kamu langsung lihat:

* logo muncul di kanan,
* dan preview katalog di “layar HP” ikut berubah.

#### C. Favicon (ikon kecil di tab browser)

Ini ikon kecil banget yang muncul di tab browser. Kalau belum punya, boleh di-skip dulu, tapi kalau ada lebih bagus.

#### D. Warna tema

Ini warna utama katalog kamu—biasanya dipakai untuk tombol, aksen, atau garis tepi.

Kamu bisa:

* pilih lewat kotak warna, atau
* ketik kode warna (kalau sudah punya).

#### E. Font dan gaya kartu produk

Tenang, ini bukan hal teknis. Ibaratnya kamu memilih “tulisan” dan “bentuk kartu” produk:

* tulisannya mau yang mana,
* kartu produknya sudut bulat atau kotak,
* jarak antar produk mau rapat atau renggang.

Kalau bingung, gunakan tombol tema siap pakai seperti:

* **Classic**
* **Modern**
* **Dark**

Itu seperti “baju jadi”—langsung bagus tanpa banyak ngatur.

***

### 3) Tambahkan Link Penting (WhatsApp, Instagram, marketplace)

Selanjutnya ada bagian **Tautan Penting**. Ini tempat kamu menaruh link yang sering ditanya pelanggan, misalnya:

* Instagram
* WhatsApp
* Tokopedia / Shopee
* Website

Kamu bisa pilih cara cepat:

#### Cara cepat (pakai template)

Misalnya mau tambah Instagram:

1. Klik tombol **Instagram**
2. Nanti otomatis muncul baris “Instagram”
3. Tinggal lengkapi link-nya, misalnya:\
   `https://instagram.com/balesotomatis.id`

#### Cara manual

Kalau link-nya bukan yang tersedia di tombol cepat:

1. Klik tombol **Tambah tautan baru (+)**
2. Isi:
   * **Label**: misalnya “Website” atau “Shopee Promo”
   * **URL**: tempel link-nya

Kalau mau hapus, tinggal klik ikon tempat sampah.

Di katalog, link-link ini tampil seperti tombol kecil/label yang gampang diklik.

***

### 4) Pilih Produk Unggulan (produk yang mau ditonjolkan)

Bagian **Produk** terhubung ke produk yang sudah kamu buat sebelumnya.

Cara memilih produk unggulan:

1. Klik tombol **Kelola daftar produk** (ikon kotak).
2. Akan muncul daftar semua produk.
3. Di tiap produk ada ikon **bintang**:
   * bintang kosong → belum unggulan
   * bintang terisi → jadi unggulan
4. Klik bintangnya sesuai kebutuhan.

Setelah kamu tutup, produk unggulan akan muncul di preview dan jadi bagian utama katalog.

***

### 5) Bikin Bagian Tambahan (Sections): Koleksi, Cerita singkat, atau konten bebas

Kalau katalog kamu mau terlihat lebih “niat” dan enak dijelajah, gunakan **Sections**. Anggap saja ini seperti kamu menambahkan beberapa “ruangan” di katalog.

Contohnya:

* “Best Seller”
* “Promo Mingguan”
* “Produk Baru”
* “Cerita di balik produk”
* dan lainnya

Klik **Tambah section baru (+)**, lalu pilih tipe section:

#### A. Section “Catalog produk” (koleksi produk)

Cocok untuk bikin kelompok produk.

Kamu bisa pilih cara menampilkan produknya, misalnya:

* tampilkan yang terbaru,
* urutkan harga,
* urutkan stok,
* atau **pilih manual** (paling enak kalau mau pilih produk tertentu untuk promo).

Kalau pilih manual, kamu bisa cari produk, lalu masukin ke section itu satu per satu.

#### B. Section “Mini blog” (cerita pendek)

Ini bagian untuk posting tulisan singkat, misalnya:

* “Menu baru minggu ini”
* “Promo spesial akhir pekan”
* “Cerita bahan baku kami”

Kamu bisa isi judul, tambah foto (kalau mau), dan menulis isi ceritanya. Nanti tampil seperti kartu-kartu artikel kecil.

#### C. Section “HTML bebas”

Bagian ini lebih cocok kalau kamu memang butuh tempel sesuatu yang spesifik (misalnya kode tertentu). Kalau kamu pengguna awam, biasanya **bagian ini boleh dilewati**.

***

### 6) Atur Judul & Deskripsi Katalog (biar gampang ditemukan dan bagus saat dibagikan)

Ada bagian **SEO**. Anggap saja ini bagian “tampilan katalog saat muncul di Google atau saat kamu kirim link ke orang”.

Yang biasanya penting:

* **Judul**: contoh “Katalog Toko Roti Ibu Ani – Fresh Bakery Setiap Hari”
* **Deskripsi**: 1–2 kalimat penjelasan singkat
* **Slug**: ini bagian belakang link katalog (misalnya `toko-ibu-ani`)

Slug itu seperti “nama alamat” katalog kamu. Usahakan:

* sederhana,
* pakai huruf kecil,
* pakai tanda minus kalau ada spasi.

Kamu juga bisa upload **gambar preview** yang muncul saat link dibagikan (misalnya untuk WhatsApp).

***

### 7) Lihat Hasilnya di Preview “Layar HP”

Di sisi kanan ada tampilan seperti HP. Ini gunanya supaya kamu bisa lihat hasil akhirnya tanpa buka tab lain.

Yang bisa kamu lihat langsung:

* logo (atau inisial kalau belum ada logo),
* nama usaha & tagline,
* link-link tombol,
* produk unggulan,
* section-section yang kamu buat.

Kalau ada yang terasa aneh, tinggal balik ke kiri dan atur lagi.

***

### 8) (Opsional) Pasang Pixel Facebook & TikTok

Kalau kamu pakai iklan Facebook atau TikTok, biasanya ada pelacakan untuk tahu orang ngapain di katalog (misalnya cuma lihat-lihat atau sudah sampai tahap beli).

Di sini kamu cukup:

* pilih event untuk “orang buka halaman”
* pilih event untuk “orang checkout”

Kalau kamu tidak pakai iklan, bagian ini aman untuk dilewati.

***

### 9) Cara paling gampang: pakai “Mulai Cepat”

Kalau kamu benar-benar baru pertama kali, klik tombol **Mulai Cepat**.

Wizard ini ngajak kamu lewat 3 langkah:

1. Isi nama usaha + upload logo
2. Pilih 3–5 produk pertama (bahkan bisa tambah produk baru kalau belum punya)
3. Pilih tema, warna, isi slug, dan tambah link cepat (WhatsApp/Instagram/marketplace)

Setelah selesai, banyak pengaturan langsung terisi otomatis. Kamu tinggal poles sedikit kalau perlu.

***

### 10) Tombol penting: Load, Save, Preview, Publish

Biar gak salah langkah, ini versi gampangnya:

* **Load** → balik ke versi terakhir yang tersimpan (kalau kamu merasa “kok tadi lebih bagus ya”).
* **Save** → simpan manual (buat memastikan).
* **Preview** → bikin versi contoh dari server (opsional).
* **Publish** → ini yang bikin katalog kamu benar-benar tayang dan bisa dibagikan.

Kalau sudah puas dengan preview “layar HP”, langkah paling penting adalah: **Publish**.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.balesotomatis.id/e-commerce/cara-setup-e-catalog.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.