# About

Oceanesia Doc Tutorial.

Documentasi, tutorial dan penggunaan website toko online oceanesia.


# Features


# Aplikasi Android

Website Kamu bisa ditampilkan dalam aplikasi android, jadi customer bisa langsung order via aplikasi tanpa perlu membuka website. Customer cukup download aplikasi android dengan nama websitemu, lalu buka aplikasi, dan melakukan checkout seperti biasa.

Keuntungan yang didapatkan jika pemilik website menggunakan aplikasi android :

* Menaikkan traffic.
* Data yang telah diupdate di website akan otomatis terupdate juga di aplikasi (tanpa perlu update data 2x).
* Customer yang order melalui aplikasi akan mendapatkan notif order dari aplikasi.<br>

**\*Ketentuan:**

* Belum include di semua paket.
* Untuk paket **Advance,** **Pro**, dan **Private** Anda bisa berlangganan aplikasi android ini seharga *Rp600.000/tahun.*
* Untuk paket **Starter**, Anda perlu *mengupgrade terlebih dahulu ke paket Advance/Pro/Private* untuk bisa berlangganan aplikasi android ini.


# Blog Wordpress

Dengan fitur ini Anda bisa menambahkan blog Wordpress pada website Anda yang akan ditampilkan pada subdomain atau domain khusus.

**Ketentuan:**

* Fitur ini **belum tersedia secara otomatis pada semua paket website.**
* Fitur ini *bisa dibeli terpisah seharga Rp350.000 pada tahun pertama, dan biaya perpanjang di tahun berikutnya Rp120.000/tahun.*


# Cek Mutasi Bank

Automatic Cek Mutasi Bank

#### Automatic Cek Mutasi Bank

Dengan fitur ini, Kamu tidak perlu lagi repot untuk melakukan cek manual pembayaran ke mutasi Bank. Setiap pembayaran yang masuk (dari customer) maka secara otomatis sistem akan melakukan cek dan update status order pada website menjadi **"paid by sistem".**<br>

#### \*Ketentuan:

* Dukungan Bank: BCA.
* Internet banking BCA individual harus aktif.
* Biaya Charge Rp650,-/per sukses transaksi. (bayar hanya untuk yang sukses transaksi saja).
* Untuk paket **Starter**, Anda harus *mengupgrade terlebih dahulu ke paket Advance/Pro/Private* untuk dapat menikmati fitur ini.
* Untuk paket **Advance**, Anda hanya perlu *topup saldo min. Rp50.000.* Silahkan kontak ke admin untuk melakukan top up saldo (E-Wallet), atau juga dapat langsung order top up saldo ke member area.
* Untuk paket **Pro** sudah otomatis *free* *mendapatkan saldo sebesar Rp300.000.*
* Untuk paket **Private** sudah otomatis *free* *mendapatkan saldo sebesar Rp1.000.000.*<br>

#### \*Pay as you go:

* Tidak ada biaya bulanan / subscribe bulanan.
* Biaya yang lebih transparant dan fleksible sesuai dengan jumlah transaksi sukses yang terjadi.
* Saldo E-wallet Anda selamanya tidak akan hangus, dan masih bisa digunakan sampai habis.<br>

#### \*Rekomendasi:

* Disarankan sebelum menggunakan plugin ini anda sudah mengaktifkan / memasang plugin [WhatsApp Notif Order ](https://docs.oceanesia.com/fitur/whatsapp-notif-order)untuk mendapatkan realtime update langsung ke WhatsApp Kamu ketika ada sukses pembayaran yang masuk.<br>

#### \*Cara Penggunaan

* Pada Dashboard admin, masuk ke menu Ekstensi > Modul > Mutasi Bank > input username dan pass i-banking kamu > klik save.
* Anda dapat melihat history transaksi sukses "modul cek mutasi" pada table report E-Wallet. setiap transaksi sukses otomatis mengurangi saldo E-Wallet

#### \*Security

* Kami menjaga sepenuhnya privasi akun Bank Anda.
* Tidak ada data transaksi bank yang kami simpan pada database kami.
* Untuk menjaga keamanan password i-banking Anda. Saat Anda mengupdate/input password i-banking, otomatis sistem akan melakukan clear password pada browser.


# Comodo SSL

Security tambahan untuk enkripsi data pada website.

#### Comodo SSL

SSL adalah protokol keamanan standar yang menetapkan tautan terenkripsi antara server web dan peramban, sehingga memastikan bahwa semua komunikasi yang terjadi antara server web dan peramban tetap dienkripsi dan karenanya bersifat pribadi. Sertifikat SSL saat ini merupakan standar industri yang digunakan oleh jutaan situs web di seluruh dunia untuk melindungi semua komunikasi dan data yang dikirimkan secara online melalui situs web.\
\
Ciri website yang menggunakan SSL adalah pada bagian url domain menggunakan protokol HTTPS

![](/files/-LVN-1x2rGY48IzwbnWH)

**Comodo SSL** merupakan fitur enkripsi premium dari perusahaan Comodo. Tingkat kemanannya lebih tinggi dan lebih berlapis dibandingkan dengan SSL yang standar. Untuk lebih detil dapat mengakses langsung ke website comodo pada [halaman berikut](https://ssl.comodo.com/).

#### Ketentuan:

Comodo SSL ***belum tersedia*****&#x20;pada semua paket.** Kamu bisa order SSL ini secara terpisah dengan berlangganan *Rp172.000/tahun*.<br>

**Manfaat SSL:**

* Meningkatkan kepercayaan pengunjung website untuk melakukan transaksi atau bisnis dengan Anda.
* Mengamankan transaksi yang ada di website dengan enkripsi termasuk data kartu kredit, password, dll.
* Website yang menggunakan SSL/HTTPS mendapatkan ranking SEO yang lebih baik dari Google dibanding dengan website yang tidak diproteksi dengan SSL.
* Berhak menampilkan SSL Secured Seal di website.
* Meningkatkan penjualan atau conversion rate di website sebagai hasil dari kepercayaan konsumen yang meningkat.<br>

**Mengapa SSL Certificate Harganya Bervariasi?**

Antara SSL yang harganya mahal dan murah, keduanya memiliki fungsi yang sama yaitu mengamankan transaksi di website Anda dengan teknologi enkripsi. Namun hanya saja tingkat lapisan keamanannya yang berbeda.


# Copyright Footer

Custom Copy Right Footer

#### Custom Copyright Footer

Kamu masih bisa mengubah Copyright pada footer website. Misalnya Kamu ingin menghilangkan Credit link pembuat website Oceanesia.

![](/files/-LVMteQg5fAk6Go39vj-)

Pada gambar di atas Kamu masih bisa menghilangkan tulisan/url Oceanesia pada footer website. Disediakan menu editornya di admin website.

#### \*Ketentuan:

* Fitur *sudah otomatis tersedia* pada paket **Advance, Pro,** dan **Private** (*Free).*
* Khusus paket **Starter**, harus *upgrade terlebih dahulu ke paket Advance/Pro/Private* apabila ingin menghilangkan footer Oceanesia.


# Custom Group Product

Custom group product adalah pengelompokan produk berdasarkan grup pelanggan. \
Misalnya, produk A hanya ditampilkan untuk grup pelanggan default, dan produk B hanya ditampilkan untuk grup pelanggan reseller. Jadi, pelanggan reseller tidak akan bisa melihat produk A, dan pelanggan default tidak akan bisa melihat produk B.

**Ketentuan:**

* Fitur ini *belum otomatis tersedia pada semua paket website.*
* Fitur *dijual terpisah seharga Rp370.000/sekali bayar.*


# Custom Landing Page

Landing page merupakan halaman pada website yang didesign khusus dengan mindset marketing.\
Pada landing page, Anda bisa menyediakan informasi lengkap terkait produk yang Anda tawarkan. Tujuan pembuatan landing page adalah mendorong calon pelanggan untuk fokus pada satu produk, membeli produk/melakukan transaksi, mengisi formulir, dan mempelajari informasi yang diberikan.

Kami sebagai penyedia website, bisa membantu Anda membuat landing page untuk membangun strategi marketing pada website Anda. *Biaya pembuatan landing page dimulai dari Rp1.000.000*, dan harga akan disesuaikan lagi dengan kebutuhan Anda serta tingkat kesulitan pembuatannya, dan harga tersebut sudah include banner design.


# Custom Poin

Fitur ini memungkinkan Anda untuk menambahkan poin bagi customer yang sudah berbelanja di website Anda dengan perhitungan persentase.

**Contoh:**\
Misalnya Anda setting nilai poin yang akan didapatkan oleh customer sebesar 5% dari total belanja, jadi jika customer sudah berbelanja di website Anda dengan total Rp500.000, maka mereka akan mendapatkan poin sebesar 25.000 (500.000 x 5%).<br>

**Ketentuan:**

* Fitur ini *belum otomatis tersedia pada semua paket website.*
* Fitur *dijual terpisah seharga Rp240.000/sekali bayar.*


# Custom Sistem

Layanan Custom Sistem dari Oceanesia

#### Layanan Custom Sistem

Oceanesia menyediakan layanan custom sistem bagi kamu yang menginginkan sistem khusus tambahan diluar sistem default yang disediakan pada website.

#### \*Ketentuan:

* Kamu *bisa menambahkan custom sistem apabila kamu sudah berlangganan* paket website **Advance, Pro,** dan **Private.**&#x20;
* Untuk paket **Starter**, Anda perlu *mengupgrade terlebih dahulu ke paket Advance/Pro* untuk bisa menambahkan custom sistem website.
* Budget custom dimulai dari **Rp300rb-Rp6jt/modul.**
* Standar lama waktu pengerjaan estimasi antara **1-60 hari kerja** per modul atau lebih.
* Hitungan biaya dan waktu pengerjaan bersifat relatif/ berdasarkan tingkat kesulitan yang diminta.
* Apabila kamu berminat, silahkan untuk konsultasi langsung ke [admin kami](https://www.oceanesia.com/contact) atau whatsApp ke **+6281348888625.**

**\*Langkah Pemesanan:**

* Kontak dan konsultasi ke admin mengenai tambahan custom fitur website yang Kamu inginkan.
* Selanjutnya dari hasil informasi yang didapat Team Oceanesia akan mengirimkan penawaran harga ke pada kamu.
* Apabila harga sudah Oke, Team Oceanesia akan mengirimkan Invoice Order Custom

**\*Pembayaran**

* Apabila nilai harga modul masih dibawah Rp1,5jt, maka client membayar DP 50% dan sisanya 50% diakhir.
* Apabila nilai harga modul diatas Rp1,5jt, maka client membayar DP 33%, selanjutnya 33% saat demo modul sudah jadi , dan sisanya 33% diakhir ketika modul sudah 100% selesai.


# Customization teks notif WA

Fitur notifikasi whatsapp adalah fitur yang dimana jika customer kamu melakukan order maka kamu dan customer akan mendapatkan notifikasi order di whatsapp.

Fitur notifikasi whatsapp bisa dilihat pada link berikut: [Whatsapp Notifikasi Order](https://docs.oceanesia.com/features/whatsapp-notif-order)&#x20;

Teks notif WA standar dari kami masih bisa dimodifikasi sesuai kebutuhan, untuk harganya tergantung seberapa banyak teks dan notifikasi apa saja yang ingin diubah, silahkan langsung kontak ke [admin kami](https://wa.me/6281292227937) ya.


# Design Banner

Kami akan membantu Anda mendesign gambar banner untuk website yang sesuai dengan tema produk yang Anda tawarkan.

**Ketentuan:**

* Kami akan buatkan 2 gambar banner utama (banner slider) ditambah dengan mini banner pada page home sesuai jenis template yang diambil.
* Layanan design banner ini *sudah termasuk* ke dalam paket **Private** *(free)*.
* Untuk paket **Starter**, **Advance** dan **Pro**, Anda bisa menambah layanan design banner ini dengan harga *Rp280.000.*


# Design Logo

Kami akan membantu Anda untuk mendesain logo sesuai dengan citra brand And&#x61;**.**

**Ketentuan:**

* Kami akan buatkan 3 opsi pilihan design yang tersedia + 1 kali opsi revisi design untuk 1 logo yang dipilih.
* Layanan design logo ini sudah termasuk ke dalam paket **Private** *(free)*.&#x20;
* Untuk paket **Starter, Advance** dan **Pro**, Anda bisa menambah layanan design logo ini dengan harga *Rp300.000.*


# Diskon Pengiriman

Fitur diskon pengiriman digunakan untuk membuat kupon yang dapat dicairkan menjadi discount shipping (diskon pengiriman). Jadi jika customer menggunakan kupon ini, maka harga ongkos kirimnya akan terpotong.

&#x20;

**\*Cara kerja Diskon Pengiriman:**

Misalnya admin menetapkan kupon diskon pengiriman sebesar Rp10.000 untuk semua ekspedisi, lalu kode kupon tersebut diinfokan kepada para customer agar customer bisa menggunakannya pada saat checkout.&#x20;

Saat customer checkout, ia melihat ongkos kirim sebelum menggunakan kupon yaitu Rp15.000, lalu customer menggunakan kupon tadi, maka harga ongkos kirimnya pun otomatis terpotong menjadi Rp5.000. Jadi customer cukup membayarkan harga produk ditambah dengan ongkos kirim Rp5.000.

Untuk mensetting diskon pengiriman, Anda bisa lihat di [halaman berikut](https://docs.oceanesia.com/tutorial-1/manual-book-v-1-0/setting-diskon-pengiriman).<br>

**\*Ketentuan:**

* Plugin ini *belum otomatis tersedia pada semua paket website.*
* Plugin dijual terpisah seharga *Rp150.000/ sekali bayar.*


# Dropship Sistem

Mendukung Transaksi Dropship Pada Website Anda

#### Dropship Sistem

Dengan fitur dropship ini akan memudahkan team Dropshiper kamu melakukan pemesanan produk di website. Setiap order pesanan dari mereka pada data invoice pengirim akan otomatis diubah menjadi atas nama si Dropshiper tersebut.

![](/files/-LVMxh2xVptn-2eNhNPf)

Pada saat checkout disediakan kolom input data toko dropship seperti pada gambar diatas. Kemudian otomatis pada invoice pemesanan akan berubah a/n si dropshiper.

![](/files/-LVMxjw3pDlyELYX8bA7)

#### \*Ketentuan

* Fitur ini *sudah otomatis tersedia* pada paket **Advance, Pro** dan **Private**. (*free).*
* Khusus paket **Starter**, Kamu *perlu mengupgrade paket website menjadi paket Advance, Pro, dan Private* untuk menikmati fitur ini.

#### \*Penggunaan:

* Kamu bisa mengaktifkan fitur ini dengan masuk ke menu ekstensi > modul > dropship, edit , setting "aktif" > simpan.


# Facebook Login

Fitur Login Cepat Ke Website dengan Facebook Login

#### Facebook Login

Dengan fitur Facebook Login ini akan memudahkan customer kamu saat register atau login ke website. Cukup klik login dengan facebook, otomatis pelanggan akan login ke akun mereka di website.

![](/files/-LVMyN7Xb7Hph9IS49Q1)

#### \*Ketentuan

* Fitur ini *belum otomatis tersedia pada semua paket website.*
* Plugin dijual terpisah dengan harga *Rp185rb/Sekali Bayar.*

#### \*Penggunaan:

* Untuk setup Facebook Login ini kamu bisa masuk ke menu **Ekstensi > Modul > Facebook Login > Input App Id dan App Secret FB > set "aktif" simpan**. Atau juga dapat dibantu setup oleh admin kami.


# Facebook Pixel & Catalog

Facebook Pixel adalah fitur yang berguna untuk mentracking user yang pernah mengakses website yang kemudian dapat dijadikan sebagai target iklan di facebook atau instagram.

#### Facebook Pixel & Catalog

Kamu bisa memasukan facebook pixel dan facebook catalog kamu ke website dengan fitur ini.\
Untuk kamu yang belum familiar dengan apa itu Facebook pixel atau Facebook catalog kamu bisa membaca artikel ke [halaman berikut](https://www.facebook.com/business/help/742478679120153).

![](/files/-LVMzB9b_5wWlWVW40cu)

#### \*Penggunaan:

* Untuk memasukan Facebook pixel, silahkan masuk ke menu Ekstensi > Analytics > Facebook Marketing > edit, input code pixel > simpan.

#### \*Rules:

* Sistem akan otomatis mentracking seluruh event pada website seperti ViewContent, Search, AddToCart, AddToWishlist, InitiateCheckout, Purchase, CompleteRegistration, PageView.

#### \*Ketentuan:

* Fitur ini *hanya tersedia pada paket Pro dan Private.*
* *Pada paket Starter, Anda harus upgrade ke paket Advance/Pro/Private untuk dapat membeli fitur ini.*
* *Pada paket Advance, Anda bisa menambahkan fitur ini dengan harga Rp240rb/1x bayar.*&#x20;


# Fitur design produk kaos, topi, totebag, mug, dll

Cocok bagi kamu yang menjual produk custom seperti kaos, topi, totebag, mug, notebook, dll. Agar memudahkan customer dalam mendesign gambar produk sesuai keinginan mereka.

Contoh tampilannya seperti berikut ini:

![](/files/-Mbt3NJeaXenm0hXzBrW)

**Ketentuan:**

* *Fitur ini belum tersedia otomatis pada semua paket website.*
* Plugin ini *dijual terpisah dengan harga Rp1.300.000/1x bayar.*


# Fitur image per varian produk

Fitur ini memudahkan customer kamu agar mereka bisa melihat perbandingan gambar produk antara varian yang satu dengan varian lainnya dalam satu produk.

Contohnya seperti ini:

Jika klik opsi warna putih merah, maka gambar produk akan berubah sesuai dengan warna yang dipilih.

![](/files/-Mbt265MDSnCk_j_vqb_)

Lalu jika klik opsi warna abu-abu turkis, maka gambar produk akan berubah sesuai warna yang dipilih.

![](/files/-Mbt2E1HEi0H1aIa7EE3)

**Ketentuan:**

* *Fitur ini belum tersedia otomatis pada semua paket website.*
* Plugin ini *dijual terpisah dengan harga Rp150.000/1x bayar.*


# Google Login

**Google Login**

Dengan fitur Google Login ini akan memudahkan customer kamu saat register atau login ke website. Cukup klik login dengan Google, otomatis pelanggan akan login ke akun mereka di website.

![](/files/-MTnMO8bOmYDBbsoBaMn)

#### \*Ketentuan

* Fitur ini *belum otomatis tersedia pada semua paket website.*
* Plugin dijual terpisah dengan harga *Rp350rb/Sekali Bayar.*


# Grup Member/ Reseller System

Fitur Grup Member/ Reseller System

#### Grup Member/ Reseller System

Dengan fitur ini kamu dapat membuat grup khusus di dalam website kamu. Apa saja yang dapat diterapkan dalam fitur ini antara lain.

* Kamu dapat membuat banyak grup member dalam website, misal Grup A, Grup B, Grup C, dst.
* Dari masing-masing grup tersebut kamu dapat menseting harga yang berbeda pada tiap grup. misal harga Grup A akan berbeda dengan Grup B / C atau sebaliknya.
* User yang login menggunakan akun grup A tidak akan dapat melihat harga pada grup B / C ataupun juga sebaliknya.
* Tidak ada batasan jumlah grup yang dapat kamu buat.
* Kamu dapat merubah status grup pada masing-masing customer. Misalnya customer x dengan Grup awal A dapat kamu rubah menjadi Grup B.

![](/files/-LVN-R3K0324drHTVZJ1)

![](/files/-LVN-WqLkHvfFsZajQDk)

#### \*Ketentuan:

* Fitur ini *sudah otomatis tersedia pada semua paket website. (free).*


# Integrasi data stok dan penjualan ke Marketplace By Jubelio

Untuk kamu yang berjualan di website dan marketplace, kamu bisa menggunakan fitur ini untuk mengintegrasikan stok produk dan data penjualan dari website ke marketplace, ataupun sebaliknya yaitu dari marketplace ke website. Fitur ini sangat menghemat waktumu, karena kamu tidak perlu repot-repot update stok produk dua kali di website dan marketplace, cukup update pada salah satunya saja maka akan otomatis terupdate di keduanya.

**Ketentuan:**

* *Fitur ini belum tersedia otomatis pada semua paket website.*
* Plugin ini *dijual terpisah dengan harga Rp850.000/1x bayar.*
* Harga fitur tidak termasuk dengan biaya layanan dari pihak Jubelio.


# Konten Proteksi

Untuk memproteksi konten yang ada diwebsite Kamu.

#### Konten Proteksi

Fitur Konten Proteksi ini akan melindungi konten website kamu seperti Teks Deskripsi, Artikel, atau image produk agar tidak mudah di copy paste atau download oleh user yang sedang mengakses website.\
Cara kerja fitur ini adalah dengan mem-blok user yang melakukan klik kanan atau ctrl+C untuk melakukan copy/download image pada website.

![](/files/-LVMynni-v267mO5a6hk)

#### \*Ketentuan

* Fitur ini *belum otomatis tersedia pada semua paket website.*
* Plugin dijual terpisah dengan harga *Rp185rb/Sekali Bayar.*


# Lacak Resi

Fitur Automatic Lacak Resi Pengiriman

#### Automatic Lacak Resi Pengiriman

Dengan fitur Automatic Lacak Resi Pengiriman, akan memudahkan customer kamu dalam mengecek status pengiriman barang yang sedang dikirim oleh petugas kurir.

Customer cukup klik tombol **"Lacak Pengiriman"** pada menu history order di akun mereka, maka data pengiriman akan muncul seperti pada gambar dibawah ini.

![](/files/-MOeQdyG9KWL08DC1rFH)

Pada sisi admin, Anda cukup menginput nomor Resi Pengiriman pada bagian page proses order. Maka system website akan otomatis melakukan cek dan sinkron data ke website kurir.

![Gambar 1.0](/files/-LVMv8f9CVuqz42Ddfzd)

#### \*Ketentuan:

* Hanya mendukung beberapa kurir yang dapat ditracking, yaitu sebagai berikut: **POS, Lion Parcel, Ninja Express, Wahana, Sicepat, J\&T, JET Express, Priority Cargo and Package (PCP), Eka Sari Lorena, SAP Express, 21 Express (DSE), First Logistics, Nusantara Card Semesta (NCS), IDL Cargo (IDL), Royal Express Indonesia (REX), dan ID Express (IDE).**
* ***Note: fitur ini tidak bisa digunakan untuk pengiriman dengan ekspedisi JNE dan Tiki, serta ekspedisi lainnya yang tidak tertera di atas.***
* Plugin ini *belum otomatis tersedia pada semua paket website*, silahkan kontak Admin atau order via member area jika ingin menambahkan.
* Plugin dijual terpisah seharga *Rp200.000,- Sekali bayar untuk selamanya.*

#### \*Cara Penggunaan:

* Dari sisi admin, masukkan nomor resi pengiriman produk pada menu Penjualan > Pesanan > view pesanan > kolom nomor resi, input dan update. Seperti pada Gambar 1.0
* Dari sisi customer, login akun website > klik riwayat pesanan > klik ID order yg ingin dicek > klik tombol lacak resi.
* ***Atau bisa dilihat pada link berikut:*** [**cara menggunakan fitur lacak resi**](https://docs.oceanesia.com/tutorial-1/manual-book-v-1-0/cara-menggunakan-fitur-lacak-resi)


# Notif User Access

Fitur Notif User Access adalah fitur untuk menampilkan transaksi yang telah dilakukan oleh user sebelumnya pada website Anda. Contohnya seperti pada gambar berikut:

![](/files/-Lz59RbI-6tophU44nIq)

Dengan fitur tersebut, user yang mengakses website Anda akan melihat notif pada sisi kiri bawah website terkait detail pembeli seperti nama, alamat, nama produk yang dibeli dan tanggal pembelian.\
Notif yang ditampilkan tersebut akan meningkatkan kepercayaan user yang akan melakukan transaksi di website Anda, mereka akan semakin yakin bahwa website Anda memiliki banyak pembeli.<br>

**Ketentuan:**

* Fitur ini **belum tersedia secara otomatis pada semua paket website.**
* Anda bisa *membeli fitur secara terpisah dengan harga Rp180.000 untuk 1x bayar.*


# Pembayaran Gopay, Ovo, Dana

Pembayaran dengan Gopay, Ovo, dan Dana dengan metode QRCode

**Pembayaran dengan Gopay, Ovo, dan Dana.**

Dengan metode pembayaran ini pada website kamu dapat menerima pembayaran dengan pembayaran yang sedang terkenal saat ini seperti Ovo, Gopay dan Dana.

Cara kerja pembayaran ini sangat mudah yaitu dengan metode QRCode, dimana jika saat cehckout pelanggan memilih pembayaran tersebut, maka pada layar website otomatis akan tampil gambar QRCode pembayaran yang sudah diaktifkan sebelumnya. Selanjutnya customer hanya perlu melakukan scan pembayaran dengan QRCode yang telah ditampilkan.

Untuk disisi admin hanya perlu menginput nomor Hp / Rekening akun pembayaran elektronik saja. Otomatis system akan menggenerate QRCode pembayaran tersebut.<br>

**\*Ketentuan:**

* Dalam satu plugin sudah include 3 bundle pembayaran Gopay, Ovo, dan Dana yang tidak bisa dibeli secara terpisah.
* Plugin ini belum tersedia pada paket **Starter**, jadi Kamu *harus mengupgrade paket website menjadi  Advance/Pro/Private.*
* Pada paket **Advance**, Kamu bisa membeli plugin ini secara terpisah dengan harga *Rp300.000 untuk sekali bayar.*
* Pada paket **Pro** dan **Private**, plugin ini *sudah otomatis tersedia* *(free).*<br>

**\*Penggunaan:**

* Masukan Nomor Hp/Rekening Anda pada menu Ekstensi > Pembayaran > Gopay/Ovo/Dana > input data, set Aktif > simpan


# Pilihan Kurir

Beberapa pilihan kurir yang dapat diaplikasikan di toko online Kamu.

### Pilihan Kurir

Oceanesia memiliki beberapa default pilihan kurir yang dapat Kamu aktifkan di website. diantaranya sbb:

* Lokal Logistik: JNE, J\&T, JET, TIKI, Pos, Wahana, Sentral Cargo, Sicepat, Lion Parcel, Ninja Xpress, First Logistics, Star Cargo, IDL Cargo (IDL), SAP Express, ID Express, SAP Express, Nusantara Card Semesta (NCS), Royal Express Indonesia (REX), RPX Holding, Pandu Logistics, Pahala Kencana Express, Solusi Ekspres, dan 21 Express (DSE).
* Flat Rate.
* Free Shipping Per Item.
* Kontak shipping.
* Pickup from Store.
* Pickup from Outlet.
* Custom Shipping.
* Gosend dan Grab.

####

#### Lokal Logistik

Kamu bisa mengaktifkan beberapa opsi pilihan lokal logistik pada website, seperti: JNE, J\&T, JET, TIKI, Pos, Wahana, Sentral Cargo, Sicepat, Lion Parcel, Ninja Xpress, First Logistics, Star Cargo, IDL Cargo (IDL), SAP Express, ID Express, SAP Express, Nusantara Card Semesta (NCS), Royal Express Indonesia (REX), RPX Holding, Pandu Logistics, Pahala Kencana Express, Solusi Ekspres, dan 21 Express (DSE).\
Data shipping tersebut di ambil dari Api RajaOngkir, sehingga ketika customer checkout belanja di website maka akan otomatis terkalkulasi biaya pengirimannya berdasarkan berat produk dan alamat pengiriman dari pilihan kurir yang dipilih.

#### Flat Rate

Kamu bisa membuat tarif flat pengiriman pada website, misalnya jarak pengiriman jauh maupun dekat biaya tetap sama yaitu flat Rp10rb.

#### Free Shipping

Terdapat fitur free shipping / gratis pengiriman pada website. Fitur free shipping tersebut juga dapat disetting misalnya jika customer belanja min 200rb, 300rb, dst baru free shipping aktif. Atau gratis pengiriman hanya untuk produk-produk tertentu saja.

#### Per Item

Tarif pengiriman per item, misalkan tiap produk pada website Kamu dikenakan biaya pengiriman Rp5rb/item produk.

#### Kontak Shipping

Fitur untuk menyediakan opsi pengiriman khusus bagi customer, misalnya customer hanya ingin menggunakan kurir tertentu yang tidak ada di website. Maka disediakan dropdown pilihan saat checkout untuk mengkontak admin bagi customer yang ingin menggunakan kurir lain.

#### Pickup from Store

Apabila Customer ingin mengambil produknya sendiri langsung di toko Kamu, maka Kamu dapat mengaktifkan fitur ini.

#### Pickup from Outlet

Apabila kamu memiliki beberapa Outlet Toko, dan Kamu ingin Customermu mengambil sendiri pada salah satu Outlet Toko yang tersedia maka Kamu dapat mengaktifkan fitur ini.

#### Custom Shipping

Apabila Kamu tidak ingin menggunakan kurir lokal yang tersedia misalnya JNE, Tiki, Pos, dsb. Maka Kamu bisa menggunakan fitur Custom Shipping. Fitur ini biasanya diaktifkan untuk Kamu yang memiliki kurir pengiriman sendiri. Di fitur ini kamu dapat menseting sendiri biaya pengiriman berdasarkan kota tujuan dan berat pengiriman.

#### Gosend dan Grab

Kamu bisa menggunakan kurir Gosend ataupun Grab dengan tarif Flate Rate dan seting region untuk wilayah tertentu yang mendukung area pengiriman pengiriman tersebut.


# Random Kode Unik

Fitur Random Kode Unik untuk memudahkan melakukan pengecekan pembayaran.

#### Fitur Random Kode Unik

Kamu dapat menambahkan Random Kode Unik pada total order belanja customer untuk memudahkan kamu dalam melakukan cek pembayaran yang masuk pada mutasi bank kamu.

#### \*Rules:

* Kamu dapat melakukan seting sendiri nilai range angka random.
* Sistem akan otomatis menggenerate nilai random berdasarkan batasan range yang sudah kamu seting.
* Apabila terdapat duplicate nilai random, otomatis sistem akan merandom ulang sampai benar-benar mendapatkan angka unik.<br>

**Setting pada sisi Admin**

![](/files/-LVN12oy8HiGa8j1lhgM)

**Pengaplikasian pada saat akan checkout**

![](/files/-LVN19jb3eEdElsHzgjg)

#### \*Ketentuan:

* Fitur ini *sudah tersedia otomatis* pada paket **Advance, Pro,** dan **Private.** *(free).*
* Untuk paket **Starter**, masih dapat membeli pluginnya secara terpisah, dengan biaya berlangganan *Rp50rb/tahun.*

#### \*Penggunaan:

* Untuk mengaktifkan fitur ini pada dashboard admin silahkan masuk ke menu ekstensi > total pesanan > Code Unik > seting range code unik > set aktif > simpan.


# Share & Get Discount

Fitur ini akan memudahkan strategi marketing dengan memberikan discount kepada pelanggan Anda.<br>

**Cara Kerja:**

Jika customer klik tombol share FB/Twitter (tombol share yang ada pada halaman produk) maka customer akan mendapatkan discount otomatis, yang dimana jumlah discount tersebut bisa Anda setting sendiri berupa persentase ataupun fixed amount.  Berikut contohnya :

![](/files/-Lz5Eh04FMNjCuYQnvfp)

**Ketentuan:**

* Ketika customer klik tombol share ke FB/Twitter, selanjutnya customer harus langsung belanja di website Anda untuk mendapat discount
* Discount hanya berlaku di saat setelah klik tombol share.
* Ketika customer sudah close browser, maka discount tersebut sudah tidak berlaku.&#x20;
* Customer bisa share - belanja - share - belanja secara berulang agar mendapat discount berkali-kali.
* Fitur ini **belum otomatis tersedia pada semua paket website.**
* Anda bisa *membeli fitur ini secara terpisah seharga Rp523.000 untuk 1x bayar.*


# Toko Cash (Cashback)

Fitur Toko Cash (Cashback) merupakan add on tambahan yang berfungsi untuk menyimpan uang customer jika terjadi kelebihan transfer pembayaran. Jadi Anda tidak perlu repot merefund, karena uang kelebihan tersebut bisa dimasukkan ke saldo toko cash agar customer bisa menggunakannya kembali untuk pembelanjaan berikutnya.

\*\***Mekanisme Penerapan Toko Cash:**\
\
\&#xNAN;*Jika customer ada kelebihan transfer dan tidak ingin direfund, maka bisa memanfaatkan fitur toko cash ini untuk menyimpan uang customer dalam bentuk saldo, namun untuk penambahan saldo tsb belum otomatis masuk ke saldo customer, melainkan admin harus menambahkan secara manual pada data customer yg bersangkutan.*

a. **Case 1**: \
Jika customer memiliki sisa kelebihan transfer Rp100.000, lalu mereka berbelanja dengan total harga Rp70.000 (total sudah termasuk ongkos kirim), maka saat ke halaman checkout, otomatis metode pembayarannya hanya bisa dengan Toko Cash (customer tidak bisa memilih metode pembayaran transfer bank ataupun yang lainnya, karena dia sudah memiliki saldo tokocash). Dengan begitu maka saldo tokocash customer akan berkurang sesuai total pembelanjaan, dan sisa saldonya menjadi Rp30.000.

b. **Case 2**: \
Jika customer memiliki kelebihan transfer sebesar Rp 100.000, lalu mereka berbelanja dengan total harga Rp 150.000, maka saat ke halaman checkout, otomatis saldo toko cash akan terpakai semua, lalu customer tinggal membayar sisanya yaitu Rp50.000, sisa pembayaran tersebut baru akan bisa dipilih mau dengan metode pembayaran transfer bank atau yang metode pembayaran lainnya.

\
**Ketentuan:**

* Plugin Toko Cash *sudah tersedia otomatis* pada paket **Advance, Pro, dan Private** *(free)*
* Untuk paket **Starter**, perlu berlangganan plugin ini dengan biaya *Rp100.000/tahun.*


# Voucher dan Kupon

Fitur Diskon dengan Voucher dan Kupon.

#### Voucher dan Kupon

Kamu bisa membuat voucher dan kupon untuk diskon potongan customer kamu.

#### \*Perbedaan Voucher dengan Kupon

* Voucher hanya dapat digunakan untuk 1 kali pemakaian dan maksimal oleh 1 customer. Sedangkan Kupon dapat digunakan lebih dari 1 kali pemakaian dan lebih dari 1 customer.
* Nilai discount Voucher hanya dapat diseting nilai fix amount. misalnya Rp50rb, Rp100rb, 320rb dst. Sedangkan Kupon dapat diseting fix amount ataupun dalam persentase diskon misal diskon 5% dari total belanja.
* Kupon dapat diseting tanggal masa expired. sedang kan Voucher tidak ada tanggal masa expired.
* Kupon dapat diseting hanya untuk item-item produk tertentu saja yang di order, misal hanya produk A, B, atau C. sedangkan Voucher tidak bisa.
* Kupon dapat diset minimum order, misalnya customer harus order minimum Rp100rb terlebih dahulu baru kemudian dapat menggunaka kupon. sedangkan voucher tidak bisa.

#### \*Ketentuan:

* Fitur Voucher dan Kupon *sudah otomatis tersedia* pada paket **Advance, Pro,** dan **Private** *(free).*
* Untuk paket **Starter** dapat berlangganan fitur ini dengan biaya *Rp100rb/tahun untuk Voucher* dan *Rp100rb/tahun untuk Kupon* (bisa berlangganan secara terpisah).


# WhatsApp Notif Order

Fitur WhatsApp Notif Order

#### WhatsApp Notif Order

Fitur Notif Order tambahan pada website yang akan menginformasikan bahwa ada pesanan yang masuk di website Anda. Umumnya notif order di website adalah berupa email. Namuan dengan fitur WhatsApp Notif Order ini akan memudahkan Anda atau Konsumen Anda dalam menerima informasi detail oder. Setiap order yang masuk ke website otomatis admin website dan customer akan menerima notifikasi order ke nomor whatsapp mereka.

Berikut ini Contoh format notifikasi yang akan diterima oleh customer, ketika mereka selesai melakukan checkout.

![](/files/-LVMwBYAu3QeZKsmtpTq)

\
Berikut ini Contoh format notifikasi yang akan diterima oleh admin, ketika ada customer melakukan checkout di website.

![](/files/-LVMwEbG4dB1bfip9EYo)

Apabila Anda ingin mencoba demo. silahkan untuk simulasi order lewat demo website berikut ini. [Demo Website](https://demo18.oceanesia.net/)

#### \*Ketentuan:

* Notif pesan akan dikirim ke admin dan customer.
* Fitur ini *sudah tersedia otomatis* pada paket **Advance, Pro,** dan **Private** *(free).*
* Untuk paket **Starter** masih bisa berlangganan fitur ini seharga *Rp150rb/Tahun.*

#### \*Penggunaan:

* Pada Dashboard admin masuk ke menu ektensi > modul > whatsapp notif > set status "aktif" > simpan.


# Whois Domain Protection

**WHOIS Domain Protection** merupakan add on tambahan yang berguna untuk melindungi informasi detail  domain Anda seperti nama registrar dan tanggal expired domain agar informasi tersebut tidak jatuh ke tangan yang salah.<br>

**Ketentuan:**

* *Belum tersedia otomatis pada semua paket website.*
* Whois domain protection dapat digunakan untuk semua ekstensi domain kecuali .id dan .co.id
* Tidak dapat diorder jika Anda sudah memiliki domain sendiri.
* Plugin ini *dijual terpisah dengan berlangganan Rp70.000/domain/tahun.*


# Auto Konfirmasi dan Cek Mutasi By Moota

**Fitur Auto Konfirmasi dan Cek Mutasi By Moota**

Fitur ini berkerja sebagai robot, yang bertugas untuk melakukan pengecekan pembayaran dari Customer, berdasarkan total pembayaran yang ditambahkan oleh fitur [kode unik](/features/random-kode-unik) sebagai pendanda dari transaksi, kemudian apabila terdapat transaksi yang sesuai dengan total pesanan, robot juga akan berkerja melakukan konfirmasi pembayaran pesanan yang Customer lakukan.

**\*Ketentuan**

* Fitur ini *belum otomatis tersedia pada semua paket website.*
* Plugin dijual terpisah dengan harga *Rp450rb/Sekali Bayar.*
* Harga fitur tidak termasuk dengan biaya layanan dari pihak Moota.
* Untuk paket **Starter**, diharusnya untuk berlangganan terlebih dahulu fitur [Random Kode Unik](/features/random-kode-unik).

**\*Panduan Penggunaan**

1. **Membuat Personal Token Moota**

   **a)** Pada Dashboard Moota, masuk ke menu **Integrasi > API Token**.

   &#x20;  <img src="/files/dn7r4ICrH7geNYLeHTQi" alt="" data-size="original">

   **b)** Kemudian akan muncul tampilan sebagai berikut :&#x20;

   &#x20;   <img src="/files/508oqzOkDij8NFQYk8Cw" alt="" data-size="original">

   **c)** Kemudian dapat isikan **Nama** dan **Scope**, untuk nama dapat di isikan **Oceanesia** atau nama lainnya, untuk **Scope** dapat mencentang **Bank** (digunakan untuk mengambil data bank yang terdaftar) dan juga **Mutation\_read** (digunakan untuk mengambil data mutasi).

   **d)** Setelah terisi, selanjutnya dapat klik tombol **Buat Personal Token**.

   **e)** Selanjutnya **Personal Token**nya akan tampil.

   &#x20;  ![](/files/a2Ynrtm8DOyjKaKzet5C)

   **f)** Salin **Personal Token** tersebut untuk selanjutnya dapat digunakan untuk melakukan pengaturan Modul yang terdapat pada **Poin 2.**

2. **Mengatur Modul Moota**

   **a)** Pada Dashboard admin, masuk ke menu **Ekstensi > Modul > Moota** (Instal atau Ubah).

   &#x20;   <img src="/files/Gpauo92XwW9bUW7TY3tM" alt="" data-size="original"><img src="/files/bg979vjaOul2gxIpIMHb" alt="" data-size="original">

   **b)** Kemudian akan muncul halaman sebagai berikut :&#x20;

   &#x20;   <img src="/files/qUxT19oWaZ99ZJJ78BuD" alt="" data-size="original">

   * **Status :** Status aktivasi modul Moota.
   * **Personal Token :** Token yang didapatkan dari dashboard Moota Poin 1 untuk menghubungkan website dengan API Moota.
   * **Status Pesanan Diproses :** Status yang digunakan untuk mengubah Status Pesanan apabila sudah terjadi pembayaran.

   **c)** Silakan masukan data yang terdapat pada kolom yang tersedia.

   **d)** Setelah terisi semua, selanjutnya tekan tombol  **Simpan** yang terdapat dipojok kanan atas.

   &#x20;   <img src="/files/H80TmFXm0p9QKc2UW3Zi" alt="" data-size="original">

3. **Melihat Daftar Mutasi Moota**

   **a)** Pada Dashboard admin, masuk ke menu **Penjualan  > Daftar Mutasi > Moota**.

   &#x20;   <img src="/files/4IX0SvIPqLKGbuCyVgjq" alt="" data-size="original">

   **b)** Selanjutnya akan tampil halaman Daftar Mutasi sebagai berikut :&#x20;

   &#x20;    <img src="/files/Inucjp21C5Q7D4HuQ9xG" alt="" data-size="original">

   * **Type :** untuk memfilter mutasi berdasarkan tipenya. Credit atau Debit.
   * **Bank :** untuk memfilter mutasi berdasrkan bank yang tersedia pada dashboard Moota.
   * **Total :** untuk memfilter mutasi berdasarkan jumlah uang yang tercatat.
   * **Tanggal Mulai :** untuk memfilter berdasarkan range tanggal awal dari tanggal mutasi yang tercatat.
   * **Tanggal Akhir :** untuk memfilter berdasarkan range tanggal akhir dari tanggal mutasi yang tercatat.

   **c)** Daftar mutasi dapat di filter dengan mengisi kolom filter yang ada diatas, setelah di isi dapat memfilternya dengan mengklik tombol **Penyaring**.


# Integrasi POS dari Dealpos

**Fitur Integrasi POS dari Dealpos**

Kamu dapat menghubungkan data stok, harga dan pesanan dari website dengan aplikasi POS (Point of Sales) dari Dealpos. sehingga kamu tidak perlu lagi untuk melakukan pengubahan di dua tempat yang berbeda.

**\*Ketentuan**

* Fitur ini *belum otomatis tersedia pada semua paket website.*
* Plugin dijual terpisah dengan harga *Rp750rb/Sekali Bayar.*
* Harga fitur tidak termasuk dengan biaya layanan dari pihak Dealpos.

**\*Panduan Penggunaan**

1. Pada Dashboard admin, masuk ke menu **Ekstensi > Modul > Dealpos** (Instal atau Ubah)

2. Kemudian akan muncul halaman sebagai berikut :&#x20;

   ![](/files/QGoxKLzHa3Pehs362oqV)

   * **Status :** Status aktivasi modul.
   * **Domain :** Host domain dari aplikasi Dealpos.
   * **Username :** Username login ke aplikasi Dealpos
   * **Password :** Password login ke aplikasi Dealpos.
   * **Nama Outlet :** Outlet yang terdapat didalam aplikasi Dealpos.
   * **Payment Method :** Metode pembayaran yang digunakan.
   * **Status Kurang Stok :** Status yang digunakan untuk mengirimkan data sales ke Dealpos.

3. Silakan masukan data yang terdapat pada kolom yang tersedia.

4. Setelah semua terisi, selanjutnya dapat klik tombol Simpan yang terdapat di pojok kanan atas.

   ![](/files/GbJGMN8Ct79qZoQRTeLa)


# Asuransi Pengiriman

**Fitur Asuransi Pengiriman**

Kamu dapat menambahkan harga tambahan untuk Asuransi Pengiriman pada total order pesanan Customer, dengan adanya asuransi pada pesanan, dapat memberikan rasa aman terhadap barang yang Customer pesan.

#### \*Ketentuan:

* Fitur ini *belum otomatis tersedia pada semua paket website.*
* Plugin dijual terpisah dengan harga *Rp100rb/Sekali Bayar.*

**\*Panduan Penggunaan**

1. Pada Dashboard admin, masuk ke menu **Ekstensi > Total Pesanan > Asuransi** (Instal atau Ubah)
2. Kemudian akan muncul halaman sebagai berikut :

   &#x20;<img src="/files/IEZkmc9gSh4GNewO7wf2" alt="" data-size="original">

   I. **Order Total :** Subtotal minimun untuk mengaktifkan modul ini

   II. **Nominal Asuransi :** Harga nominal asuransi berdasarkan presentase

   III. **Biaya Admin :** Harga biaya admin asuransi (apabila ada)

   IV. **Status :** Status aktivasi modul Asuransi

   V. **Urutan :** Urutan penempatan Asuransi pada total pesanan.
3. Silakan masukan data yang terdapat pada kolom yang tersedia.
4. Setelah terisi semua, selanjutnya tekan **tombol simpan** yang terdapat dipojok kanan atas.

   ![](/files/7jBPZXwomtxJ1KX3WomP)

**\*\***&#x4E;ominal kurir asuransi yang muncul berdasarkan kurir yang di aktifkan pada modul Indonesia Shipping, yang terdapat pada menu **Ekstensi > Pengiriman > Indonesia Shipping**


# Changelogs

Changelog update system oceanesia.

## 2019-09-27

### Added

* New Template Added: Amrita

## 2019-08-27

### Fix

* Fix bug shipping option
* Fix bug product review
* Other minor fixs and improvement

## 2019-08-13

### Added

* New Template Added: Amora

## 2019-07-30

### Added

* Quick update status product

### Fix

* Fix bug diskon shipping module
* Other fixs and improvement

## 2019-07-19

### Fix

* Fix bug on whatsapp notif order
* Fix bug on module ovo, gopay and dana payments
* Other fixs and improvement

## 2019-07-15

### Added

* New Addon modul dicount product bundling
* New Addon modul shipping discount

### Improvements

* Upgrades features on whatsapp notification: payment confirm and auto send direct message.
* Add button delete on history order process

## 2019-04-10

### Fix

* Fix bug modul payment confirm
* Fix bug addon fb login
* Fix bug PPN on checkout page
* Fix bug and improvement admin page on delete order
* Other fixs and improvement

## 2019-02-03

### Added

* New products: Android App
* New Addon modul payment with Ovo, Gopay, & Dana

## 2019-01-10

### Fix

* Fix bug addon fb login

## 2018-11-26

### Added

* New Features Lacak Resi Pengiriman

## 2018-11-22

### Added

* New Fitur Automatic Check Mutasi
* Add E-wallet Fitur.

## 2018-11-03

### Added

* New Fitur Whatsapp Notif Order

### Fix

* Fix and improvements shipping modul

## 2018-10-07

### Added

* Add new shipping Grab and Gosand (flat rate tarif)

## 2018-10-05

### Fix

* Fix and minor improvements

## 2018-09-05

### Added

* New Features produk review

### Fix

* Fix bug modul Dropshiping

## 2017-02-19

### Fix

* Update layout page account
* Other Fixs and improvements

## 2017-01-08

### Update

* Update sistem integrated shipping with Raja Ongkir

## 2016-11-19

### Added

* New Template Added: Furnix, Reeds, Nero, Food Love

## 2016-08-19

### Added

* New Template Added: Max Theme, Hejiro, Gabang, Blanco, Leclothing, And White Coffe

## 2016-04-28

### Added

* New Template Added: Classic, Giga Shop, Kidloves, Davishop, Blate

## 2016-03-20

### Added

* New Template Added: Handicrafts, Vanesa and Cakes

## 2016-02-28

### Added

* Release CMS


# Manual Book V 1.0

Berikut ini adalah manual book untuk CMS Versi 1.0


# Pengenalan Halaman Dashboard

Setelah Anda berhasil login, maka Anda akan dihadapkan pada dashboard awal website.

![](/files/-LeF0tEJMAHNE5RoPBis)


# Masuk Halaman Admin

Untuk masuk/login kehalaman admin pada website Anda, pertama Anda harus mengetikan link admin pada browser Anda. Format untuk mengakses ke link admin Anda adalah [www.namadomain.com/clogin](http://www.namadomain.com/clogin), Contoh: [www.oceanesia.com/clogin](http://www.oceanesia.com/clogin), Ketik pada browser dan tekan enter, maka akan muncul tampilan seperti dibawah ini.&#x20;

![](/files/-LeAOq7zkTrj0PAET_h0)

Selanjutnya masukkan Username dan Password Anda pada kolom tersebut, lalu klik Log Masuk (Gambar No.2)


# Panduan Awal Update Data Toko Online

Pada tahap awal saat Anda baru membuat toko online di Oceanesia, jika Anda harus membaca satu-satu seluruh isi manual book website tentu akan memakan waktu yang lama. Maka dari itu sebelum memulai mengupdate data toko online Anda, akan lebih mudah dan cepat apabila Anda mulai dengan urutan panduan berikut ini. Yang mana ketika semua panduan berikut telah selesai Anda isi dan kerjakan, maka secara standar Toko Online Anda sudah siap untuk berjualan Online.&#x20;

Berikut adalah petunjuk dan urutan update data toko online awal yang harus Anda isi:&#x20;

1\. Pengaturan dasar detil toko, pada bagian tersebut silahkan isi data pada tab General, Toko, Lokal, Opsi dan Gambar. Anda bisa membacanya [disini](https://docs.oceanesia.com/tutorial-1/manual-book-v-1-0/pengaturan-detail-website).

2\. Update No. Rekening pada toko online Anda, untuk memilih rekening bank yang akan digunakan saat customer melakukan pembayaran. Tutorialnya bisa lihat di [halaman berikut](https://docs.oceanesia.com/tutorial-1/manual-book-v-1-0/update-rekening-pembayaran).

3\. Membuat/menentukan kategori produk. Anda bisa lihat tutorialnya [disini](https://docs.oceanesia.com/tutorial-1/manual-book-v-1-0/menentukan-kategori-produk).

4\. Membuat menu-menu produk pada halaman home atau setting dropdown menu, Anda bisa lihat tutorialnya [disini](https://docs.oceanesia.com/tutorial-1/manual-book-v-1-0/setting-dropdown-menu/membuat-tampilan-multi-level).

5\. Upload produk dan deskripsi produk. Anda bisa ke [halaman berikut](https://docs.oceanesia.com/tutorial-1/manual-book-v-1-0/cara-upload-produk), untuk membuka link video penjelasannya.

6\. Mengisi informasi Website tentang terms & conditions, Privacy Policy, About Us dan Delivery Information. Anda bisa baca [disini](https://docs.oceanesia.com/tutorial-1/manual-book-v-1-0/informasi-peraturan-dan-kebijakan-website).

7\. Update menu pada footer untuk Customer Care, bisa lihat tutorialnya di [halaman berikut](https://docs.oceanesia.com/tutorial-1/manual-book-v-1-0/update-footer/update-menu-footer).

8\. Update/ganti Banner Slider dan mini banner, bisa ke [halaman berikut](https://docs.oceanesia.com/tutorial-1/setting-template), lalu klik nama template yang Anda pilih. (Untuk cara update yang lebih detail dapat membaca pada manual book tambahan khusus template yang Anda pilih. Silahkan kontak ke team support jika Anda belum memilikinya).

9\. Mengaktifkan tawk.to live chat. Bisa [baca disini](https://docs.oceanesia.com/tutorial-1/manual-book-v-1-0/cara-mengaktifkan-chat-tawk.to).

10\. Update peta lokasi pada google maps untuk toko online Anda. [Baca disini](https://docs.oceanesia.com/tutorial-1/manual-book-v-1-0/mengaktifkan-google-maps/mengaktifkan-google-maps-versi-page).

11\. Update link social media pada footer dan side website. Untuk tutorial update link sosmed pada footer, Anda bisa [Baca disini](https://docs.oceanesia.com/tutorial-1/manual-book-v-1-0/update-footer/update-sosial-media). Untuk side website, Anda bisa klik disini untuk [twitter](https://docs.oceanesia.com/tutorial-1/manual-book-v-1-0/update-link-sosial-media-pada-side-web/link-twitter), [facebook](https://docs.oceanesia.com/tutorial-1/manual-book-v-1-0/update-link-sosial-media-pada-side-web/facebook-page), [instagram](https://docs.oceanesia.com/tutorial-1/manual-book-v-1-0/update-link-sosial-media-pada-side-web/link-instagram), [google maps](https://docs.oceanesia.com/tutorial-1/manual-book-v-1-0/update-link-sosial-media-pada-side-web/link-google-maps).

12\. Simulasi untuk order dan pemrosesan order. [Baca disini](https://docs.oceanesia.com/tutorial-1/manual-book-v-1-0/pemrosesan-order-customer/simulasi-proses-order) (simulasi proses order) dan [disini](https://docs.oceanesia.com/tutorial-1/manual-book-v-1-0/pemrosesan-order-customer/cetak-faktur-invoice) (untuk cetak faktur invoice). (**Wajib**)&#x20;

Jika semua data diatas telah selesai dipelajari dan dikerjakan, maka toko online Anda secara standar sudah siap untuk berjualan online. Untuk menambah pengetahuan lebih lanjut tentang pengelolaan dan penggunaan toko online,dapat dilanjutkan dengan membaca halaman lainnya.


# Pengaturan Detail Website

Setelah mengenal Dashboard, selanjutnya Anda dapat memulai dengan memasukan data-data profile website Anda. Dengan cara sebagai berikut:

Masuk ke menu **Sistem > Pengaturan** > Klik ikon pensil untuk memulai mengisi data profile website Anda.&#x20;

![](/files/-LeFK7XEitBymFp1Ipnb)

Dalam halaman Pengaturan terdapat “8 tabs” yang akan Anda jumpai. Masing-masing memiliki kebutuhan Informasi yang berbeda. Isi form tersebut secara benar dan selengkap-lengkapnya untuk memudahkan pengunjung dalam mencari tahu detil Website Anda.

1. **GENERAL**&#x20;

* **Judul Meta**: Nama website Anda yang akan dipasang pada Tab Browser.
* **Deskripsi Meta Tag**: Deskripsi tag untuk website Anda yang di tampilkan pada saat hasil pencarian menggunakan Search Engine.&#x20;
* **Kata Kunci Meta Tag**: Kata Kunci untuk website Anda.&#x20;
* **Template**: Pilih jenis template yang Anda pilih. Ada 2 pilihan template yang tersedia : *template default* (template default untuk jenis template standar/website sederhana); dan *template Journal2* (untuk template jenis full costumize dengan dilengkapi fitur2 tambahan lainnya, recommended untuk mengaktifkan template Premium pada website dengan memilih journal2).&#x20;
* **Tata Letak Bawaan**: Default Tampilan layout yang ingin Anda gunakan di website, (Pilih “default” untuk standar pensettingan pada website).

2\. **TOKO**&#x20;

* **Nama Toko**: Nama Website Anda.&#x20;
* **Pemilik Toko**: Nama Pemilik Website.&#x20;
* **Alamat**: Lokasi Anda (Bisnis/Tempat usaha Anda).&#x20;
* **Geocode**: Untuk menampilkan peta di website. Masukan Lokasi Geo Code atau Code Google maps untuk toko Anda secara manual. Cth: -6.243413, 106.648871 . Jika belum tau Geo Code Lokasi Anda lihat pada contoh[ disini](https://docs.oceanesia.com/tutorial-1/manual-book-v-1-0/mengaktifkan-google-maps/mengaktifkan-google-maps-versi-button-tombol).
* **Surel**: Email website Anda.&#x20;
* **Telepon**: No Telepon website Anda.&#x20;
* **Faks**: No Fax website Anda (Jika ada).&#x20;
* **Gambar**: Image (logo) yang akan di tampilkan di *Contact Us*.&#x20;
* **Jam Buka**: Jam operasional usaha Anda.&#x20;
* **Komentar**: Catatan pada Contact Us.

*\*\*Catatan*: **Nama Toko, Alamat, Geocode, Telepon, Faks, Gambar, Jam Buka** dan **Komentar** akan ditampilkan pada **Contact Us (Hubungi Kami)**.&#x20;

3\. **LOKAL**&#x20;

* **Negara**: Pilih Provinsi Anda, (default Base shipping pada website sudah di setting Negara Indonesia).&#x20;
* **Wilayah / Propinsi**: Pilih Kabupaten / Kota Anda.&#x20;
* **Bahasa**: Untuk mengganti tampilan bahasa di halaman depan (front end website).&#x20;
* **Bahasa Admin**: Untuk mengganti tampilan bahasa di halaman Admin.&#x20;
* **Mata uan**g: Untuk mengganti currency/mata uang di website.
* **Auto Update Mata uang**: Pilih “**Ya**” jika Anda ingin nilai mata uang Anda di update secara otomatis (Note: settingan khusus hanya untuk multi currency). Pilih “**Tidak**” jika Anda tidak ingin mata uang di update secara otomatis.
* **Satuan panjang**: Untuk menentukan spesifikasi satuan panjang produk yang di tampilkan di halaman website.&#x20;
* **Satuan Berat**: Untuk menentukan spesifikasi satuan berat produk yang di tampilkan di halaman website.&#x20;

**4. OPSI**&#x20;

**a. OPSI - Produk**&#x20;

* **Total Kategori Produk**: Pilih "Ya" untuk menampilkan berapa banyak produk yang tersedia dalam setiap subkategori dari kategori induk yang terletak di Top Menu.&#x20;
* **Default Item Per halaman (Katalog)**: Untuk Mensetting berapa banyak item catalog yang di tampilkan per halaman.&#x20;
* **Batas Daftar Deskripsi**: Batasan Deskripsi karakter (Contoh: Categories, Special, produk, dll)&#x20;
* **Default Item Per halaman (Admin)**: Mensetting berapa banyak admin item yang di tampilkan per page (tampil dalam menu Admin contoh: order / customer).&#x20;

**b. OPSI - Ulasan**&#x20;

* **Ijinkan Ulasan**: Enable/Disable tampilan review produk oleh customer Anda.&#x20;
* **Ijinkan Tamu memberi ulasan**: Pilih "Ya" Jika Anda membolehkan customer memberi review untuk produk Anda.&#x20;
* **Peringatan lewat surel jika ada ulasan baru**: Pilih "Ya" Jika Anda ingin menerima notifikasi email ketika ada customer yang melakukan Riview.&#x20;

**c. OPSI – Kupon/voucher**&#x20;

* **Minimal Kupo**n: Jumlah minimal belanja customer untuk dapat menggunakan kupon dalam pembayaran.&#x20;
* **Maksimal Kupon**: Jumlah maksimal belanja customer untuk dapat menggunakan kupon dalam pembayaran.

**d. OPSI – Pajak/ Taxes**&#x20;

* **Menampilkan harga dengan pajak**: Pilih "Ya" Jika ingin menampilkan harga sekaligus dengan estimasi pajak. Atau Kosongkan saja jika tidak ada.&#x20;
* **Use Store Tax Address**: Jika user tidak login dalam akun mereka maka estimasi pajak akan menggunakan alamat pengiriman atau pembayaran toko.&#x20;
* **Use Customer Tax Address**: Jika user tidak login dalam akun mereka maka estimasi pajak akan menggunakan alamat pengiriman atau pembayaran customer.&#x20;

**e. OPSI – Akun**&#x20;

* **Pelanggan** **Online**: Pilih "Ya" jika ingin melakukan tracking customers yang sedang online dari halaman dashboard.&#x20;
* **Group Pelanggan**: Pilih default, customer akan dimasukan ke dalam group default ketika mereka membuat sebuah akun.&#x20;
* **Tampilkan Group Pelanggan** : Memungkinkan customer untuk memilih group mana yang akan ia pilih ketika membuat akun pertama kali. Apakah grup Pelanggan Umum (*Default*) atau Grup Khusus (*Reseller*).
* **Login Display Prices**: Pilih "Ya" maka Customers harus login atau membuat akun terlebih dahulu jika ingin melihat harga-harga pada produk. Pilih “Tidak" maka akan membiarkan semua customer untuk langsung melihat tampilan harga-harga pada produk. (Recommended seting default untuk pilih *Tidak*).&#x20;
* **Max Login Attempts**: Batasan untuk jumlah berapa kali maksimal customer melakukan kesalahan login akun mereka.&#x20;
* **Account Terms:** Mewajibakan Customer untuk membaca peraturan dan agreement saat membuat akun pertama mereka, pilih agreement/peraturan yang Anda buat.&#x20;
* **New Account Alert Mail:** Pilih "Ya" jika Anda ingin ada notifikasi email ke pemilik website saat ada customer yang membuat akun baru.

**f. OPSI – Keluar/Checkout**&#x20;

* **Invoice Prefix:** Set invoice Anda. Rubah tahun invoice Anda contoh untuk tahun 2016 maka : INV-2016-00&#x20;
* **Display Weight on Cart Page**: Pilih "Ya" maka akan menampilkan berat produk di atas halaman check out.&#x20;
* **Checkout Tamu**: Pilih "Ya" memungkinkan customer untuk melakukan check out tanpa membuat akun di website. (Rekomendasi default untuk pilih *Tidak*)&#x20;
* **Checkout Terms**: Pilih page informasi pada menu drop down yang mewajibkan pembaca untuk menyetujui ketentuan dan persyaratan saat akan melakukan check out.&#x20;
* **Order Status**: default status dari setiap order customer setelah selesai melakukan checkout.&#x20;
* **Processing Order Status**: Default status untuk sebuah order yang sedang Anda proses.&#x20;
* **Complete Order Status**: Default status untuk sebuah order yang telah complete/ telah Anda kirim.&#x20;
* **Status penipuan order maxmind:** Seting untuk order status ketika ada cutomer yang mencoba merubah pembayaran detail order/menggunakan sebuah cupon, voucher, reward points yang ternyata telah digunakan sebelumnya.&#x20;
* **New Order Alert Mail:** Notifikasi email kepada admin website jika ada order baru dari customer.&#x20;
* **API User:** Pilih default untuk API User yang gunakan.&#x20;

**g. OPSI - Stock**&#x20;

* **Display Stock**: Pilih "Ya" jika ingin menampilkan jumlah stock suatu produk pada page produk.&#x20;
* **Show Out Of Stock Warning:** Pilih "Ya" untuk menampilkan warning/peringatan jika stock produk habis.&#x20;
* **Stock Checkout:** Pilih "Ya" jika membolehkan Customer untuk tetap melakukan checkout jika produk yang mereka pesan stock produknya habis. Setting default standar untuk pilih “tidak”.

**h. OPSI - Affilasi**&#x20;

* **Affiliate Requires Approval:** Pilih “ya" jika ingin secara otomatis menyetujui affiliate baru yang melakukan pendaftaran.&#x20;
* **Automatic Commission**: Pilih "Ya" jika ingin secara otomatis menambah/memberi komisi pada affiliate ketika tiap order telah bersetatus complete.&#x20;
* **Affiliate Commission (%)**: Default jumlah persentase komisi yang diberikan kepada Affiliate.&#x20;
* **Affiliate Terms:** Ketentuan/peraturan yang harus diketahui oleh Affiliate ketika membuat akun pertama mereka.&#x20;
* **New Affiliate Alert Mail:** Notifikasi email kepada Anda apabila ada Affiliate baru yang membuat akun.&#x20;

**i. OPSI - Retur**&#x20;

* **Return Terms**: Mewajibkan customer untuk membaca ketentuan/peraturan sebelum melakukan return (pengembalian/ penukaran produk) yang dibuat.&#x20;
* **Return Status**: Seting default return status ketika sebuah permintaan return (pengembalian/penukaran produk) dikirim Ke Admin oleh Customer.&#x20;

**j. OPSI - Captcha**&#x20;

* **Captcha**: Pengaturan Captcha Captcha&#x20;
* Pag&#x65;**:** Page Capthca tampil pada register, reviews, returns, contact.&#x20;

**5. GAMBAR**&#x20;

* **Store Logo**: Image logo website Anda.&#x20;
* **Icon**: Icon Website Anda, terletak pada tab browser, file disarankan dengan format PNG dengan ukuran 16px X 16px.

**6. FTP,** Untuk pengaturan file transfer protokol ke Panel website. Skip saja (Setting by Administrator).

**7. SURAT,** Skip saja (Setting by Administrator).

**8. SERVER**&#x20;

**a. SERVER - General**&#x20;

* **Mode Perbaikan**: Pilih "Ya" Apabila Anda ingin customer melihat website dalam status Mode Perbaikan.
* **Gunakan URLs SEO**: Pilih "Ya" Jika ingin mengaktifkan SEO URLs.&#x20;

**b. SERVER - Security**&#x20;

* **Gunakan SSL:** Skip saja (Setting by Administrator).
* **Ijinkan lupa pasword**: Pilih "Yes" jika ingin menggunakan pasword recovery saat admin website lupa dengan pasword login.&#x20;
* **Sesi Penggunaan Bersama**: pilih ya jika Anda ingin agar satu user admin website dapat digunakan oleh banyak user.&#x20;
* **Kunci enkripsi:** Skip saja (Setting by Administrator)&#x20;

**c. SERVER - Uploads**&#x20;

* **Max ukuran file:** Maksimal ukuran file yang di upload. Tulis 300000 yang menandakan maksimal file upload = 300kb.&#x20;
* **Ekstensi file yang diperbolehkan**: Jenis file yang boleh di upload.
* **Mimefile yang diperbolehkan**: Menambah atau menghapus jenis mime yang diperbolehkan.&#x20;

d. **SERVER - Error Handling,** Skip saja (Setting by Administrator).


# Ganti Password Admin

Anda dapat mengganti password untuk login ke webiste admin, dengan cara sbb:

Login di website admin > masuk ke menu **Sistem** > klik menu **Pengguna** > klik **Pengguna.**

![](/files/-LdbL6FaHyQOOFpIEgwW)

Tampilkannya akan seperti ini.

![](/files/-LdbLMsDBb0_bb652xbF)

Ketik ikon pensil pada akun yang ingin diganti passwordnya.

Lalu akan tampil seperti ini:

![](/files/-LdbLpptNKwkvqrh5XYh)

Scroll ke bawah, lalu ketik kata sandi baru di menu **Kata Sandi,** dan ketik ulang kata sandi di menu **Konfirmasi.**

![](/files/-LdbMCr_dSZLGHCD_jnk)

Jika sudah, klik ikon **Simpan** pada bagian kanan atas.


# Informasi Peraturan dan Kebijakan Website

**Informasi** adalah fitur untuk membuat hal-hal mengenai keterangan, peraturan, kebijakan tentang website Anda seperti About Us, Delivery Information, Privacy Policy, Terms & Conditions.&#x20;

Untuk membuatnya bisa dengan cara sebagai berikut:&#x20;

1. Anda dapat mengakses menu **Katalog > Informasi**

![](/files/-LeFXlMdIsH6n0roymxi)

2\. Klik Edit pada bagian informasi yang ingin Anda Update, atau klik tombol baru **Add new** (plus) untuk menambahkan informasi baru lainnya.&#x20;

3\. Jika sudah semua, klik ikon **Simpan.**

*\*\*Tips dalam mengisi:* Jika Anda bingung kira-kira kata/kalimat seperti apa yang harus Anda isi pada tiap judul informasi tersebut, maka Anda bisa dengan mudah mencari ide dan inspirasi di Google tentang website apa yang menjual produk-produk online hampir sama dengan produk yang Anda jual.


# Cara Mengaktifkan SEO

**A. MENGAKTIFKAN SEO AGAR WEBSITE MUNCUL DI MESIN PENCARI GOOGLE**

Anda bisa mengaktifkan SEO agar website Anda bisa terdeteksi saat dicari di search engine (mesin pencari) seperti Google.

Caranya adalah sebagai berikut:

1\. Pertama Anda harus mengatur settingan di dashboard admin. Login terlebih dahulu di dashboard admin.

2\. Masuk ke menu **Sistem > Pengaturan >** klik **Edit.**

![](/files/-M54uIdItwtMqDWfDMDG)

3\. Lalu masukkan judul Meta (judul toko) yang ingin ditampilkan pada mesin pencari, misalnya seperti dibawah ini.

![](/files/-M54uSpbEfZk89pcBP3M)

4\. Lalu klik **Simpan.**

5\. Selanjutnya masuk ke tab **Server.**

![](/files/-LhibQckEOtjeB9W1fs1)

Pada menu **Gunakan URL SEO,** pilih **Ya.**

6\. Jangan lupa klik **Simpan.**

7\. Selanjutnya Anda harus mendaftakan website Anda pada **Google Search Console**, yaitu bisa masuk ke[ link berikut](https://search.google.com/search-console/about).

8\. Klik **Mulai Sekarang.**

9\. Ketikkan url website Anda di kolom **Awalan URL,** formatnya harus lengkap, misalnya seperti '<http://www.barinana.com>' ( harus ada http\:// atau https\:// )

![](/files/-LhiSdIssOpJnoKbsIAA)

10\. Selanjutnya klik **Terus**.

11\. Akan muncul tampilan seperti ini. Lalu klik file pada menu 'Download File'.

![](/files/-LhiTksb-mhJKCBw6kTv)

12\. Setelah file didownload, Anda bisa mengirimkan file tsb ke kami, bisa via email <support@oceanesia.com> atau chat WA ke tim support kami. (File tsb nantinya akan kami upload di server).

13\. Jika file sudah kami upload, maka Anda tinggal klik **Verifikasi**.

14\. Setelah itu akan muncul tampilan seperti dibawah, lalu klik **Selesai.**

![](/files/-LhiWx6AE345zH91cL0h)

Atau jika ingin instan, kami bisa bantu Anda untuk memasang iklan di google agar website/produk Anda bisa muncul di urutas teratas pada mesin pencarian google. Nanti bisa kami bantu set-up, dan Anda akan mendapatkan reportnya setiap pekan, reportnya itu terdiri dari berapa kali halaman ditampilkan, berapa kali diklik oleh user, dsb. Untuk info lebih lanjut Anda bisa menghubungi tim support kami.

**B. MENGAKTIFKAN SEO PADA PRODUK**

Anda bisa menambahkan SEO pada produk yang Anda jual, dengan cara sebagai berikut:

1. Login di dashboard admin.
2. Masuk ke menu **Katalog > Produk >** lalu klik edit pada produk yang mau ditambahkan SEO nya.
3. Klik tab **General.**

![](/files/-LhicVSpZ3JoAsGOWElb)

4\. Scroll kebawah sampai menemukan menu 'Judul Tag Meta'.

![](/files/-M5KMLdr3UglGQ53tSEf)

Perhatikan gambar dibawah ini, ini adalah hasil pencarian di google dengan kata kunci 'Acrylic Photo Printing'. Anda bisa mengikuti petunjuk pengisian seperti contoh dibawah.

![](/files/-Lhid8Nr6dUwSs1N6Sv2)

Penjelasan:

* **Judul Tag Meta:** judul yang akan muncul di mesin pencarian Google yaitu 'Acrylic Photo Printing'.
* **Deskripsi Tag Meta:** deskripsi yang akan muncul, yaitu 'Make acrylic photo prints from your favorite photos to create a polished and frameless gallery effect.....'
* **Kata Kunci Tag Meta:** domain/kata-kunci, yaitu seperti gambar diatas '<https://www.canvasfactory.com/sg/acrylic-prints/>, berarti website tsb menggunakan kata kunci tag meta 'acrylic-prints'.
* **Kategori tag produk:** kata kunci produk seperti diatas contohnya yaitu 'Make **acrylic photo prints** from' (kata yang dicetak tebal).

5\. Selanjutnya masuk ke tab **Data.**

![](/files/-Lhj2QDz9Axp_GBD_n9b)

6\. Scroll kebawah sampai pada menu 'Kata Kunci SEO'.

![](/files/-Lhj2kjtimNVyxyYR5f7)

Lalu ketikkan kata kuncinya dengan tanda strip seperti contoh digambar.

7\. Jika sudah, klik **Simpan.**


# Update Logo dan Icon

![](/files/-LeKb4z_2jZppOLGZcHr)

![](/files/-LeKbELQjzI2DxXbf9Ep)

Anda dapat mengedit gambar logo dan gambar icon pada website Anda seperti gambar diatas, dengan cara sbb:

1. Login di website admin > Masuk ke menu **Sistem** > klik menu **Pengaturan** > klik **Gambar**.&#x20;

![](/files/-LdMuCVNaKGxuVzQqXCP)

2\. Lalu klik gambarnya agar muncul ikon pensil dan penghapus.

![](/files/-LdMutw6KhIaKLtftv_Z)

3\. Klik ikon **pensil** > Lalu klik gambar yang ingin dijadikan logo. (Ukuran standarnya 268 x 50).

4\. Untuk mengedit gambar icon juga dengan langkah yang sama yaitu klik pada gambar Icon > lalu klik ikon pensil untuk memilih gambar. &#x20;

![](/files/-LdMvs_fyxNSOvTkPvL2)

Ukuran gambar yang direkomendasikan tidak lebih dari 250 x 250 kB.

5\. Jika sudah, klik ikon **Save/Simpan** di bagian kanan atas.


# Setting Ukuran Banner Utama

Untuk mensettting banner utama, sebenarnya sudah kami jelaskan [disini](https://docs.oceanesia.com/tutorial-1/setting-template), Anda tinggal mengklik nama template yang sesuai dengan website Anda, lalu klik Update Banner Utama.

![](/files/-LgzLJ5XNERT8lHpentX)

Gambar diatas adalah contoh banner utama/banner besar di website. Anda dapat mendesign sendiri dengan ukuran design gambarnya adalah 1366 x 600 px. Lalu untuk ukuran layoutnya adalah 1920 x 600 px.

Atau jika Anda belum memiliki gambar banner, kami bisa membantu design bannernya dengan harga Rp280rb/1x bayar. Untuk info lebih lanjut bisa hubungi customer support kami.


# TAMPILAN WEBSITE


# Top Bar


# Mengubah Warna Background pada Top Bar

![](/files/-LoKJDB2B512oBkStK-D)

Untuk mengubah warna background pada top bar website seperti yang ditandai pada gambar diatas, Anda bisa mengikuti langkah-langkah berikut:

1. Masuk ke menu **Journal > Dashboard > Settings > Header > General >** klik **General**

![](/files/-LoKWFIsfskGVjZKECYM)

2\. Lalu klik tanda panah pada menu **Top Bar Background Color.**

3\. Pilih warna yang diinginkan.

4\. Klik **Save.**


# Font Top Bar

![](/files/-LpRG4uumiCtkcqdphrT)

Anda bisa mengubah font top bar menu yang terdiri dari **Top Menu** dan **Secondary Menu** yang perbedaannya bisa dilihat pada gambar diatas. Silahkan ikuti petunjuk dibawah :

1. Masuk ke menu **Journal > Dashboard > Settings > Header > Menus.**
2. Klik **Top Menu,** lalu klik **Edit** pada menu **Link Font.**

![](/files/-LpRGv0_HmWJm8LaxjbI)

3\. Setelah itu, akan muncul tampilan seperti berikut :

![](/files/-LpRH5XZslwGHJuH7_KJ)

* **Font Type:** Anda bisa memilih mau Inherit, System atau Google. (Kalau Google, pilihan jenis hurufnya lebih banyak).
* **Font Name:** Anda bisa pilih mau jenis huruf yang seperti apa.
* **Font Size:** Ukuran font pada tampilan desktop.
* **Mobile Font Size:** Ukuran font pada tampilan mobile.
* **Font Weight:** Pilih ketebalan huruf (tidak berlaku untuk semua font name).
* **Font Style:** Pilih mau font normal atau italic (cetak miring).
* **Text Transform:** pilih **None** agar besar kecilnya huruf mengikuti yang diketikkan; atau pilih **Lowercase** agar huruf yang tampil adalah huruf kecil semua; atau, pilih  **Uppercase** agar huruf yang tampil adalah huruf kapital semua.
* **Font Color:** untuk mengubah warna huruf.

4\. Jika sudah, klik **OK.**

5\. Lalu klik tanda panah kebawah pada menu **Link Hover Color.** Gunanya adalah untuk membuat warna yang berbeda setelah teksnya diklik.

![](/files/-LpRIyckDidj6S2nUCjf)

6\. Selanjutnya klik **Secondary Menu,** lalu lakukan langkah yang sama dari langkah 1 - 5 untuk mengubah font pada Secondary Menu.

**B. Top Menus Dropdown.**

![](/files/-LpRL4D6xssrn78SQesP)

Selanjutnya Top Menus Dropdown, adalah dropdown menu (menu turunan) yang muncul seperti gambar diatas yaitu menu Login, Daftar dan Riwayat Pemesanan.&#x20;

1. Masih pada menu yang sama seperti diatas, Anda tinggal scroll kebawah sampai menemukan **Top Menus Dropdown.**

![](/files/-LpRKKYqzpiLR2uC5FtP)

* **Border Color :** untuk mengubah warna pada garis dropdown menu tsb.
* **Font - Hover:** Untuk mengubah warna awal font, dan warna font setelah diklik.
* **Background Color - Hover :** Untuk mengubah warna awal background pada dropdown menu tsb, dan warna background setelah diklik.

2\. Jika sudah, klik **Save.**


# Update Header Notice

![](/files/-Le9xAFJ6b1tdJYw564o)

Header Notice biasa digunakan untuk menampilkan notif yang terletak pada header. Notif tersebut dapat berupa pop-up yang akan menampilkan informasi promo, cookie law, atau informasi khusus lainnya sesuai kebutuhan Anda.&#x20;

Untuk mengeditnya ikuti petunjuk berikut:&#x20;

1. Login di website admin > Masuk ke Menu **Journal > Dashbord > Header Notice >** klik icon **“Edit”** pada **Notice, Allpages.**

![](/files/-Le9xvOucUiUENPax_x0)

Atau jika belum ada, Anda bisa klik **icon Create New** di bagian pojok kanan atas.

2\. Kemudian masuk ke **General Option.**

![](/files/-Le9yD0oFWijZUMquuBc)

Update teks pada kolom **Notice Text,** sesuaikan dengan kebutuhan.&#x20;

Perhatikan pada kode berikut: javascript:Journal.openPopup('32') Yang menandakan link di teks notice akan menampilkan pop-up dengan id nomor = 32.&#x20;

3\. Untuk selanjutnya Anda tinggal mengedit Pop-up id 32 tersebut, dengan cara sebagai berikut: Masuk ke menu **Journal > Dashboard > Popup > klik icon “Edit” pada Message Notice.**

![](/files/-Le9zBPIGp6ZVKuX-kS9)

&#x20;4\. Klik **General Options.**&#x20;

![](/files/-LeA-3Pe0zww05G3ARVN)

&#x61;**. General Custom URL** : Set **ON**, agar kolom Custom URL muncul.&#x20;

b. **URL**: pada kolom ini Anda akan melihat nilai ID kode programnya. Contoh 32 seperti pada gambar disamping yang menandakan Pop-up yang sedang kita edit nilai ID nya adalah 32, jadi setiap link url header notice yang menggunakan pop-up ID 32 akan menampilkan teks yang terletak pada colom Content di page ini.&#x20;

c. **Content**: Masukan teks/atau konten informasi yang ingin Anda tampilkan.&#x20;

5\. Klik **Simpan** setelah selesai mengupdatenya.&#x20;

***\*\*Catatan***: Pastikan nomor ID pada menu **Popup** sama dengan nomor ID pada menu **Header Notice,** agar code javascript sinkron dengan nomor ID tersebut.


# Header


# Setting Dropdown Menu


# Membuat Mega Menu

**\*\*MEMBUAT MEGA MENU TIPE 1\*\***

![](/files/-Ldwm4Uq26lFHvyn1aVy)

Sebelum membuat Mega Menu seperti gambar di atas, Anda diwajibkan sudah membuat kategori menu terlebih dahulu.

Berikut ini langkah-langkah untuk membuat mega menu:

1\. Login di website admin > Akses ke menu **Journal > Dashboard > Menus > Main menu**&#x20;

2\. Klik **Add Menu Item +** untuk membuat menu baru atau juga dapat mengklik **Menu Item 2,3,**&#x64;st untuk mengedit bentuk menu yang sudah ada (dari default template)

3\. Selanjutnya setting menu tersebut seperti pada gambar dibawah ini.&#x20;

![](/files/-Ldwmt-8qBmtmgT9ojLk)

* **Main Menu Type:** Pilih **Mixed** agar dapat mengkombinasikan link dengan image/banner.
* **Menu Name**: update nama menu yang ingin Anda tampilkan pada row menu atas halaman website.

\
4\. Selanjutnya Anda tinggal mengupdate Sub Menu pada induk kategori tersebut. Yaitu pada **Column 1** dan **Column 2**.&#x20;

Update **Column1:** klik pada **Column 1**, kemudian update seperti gambar dibawah ini.

![](/files/-Ldwn_OkjRskpdnFHmzk)

* **Column Type:** pilih **Category**&#x20;
* **Category Menu Item:** Pilih **Manual**&#x20;
* **Categories:** tambahkan Categori sebanyak yang ingin Anda tambahkan dengan mengklik tombol **Add**. Select dan pilih induk atau sub kategori yang ingin dipilih.&#x20;
* **Image Dimension**: untuk image dimension ada dapat mengkosongkan saja (sudah otomatis).
* **Item Limit**: Anda dapat membatasi jumlah Sub/Anak kategori yang akan muncul otomatis kebawah. Misalnya 4,5,6,7,8 dst. <br>

5\. Jika telah selesai mengupdate, klik **Save**.&#x20;

Berikutnya, mengupdate pada **Column 2**&#x20;

Untuk mengupdate pada **Column 2** (menampilkan high light produk khusus), ikuti petunjuk di bawah ini:

1. Ikuti petunjuk dibawah:

![](/files/-Ldwp52L-vpkwTm7BUeU)

* **Column Type**: pilih **HTML**&#x20;
* **Menu Name:** Anda dapat bebas untuk memberi nama pada menu tersebut contoh **On Sale, Best Seller, Featured,** dll
* **Content**: Silahkan masukan gambar yang ingin Anda Update pada colom Content dengan mengklik icon image. <br>

2\. Jika telah selesai klik **Save**.

**\*\*MEMBUAT MEGA MENU TIPE 2\*\***

![](/files/-Ldwph9u8JZ3dWjXRvLv)

Untuk membuat mega menu seperti bentuk pada gambar di atas, silahkan ikuti langkah berikut ini:&#x20;

1\. Akses ke menu **Journal > Dashboard > Menus > Main menu**&#x20;

2\. Klik **Add Menu Item +** untuk membuat menu baru atau juga dapat mengklik **Menu Item 3** untuk mengedit bentuk menu yang sudah ada ( dari default template)&#x20;

3\. Selanjutnya setting menu tersebut seperti pada gambar dibawah ini.

![](/files/-LdwqEyL2LGYxi8stGtQ)

* **Main Menu Type:** Pilih **Category**&#x20;
* **Category Menu Type:** Pilih **Mega Menu**
* **Category Menu Item**: Pilih **Manual**&#x20;
* **Categories**: Tambahkan category sebanyak yang ingin Anda masukan pada menu tersebut. Klik “**Add**” untuk menambah.
* **Show**: Pilih **Both** agar link menampilkan gambar beserta link.&#x20;
* **Menu Item**: Tulis nama Link pada Column tersebut yang akan tampil pada main menu website.&#x20;
* **Image Dimension**: kosongkan saja. (image dimensi sudah otomatis)
* **Item Limit**: Anda dapat membatasi jumlah Sub/Anak kategori yang akan muncul otomatis kebawah. Misalnya 4,5,6,7,8 dst. <br>

4\. Setelah selesai klik **Save**.&#x20;


# Membuat Tampilan Multi Level (Dropdown Standar)

![](/files/-LdqraKo289dt2iqD0wX)

![](/files/-LeFbQh4afgLFAeiSYDW)

Untuk membuat tampilan dropdown menu menjadi list seperti 2 contoh diatas, caranya adalah sbb:

1. Login di website admin > masuk ke menu **Journal > Dashboard > Menus > Main Menu >** klik pada **Menu Item 1,2,3,** dst > maka tampilannya seperti ini.

![](/files/-Ldrv6zCRBkrDO4CESm3)

a. **Main Menu Type:** Pilih **Category,** Atau Anda juga bisa memilih opsi yang lain (lihat penjelasannya setelah penjelasan Category). \
Setelah Anda memilih Category maka akan muncul menu seperti pada gambar dan ikuti petunjuk pengisian berikut:

* **Icon**: pilih icon jika ingin menambahkan icon.
* **Float**: Untuk perataan teks pada Menu tersebut. Pilih **Left** jika ingin menu teks merapat ke kiri, atau pilih **Right** jika ingin menu merapat kearah kanan. Pada kali ini kita memilih **Left** agar teks merapat ke kiri.
* **Hide Text**: Pilih **Yes** jika ingin menyembunyikan **Text,** atau pilih **No** jika ingin menampilkan **Text**. (Untuk default pilih “**No**”).
* **Category Menu Type:** Pada kali ini kita memilih “**Multi Level**” karena akan membuat Menu berbentuk dropdown standar seperti gambar diatas.&#x20;
* **Category Menu Item:** Pilih **Existing** jika hanya ingin membuat satu “judul” kategori link dropdown menu untuk 1 induk kategori utama saja. Atau pilih **Manual** jika ingin membuat satu “judul” kategori link dropdown menu diisi dengan banyak induk kategori utama. (Pada kali ini kita pilih “**Manual**” agar dapat memasukkan banyak induk kategori utama seperti pada contoh gambar sebelumnya. Yaitu induk kategori “Blazer, Suits, Sweatshirts, Jackets, dst”).
* **Categories:** Klik **Add** untuk menambahkan kategori produk. Dan select induk kategori yang ingin Anda masukan pada kolom tsb. (Note: pada saat select bersifat auto complete, maka ketik nama induk kategori pada kolom tersebut untuk memunculkannya, jika sudah muncul maka klik pada nama kategori yang ingin ditampilkan). \
  Untuk menambahkan induk kategori utama yang lain silahkan kembali klik tombol “**Add**” sebanyak kebutuhan induk kategori yang ingin Anda masukan.&#x20;
* **Menu Name**: Masukan nama “Judul” link drop down menu tersebut.
* **Status**: Pilih **ON** agar menu tersebut diaktifkan **(**&#x4A;ika Anda ingin menonaktifkan nya, maka set **Status** menjadi **OFF).**
* **Sort Order**: isi dengan angka untuk mengurutkan urutan menu. Misal 1 untuk posisi pertama, 2 untuk posisi ke dua,dst. <br>

2\. Jika pada **Main Menu Type** Anda memilih opsi yang lain, seperti **Custom,** maka ikuti pengisiannya dibawah:

![](/files/-Ly8a3o4DXQs3SRYNvYC)

* **Menu Link:** untuk mengisi link, agar submenu yang diklik akan mengarahkan ke link/halaman tertentu.
* **Menu Name:** Isi kembali nama menu yang akan ditampilan. <br>

2\. Jika sudah, klik **Save.**


# Setting Urutan Menu

&#x20;

![](/files/-LdvJloFzmvSpdy7wgBS)

Terkadang Anda ingin merubah urutan menu website misalnya posisi menu BLAZER ke sebelah kanan diganti dengan menu JACKETS yang di sebelah kiri seperti pada gambar di atas. Anda dapat melakukannya dengan memberi nomor **Sort Order** pada tiap menu item yang ada.

Urutan paling pertama dimulai dengan menggunakan nomor 0, kemudian dilanjut dengan nomor 1, 2, 3 dst. Silahkan untuk memberi angka pada row **Sort Order** di semua **Menu Item** yang ada, seperti pada gambar dibawah.

![](/files/-LdvNMSfzWtib6R9lk4c)

Selanjutnya klik **Save** jika sudah memberi semua nomor pada sort order di tiap Menu Item.


# Mengubah Warna Background

![](/files/-LnvhpEZgZRHQ-2Fbjvs)

Header adalah bagian atas pada halaman website, yang biasanya mencakup logo website, icon search, icon keranjang belanja, dan juga menu-menu seperti Home, Products, dst (seperti yang ditunjukkan oleh tanda panah pada gambar).\
Anda bisa mengubah warna background pada header website tersebut dengan 2 cara, yg pertama adalah warna biasa ( 1 warna ), dan yang kedua adalah membuat gradasi warna.

Caranya adalah sebagai berikut:

**A. MENGUBAH WARNA BIASA PADA BACKGROUND HEADER.**

1. Masuk ke menu **Journal > Dashboard > Settings > Header > General >**  klik **General.**

Pada menu **Header Background,** klik tanda panah kebawah untuk mengubah warna background.

![](/files/-Lnvj0he1BGwDuLKu1A8)

2\. Pilih warna sesuai keinginan Anda.

3\. Jika sudah, klik **Save** (di pojok kanan atas).

**B. MEMBUAT WARNA GRADASI**

1. Pada menu **Header Background,** klik **Edit** untuk menambah gambar background.

![](/files/-LnvjG8Qb4QPiuGfY3TZ)

2\. Lalu klik **ON** pada menu **Use Gradient** seperti dibawah.

![](/files/-LnzgE0F9rymOdOtX3qP)

Jika sudah di setting menjadi **ON,** maka tampilannya akan seperti ini.

![](/files/-LnzguthsU0ZYq87Mi6Q)

3\. Silahkan Anda klik Sample Generators: **Gradient 1** atau **Gradasi 2,** maka nanti akan redirect ke link untuk membuat gradasi warna, Anda bisa pilih warna sesuka hati untuk dibuat gradasi (membuat gradasi 2 warna).

Jika ingin membuat gradasi 3 warna, Anda bisa kunjungi website <https://cssgradient.io/>.

4\. Jika Anda sudah membuat gradasi warna pada link tersebut, selanjutnya Anda bisa klik **Get CSS** untuk mendapatkan kode CSS nya.

5\. Copy kode CSS tsb, kemudian paste di kolom yg tersedia di menu **Use Gradient.**

![](/files/-LnziUH-9ITq3hwsY9m3)

3\. Jika sudah, klik **OK.**

&#x34;**.** Lalu klik **Save.**


# Menambahkan Gambar Background

![](/files/-LnvhpEZgZRHQ-2Fbjvs)

Header adalah bagian atas pada halaman website, yang biasanya mencakup logo website, icon search, icon keranjang belanja, dan juga menu-menu seperti Home, Products, dst (seperti yang ditunjukkan oleh tanda panah pada gambar).\
Anda bisa menambahkan gambar background pada header website tersebut.

Caranya adalah sebagai berikut:

1. Masuk ke menu **Journal > Dashboard > Settings > Header > General >**  klik **General.**
2. Pada menu **Header Background,** klik **Edit** untuk menambah gambar background (agar background header berupa gambar).

![](/files/-LnvjG8Qb4QPiuGfY3TZ)

3\. Setelah klik Edit, maka akan muncul tampilan seperti berikut:

![](/files/-Lnv_wQR467SE1LwL9S7)

Silahkan klik **Add Image** untuk menambahkan image baru > Lalu unggah image yang ingin dijadikan sebagai background header > Setelah itu pilih gambarnya.

4\. Lalu klik **OK.**

5\. Lalu klik **Save** di pojok kanan atas.


# Ubah Font pada Main Menu

![](/files/-LpRMjxlKGVocpPKMtZS)

Main Menu adalah menu-menu yang terletak pada header website (yang ditandai pada gambar diatas). Anda bisa mengubah fontnya dengan cara berikut:

1. Masuk ke menu **Journal > Dashboard > Settings > Header > Menus.**
2. Klik **Main Menu.**

![](/files/-LpROs93yJjXNG3EBPFF)

* **Menu Background:** Untuk mengubah background menu-menu yang ada pada main menu (background tsb terbatas hanya pada menu-menunya saja).
* **Fullwidth Background:** Untuk mengubah background keseluruhan pada main menu (dari ujung kiri ke ujung kanan).
* **Menu Font:** Untuk mengubah font style, font size dan warna huruf pada main menu.
* **Menu Font Hover:** Untuk mengubah warna font saat menu diklik.

3\. Jika sudah, klik **Save.**


# Update Menu pada Main Menu

![](/files/-LpaSeLSrQ4WIqkzY9NS)

Untuk mengupdate menu-menu pada main menu seperti diatas, caranya adalah sebagai berikut:

1. Masuk ke menu **Journal > Dashboard > Menus > Main Menu.**
2. Klik Add Menu Item +

![](/files/-LpaUtCcSh8yZMbgVDMt)

3\. Lalu buat satu per satu menunya. Ikuti petunjuk dibawah.

![](/files/-LpaVUrYx0cNqLkHnjL0)

* **Item Name**: Isi dengan nama menu yang ingin dibuat, misalnya **Home**.
* **Main Menu Type**: Pilih **Custom** jika Anda ingin membuat menu yang di link-kan atau di-redirect-kan ke halaman tertentu/link tertentu (contoh: misalnya  jika ingin membuat menu Home maka saat diklik akan menuju ke menu Home/Beranda, atau misalnya jika ingin membuat menu Blog maka saat diklik akan menuju ke menu Blog website, dan sebagainya yang sejenis).
* **Icon:** Klik **Edit** jika ingin menambahkan icon.
* **Float:** Pilih **Left.**
* **Hide Text**: Pilih **No** agar teksnya tetap muncul, atau pilih **Yes** jika ingin menyembunyikan teksnya (hide text hanya untuk menu yang sudah Anda pilih iconnya, jadi saat teksnya disembunyikan,hanya icon saja yang tampil).
* **Menu Link:** Anda bisa pilih **Website Page - Home**, agar saat teks Home diklik maka akan redirect ke homepage website. (dalam hal ini Anda bisa memilih halaman lain, sesuai menu tsb akan di-redirect-kan ke page mana. Atau Anda juga bisa pilih **Custom** agar bisa memasukkan sebuah link.
* **Open in New Tab:** Pilih **Yes** jika Anda ingin pengunjung yang mengklik menu tsb diarahkan ke tab baru pada browser, atau pilih **No** jika Anda ingin pengunjung yang mengklik menu tsb tetap berada pada tab browser yang sama.
* **Menu Name:** Isi nama menu yang ingin ditampilkan pada main menu website.
* Untuk **Menu Item Text Color** dan **Menu Item Background Color** bisa lihat penjelasannya pada link [berikut](https://docs.oceanesia.com/tutorial-1/manual-book-v-1-0/menu-journal-tampilan-website/header/font-main-menu).
* **Enable on Phone, Tablet dan Desktop:** Set status menjadi **ON** agar menu yang dibuat bisa tampil pada tampilan mobile, tablet dan desktop (Atau Anda bisa set status menjadi OFF pada salah satunya, sesuai selera Anda).
* **Sort Order:** Untuk mengubah urutan tampil menu tsb. Anda bisa mengosongkan jika urutan tampilnya mau disamakan dengan urutan penginputannya.

4\. Jika sudah, klik **Save.**

![](/files/-Lpa_OimGhuywL0iReqY)

**\*\*Note**: Jika Anda ingin membuat tampilan seperti ini pada kategori produk, Anda bisa mengikuti cara di link [berikut](https://docs.oceanesia.com/tutorial-1/manual-book-v-1-0/setting-dropdown-menu).


# Mengaktifkan Sticky Header

![](/files/-LrqyJlkDhb1kUIo0g0T)

Anda bisa membuat website Anda seperti ini, jadi saat halaman website discroll ke bawah, maka header menunya otomatis ikut ke bawah (seperti contoh gambar diatas). Caranya adalah sebagai berikut:\
\
1\. Login di dashboard admin.\
2\. Masuk ke menu **Journal > Dashboard > Settings > Header > General.**\
3\. Klik **General >** klik **Sticky Header.**

![](/files/-LrvVUCYEbu2QLR6-EYX)

* **Sticky Header**: klik **ON.**
* **Sticky Header Style:** pilih **Default** jika Anda ingin menampilkan logo, menu pada main menu, menu search dan menu keranjang belanja pada header saat discroll ke bawah

![](/files/-LrvXMMeT0H35sbU2P7x)

atau pilih **Menu** jika hanya ingin menampilkan menu saja (tanpa logo, menu search dan menu keranjang belanja),&#x20;

![](/files/-LrvXhPkxRkhezE02yAN)

atau pilih **Full** untuk menampilkan sticky header yang sama persis dengan header sebelum website discroll.

![](/files/-LrvXu3ACqO-b4Wqhp-T)

* Selanjutnya, **Hide on Scroll Up:** pilih **OFF.**<br>

4\. Jika sudah, klik **Save** di pojok kanan atas.


# Body Website


# Mengubah Warna Background

![](/files/-LpR7gu72GLdrYOEZC9M)

Body website adalah body atau badan halaman website, yang biasanya mencakup gambar produk (seperti yang ditunjukkan oleh tanda panah pada gambar).\
Anda bisa mengubah warna background pada body website tersebut dengan 2 cara, yg pertama adalah warna biasa ( 1 warna ), dan yang kedua adalah membuat gradasi warna.

Caranya adalah sebagai berikut:

**A. MENGUBAH WARNA BIASA PADA BACKGROUND BODY WEBSITE.**

1. Masuk ke menu **Journal > Dashboard > Settings > Global > General >**  klik **General.**

Pada menu **Body Background,** klik tanda panah kebawah untuk mengubah warna background.

![](/files/-LpR8U6uWe-DEy_BuSRT)

2\. Pilih warna sesuai keinginan Anda.

3\. Jika sudah, klik **Save** (di pojok kanan atas).

**B. MEMBUAT WARNA GRADASI**

1. Pada menu **Body Background,** klik **Edit** untuk menambah gambar background.

![](/files/-LpR8bQ7J3HE-oqOg0QJ)

2\. Lalu klik **ON** pada menu **Use Gradient** seperti dibawah.

![](/files/-LnzgE0F9rymOdOtX3qP)

Jika sudah di setting menjadi **ON,** maka tampilannya akan seperti ini.

![](/files/-LnzguthsU0ZYq87Mi6Q)

3\. Silahkan Anda klik Sample Generators: **Gradient 1** atau **Gradasi 2,** maka nanti akan redirect ke link untuk membuat gradasi warna, Anda bisa pilih warna sesuka hati untuk dibuat gradasi (membuat gradasi 2 warna).

Jika ingin membuat gradasi 3 warna, Anda bisa kunjungi website <https://cssgradient.io/>.

4\. Jika Anda sudah membuat gradasi warna pada link tersebut, selanjutnya Anda bisa klik **Get CSS** untuk mendapatkan kode CSS nya.

5\. Copy kode CSS tsb, kemudian paste di kolom yg tersedia di menu **Use Gradient.**

![](/files/-LnziUH-9ITq3hwsY9m3)

3\. Jika sudah, klik **OK.**

&#x34;**.** Lalu klik **Save.**


# Menambahkan Gambar Background

![](/files/-LpR7gu72GLdrYOEZC9M)

Body website adalah body atau badan halaman website, yang biasanya mencakup gambar produk (seperti yang ditunjukkan oleh tanda panah pada gambar).

Anda bisa menambahkan gambar background pada body website tersebut.

Caranya adalah sebagai berikut:

1. Masuk ke menu **Journal > Dashboard > Settings > Global > General >**  klik **General.**
2. Pada menu **Body Background,** klik **Edit** untuk menambah gambar background (agar background body website berupa gambar).

![](/files/-LpR9Vcl9aSc_5AvcFZH)

3\. Setelah klik Edit, maka akan muncul tampilan seperti berikut:

![](/files/-Lnv_wQR467SE1LwL9S7)

Silahkan klik **Add Image** untuk menambahkan image baru > Lalu unggah image yang ingin dijadikan sebagai background body website > Setelah itu pilih gambarnya.

4\. Lalu klik **OK.**

5\. Lalu klik **Save** di pojok kanan atas.


# Mengubah Font Global

Anda bisa mengubah warna font global website, dengan cara sebagai berikut:

1. Masuk ke menu **Journal > Dashboard > Settings > Global > General.**
2. Klik menu **General >** klik Edit pada menu **Global Font,** maka nanti akan muncul tampilan seperti berikut.

![](/files/-LoNwaaZ5-M3m2K2nuNA)

* **Font Type :** Anda bisa memilih tipe huruf (Font Type), apakah Inherit, System atau Google (yang banyak pilihannya ada di Font Type Google).
* **Font Name :** Anda bisa memilih jenis huruf yang tersedia.
* **Font Size :** Pilih ukuran huruf yang akan tampil pada desktop.
* **Mobile Font Size :** Ukuran huruf yang akan tampil pada mobile.
* **Font Weight :** Ketebalan huruf (semakin besar angkanya maka akan semakin tebal).
* **Font Style :** Bisa pilih mau Normal atau *Italic.*
* **Text Transform**:&#x20;
  * Jika Anda pilih **None**, maka yang akan tampil akan sesuai dengan yang Anda ketik.&#x20;
  * Jika Anda pilih **lowercase**, maka yang akan tampil adalah huruf kecil semua.&#x20;
  * Dan jika Anda pilih **Uppercase**, maka yang akan tampil adalah huruf kapital semua.
* **Font Color :** Anda bisa pilih warna font sesuai keinginan Anda.

3\. Jika sudah, klik **OK.**

4\. Lalu klik **Save** di pojok kanan atas.


# Footer

![](/files/-LpRAUUGQWUKBwRdHOBL)

Footer website adalah bagian website yang paling bawah, yang biasanya terdiri dari informasi jam buka toko, kontak yang bisa dihubungi, dan informasi yang bisa diklik terlebih dahulu oleh visitor dan customer (seperti yang terlihat pada gambar diatas).

Anda bisa mengubah warna background footer tsb, dengan cara sbb:

1. Masuk ke menu **Journal** > **Dashboard > Settings > Footer >** klik **General.**
2. Klik tanda panah kebawah pada menu **Fullwidth Background.**

![](/files/-LpRBCBMgeErK4MuxcVD)

3\. Pilih warna yg diinginkan.

4\. Klik **Save (**&#x64;i pojok kanan atas).


# Mengubah Warna Background

![](/files/-LpRAUUGQWUKBwRdHOBL)

Footer website adalah bagian website yang paling bawah, yang biasanya terdiri dari informasi jam buka toko, kontak yang bisa dihubungi, dan informasi yang bisa diklik terlebih dahulu oleh visitor dan customer (seperti yang terlihat pada gambar diatas).

Anda bisa mengubah warna background footer tsb, dengan 2 cara, yg pertama adalah mengubah warna biasa (1 warna) dan yg kedua yaitu membuat gradasi warna. Caranya adalah sbb:

**A. MENGUBAH WARNA BIASA ( 1 WARNA ).**

1. Masuk ke menu **Journal** > **Dashboard > Settings > Footer >** klik **General.**
2. Klik tanda panah kebawah pada menu **Fullwidth Background.**

![](/files/-LpRBCBMgeErK4MuxcVD)

3\. Pilih warna yg diinginkan.

4\. Klik **Save (**&#x64;i pojok kanan atas).

**B. MEMBUAT WARNA GRADASI**

1. Klik **Edit** pada menu **Body Background.**

![](/files/-LpRCDzDS1gnR38sDE8X)

2\. Lalu klik **ON** pada menu **Use Gradient** seperti dibawah.

![](/files/-LnzgE0F9rymOdOtX3qP)

Jika sudah di setting menjadi **ON,** maka tampilannya akan seperti ini.

![](/files/-LnzguthsU0ZYq87Mi6Q)

3\. Silahkan Anda klik Sample Generators: **Gradient 1** atau **Gradasi 2,** maka nanti akan redirect ke link untuk membuat gradasi warna, Anda bisa pilih warna sesuka hati untuk dibuat gradasi (membuat gradasi 2 warna).

Jika ingin membuat gradasi 3 warna, Anda bisa kunjungi website <https://cssgradient.io/>.

4\. Jika Anda sudah membuat gradasi warna pada link tersebut, selanjutnya Anda bisa klik **Get CSS** untuk mendapatkan kode CSS nya.

5\. Copy kode CSS tsb, kemudian paste di kolom yg tersedia di menu **Use Gradient.**

![](/files/-LnziUH-9ITq3hwsY9m3)

3\. Jika sudah, klik **OK.**

&#x34;**.** Lalu klik **Save.**


# Menambahkan Gambar Background

![](/files/-LpRAUUGQWUKBwRdHOBL)

Footer website adalah bagian website yang paling bawah, yang biasanya terdiri dari informasi jam buka toko, kontak yang bisa dihubungi, dan informasi yang bisa diklik terlebih dahulu oleh visitor dan customer (seperti yang terlihat pada gambar diatas).

Anda bisa mengubah warna background footer tsb dengan cara sebagai berikut:

1. Masuk ke menu **Journal > Dashboard > Settings > Footer >**  klik **General.**
2. Pada menu **Fullwidth Background,** klik **Edit** untuk menambah gambar background (agar background footer berupa gambar).

![](/files/-LpRD75AkUZGt_xWVjn3)

3\. Setelah klik Edit, maka akan muncul tampilan seperti berikut:

![](/files/-Lnv_wQR467SE1LwL9S7)

Silahkan klik **Add Image** untuk menambahkan image baru > Lalu unggah image yang ingin dijadikan sebagai background footer > Setelah itu pilih gambarnya.

4\. Lalu klik **OK.**

5\. Lalu klik **Save** di pojok kanan atas.


# Update Menu Footer

![](/files/-LdOFPOjCUscjPgECF7C)

Anda dapat mengupdate menu footer (tampilan menu di website yang ada di paling bawah), seperti menu **Customer Service, Information, Useful Link, Company Map**, dan lain-lain.

Berikut cara update menu footer:

Login di website admin > Masuk ke menu **Journal** > klik **Dashboard** > klik **Footer** > klik **Menu**, seperti tampilan dibawah ini.

![](/files/-LdO8dgA6nhr8EJQDmcy)

Klik **LINK,** lalu akan muncul tampilan seperti ini.

![](/files/-LdO8t7Il4FudRxPSRKL)

Scroll ke bawah, lalu klik **Add Column**

![](/files/-LdO9DX3vBiN-2A-ruij)

Maka akan tampil seperti ini

![](/files/-LdO9WykYJ3OG6eAdmmM)

Misalnya Anda ingin menambahkan tulisan Customer Service, lalu isi **Row Name** dan **Column Title** dengan tulisan "Customer Service", untuk **Column Type** pilih **Menu** seperti gambar diatas, lalu pilih "**ON"** pada menu **Status, Enable on Phone, Enable on Tablet,** dan **Enable on Desktop** agar footer tersebut dapat tampil di berbagai jenis gadget, dan untuk menu **Sort Order** bisa dikosongkan atau diisi sesuai selera Anda (itu akan berpengaruh pada urutan tampilannya).

Setelah itu, klik **Add Menu Item** seperti berikut.

![](/files/-LdOAwFLj3KQVEYmb7NX)

Misalnya Anda ingin menambahkan nomor telepon yang bisa dihubungi, maka Anda bisa input seperti ini. \
(Untuk menu **Open in New Tab,** jika klik **ON** maka setelah customer klik nomor telepon maka customer akan otomatis diarahkan ke tab baru di bowsernya, tapi jika klik **OFF** maka customer akan tetap di tab yang sama walaupun customer telah mengklik nomor telepon Anda).

![](/files/-LdOB70IzMFeWrKzETdy)

Anda bisa klik lagi **Add Menu Item** jika menginginkan menu tambahan seperti email, atau yang lainnya.

Jika sudah selesai, Klik **Save** di bagian kanan atas.


# Update Informasi di Link Footer

![](/files/-M-Syht60PTCxf4vVLlB)

Sebelum ke tahap ini, Anda perlu mengikuti tutorial di link berikut <https://docs.oceanesia.com/tutorial-1/manual-book-v-1-0/tampilan-website/footer/update-menu-footer>

Setelah tahap diatas, tahap selanjutnya yaitu untuk mengupdate informasi di footer. Caranya sebagai berikut:

1. Masuk ke menu **Katalog > Informasi >** klik **Add New** untuk menambahkan judul baru, atau klik **Ubah** untuk mengubah menu yang sudah ada.

![](/files/-M-T0YpHXgqZ3Bf8PnKF)

2\. Klik tab **General**

![](/files/-M-T123brYR-QRjoQlN4)

* **Judul Informasi:** masukkan judul yg ingin ditampilkan, misalnya 'About Us' atau 'Tentang Kami'.
* **Deskripsi:** masukkan deskripsi untuk menjelaskan detail informasi yg ingin Anda berikan.
* **Judul Tag Meta:** Anda bisa masukkan seperti Judul Informasi.
* **Deksripsi Tag Meta:** bisa disamakan dengan isi pada Deskripsi, atau boleh dikosongkan.
* **Kata Kunci Tag Meta:** bisa diisi dengan kata kunci terkait, misalnya 'about us', atau boleh dikosongkan.

3\. Klik tab **Data**

![](/files/-M-T1v9hv9pAvRDBoGhF)

* **Kata kunci SEO:** isi dengan huruf kecil semua dan tanpa special character (tanda baca spasi harusdiganti dengan strip). Misalnya: 'about-us' \
  \*Note: Kata kunci SEO juga berguna untuk membuat link url, jadi jika Anda mengisi dengan 'about-us' maka nanti akan menjadi url link, contoh: oceanesia.com/about-us (ini berguna untuk pengaturan pada tahap selanjutnya yang akan dijelaskan dibawah).
* **Status:** pilih Diaktifkan.
* **Urutan:** bisa dikosongkan.

4\. Klik icon **Simpan.**\
\
\
**Tahap selanjutnya,** yaitu menghubungkannya ke footer, agar link About Us tsb bisa diklik, maka caranya sebagai berikut:

1. Masuk ke menu **Journal > Dashboard > Footer > Menu >** klik **LINK** atau klik **Add Row.**

![](/files/-M-TGCydbfOrk2tviClL)

\
2\. Klik **Add Column**

![](/files/-M-TGWWLkpeni-5dzOot)

* **Row Name:** isi dengan judul yg ingin ditampilkan pada footer, misalnya 'INFORMATION'
* **Column Title:**  samakan dengan Row Name.

\
3\. Klik **Add New Item**

![](/files/-M-TH4avKgHILAjgX5Ou)

* **Link:** Pilih **Information >** lalu disampingnya ketikkan about us maka akan muncul dibawahnya (yang sudah dibuat sebelumnya).
* **Name Overwrite:** pilih **ON** jika ingin menuliskan nama yang berbeda dari judul 'About Us'
* **Name:** ketikkan nama yang berbeda, misalnya 'Tentang Kami'.

![](/files/-M-THpyJqTkUqNyshXvV)

* Atau **Link** nya bisa diubah pilihannya menjadi **Custom** (Custom ini berguna untuk memasukkan link).
* Jika Anda pilih **Link Custom,** maka **Nama** wajib diisi, jika tidak diisi maka akan tampil 'Not Translated'.

\
4\. Jika sudah, klik **Save.**


# Update Informasi Toko

**Informasi Toko** bisa dilihat di footer (di paling bawah halaman website).

![](/files/-LdathpV0n9t9rz4Ehyq)

Lalu klik menu **Hubungi Kami >** Maka tampilan **Informasi Toko** akan terlihat seperti dibawah ini.

![](/files/-Ldau6lQx8fWVrH5pBuP)

Nah, Anda dapat mengupdate **Informasi Toko** seperti tampilan diatas dengan cara sebagai berikut:

1. Login di website admin > Masuk ke menu **Sistem** > klik **Pengaturan** > klik **Toko**, lalu tampilannya akan seperti ini.

![](/files/-LdarXTwBC72WZQi8Z3Z)

![](/files/-LdareKakHWc9bQJmRsz)

2\. Kemudian isi data **Nama Toko, Pemilik Toko, Alamat, Geo Code** (kode google maps yang diinput secara manual, contoh: -6.243413, 106.648871)**, Email, Telepon, Faks, Gambar** (gambar yang akan muncul pada informasi toko)**, Jam Buka,** dan **Komentar** (bisa diisi dengan catatan khusus yang ingin diinfokan ke pelanggan Anda).

3\. Jika sudah diisi semua, maka klik ikon **Simpan** di pojok kanan atas.


# Update Company Map

![](/files/-Le9ubmQ0ipiPTFQZtyB)

Untuk mengupdate **Company Map** pada menu footer (seperti diatas). Langkahnya sebagai berikut:&#x20;

1\. Login di wesbite admin > masuk ke menu **Journal > Dashboard > Footer > Menu** .

2\. Klik pada **Row 1 >** klik Slide **Company Map.**

3\. Klik "**Bahasa Indonesia"** untuk mengedit teks.

![](/files/-Le9vjr5lbRMdOxAkCIR)

&#x20;Lalu klik ikon **Source** untuk memasukan code embed Google Maps Anda (Hapus code embed yang lama, kemudian masukan code embed google maps Anda).,

4\. Klik **OK** > lalu klik **Save.**


# Update Sosial Media

![](/files/-LeBaQSiBg5v9G4k3Tqr)

Untuk update social media pada footer seperti contoh diatas, caranya adalah sebagai berikut:

1. Akses ke menu **Journal > Dashboard > Footer > Menu**
2. Cek dan pilih **Row 3 (***\*\*Catatan*: Jika **Row 3** tidak muncul, Anda dapat mengeceknya pada **Row 1** atau **Row 2**. Pada tiap-tiap jenis template terkadang memiliki letak lokasi Row yang berbeda).

![](/files/-LeEttz7dTviG_0hITT9)

**-Row Type:** pilih **Contacts**

**-Status: ON**

3\. Kemudian klik **Contact 1,2,3,4** dst, jika belum ada maka klik **Add Contact**

![](/files/-LeEuOQ3YrOmKaZp9ZzI)

&#x20;Update pada bagian ini.

4\. Jika sudah, klik **Save.**


# Update Logo Payment

![](/files/-LdqAvorVENcvN-264Sm)

Anda dapat menambahkan logo payment di footer website, dengan cara sbb:

1. Login di wesbite admin > masuk ke menu **Journal > Dashboard > Footer > Payment >** klik **Add Payment +**

![](/files/-LdqBRbXKBgCyyrutjfW)

2\. Lalu klik **Icon** untuk mengedit gambar logo payment > **Sort Order** digunakan untuk mengisi urutan tampilan logo.

![](/files/-LdqBYGS7fZ5MHgJbIH9)

3\. Jika sudah, klik **Save.**


# Edit Copyright

Berikut langkah-langkah untuk mengubah copyright :

1. Masuk ke menu **Journal** > **Dashboard** > **Footer** > **Copyright**

![](/files/-LeALmuleMs9YcFpVhuY)

2\. Selanjutnya anda dapat merubah link copyright beserta  nama teks nya sesuai dengan kebutuhan anda.

![](/files/-LhE5MhPwRgUgiWKdZQW)

Jika sudah klik **Save** pada pojok kanan ata&#x73;**.**


# Tampilan Produk


# List Produk


# Ubah Font pada Nama Produk

![](/files/-Lr87VJC4NGziWyjb93g)

Untuk mengubah tampilan huruf pada nama-nama produk pada list produk yang tampil di halaman awal website, caranya adalah sebagai berikut:\
1\. Login di dashboard admin.\
2\. Masuk ke menu **Journal >  Dashboard > Settings >** klik **Product Grid >** klik **Product Details.**

![](/files/-LuqGb0try2XHILaY8zL)

* **Product Name Font :** Klik **Edit** untuk mengubah gaya,warna dan ukuran huruf untuk nama produk.
* **Product Name Hover :** Klik untuk mengubah tampilan warna font pada nama produk setelah diklik.
* **Price Font :** Klik **Edit** untuk mengubah tampilan huruf pada harga produk.
* **Old Price Font :** Klik **Edit** untuk mengubah tampilan huruf pada harga lama produk (harga sebelum diskon, jika mengaktifkan diskon).<br>

3\. Jika sudah, klik **Save.**


# Ubah Background pada Foto Produk

![](/files/-Lr8TzL61eaNaD-H3fhy)

Jika Anda ingin mengubah warna background pada foto produk seperti diatas, caranya adalah sebagai berikut:\
1\. Login di dashboard admin.\
2\. Masuk ke menu **Journal > Dashboard > Settings > Product Grid.**\
3\. Klik **General.**

![](/files/-Lr8aTwbLfBXP7JZpxBi)

* **Background Color:** Klik untuk mengubah warna background pada setiap foto produk.
* **Background Hover Color:** Klik untuk mengubah tampilan warna background foto produk saat diklik.
* **Foreground Text Hover Color:** Klik untuk mengubah warna text pada produk saat diklik.

4\. Klik **Save.**


# Membuat Kelompok List Produk

![](/files/-Ldwc2lKStMiLkcOn99M)

Anda bisa membuat kelompok list produk seperti tampilan diatas, yang terdiri dari New Arrivals, Most Viewed, Best Sellers, dan On Sale. Atau hal ini disebut juga dengan **Custom Section**.

Caranya membuatnya adalah sebagai berikut:

1. Login di website admin.
2. Masuk ke menu **Journal > Dashboard > Custom Section >** klik “**Edit**” pada **Home, Top(2).** Atau jika belum ada, bisa klik **Create New** (di pojok kanan atas).

![](/files/-LdwdDB_UfQgw_kCcv58)

\
3\. Klik **Add Section +**

![](/files/-Ls0qiv_6EgmvPgI22Nf)

\
4\. Isi data berikut.

![](/files/-Ls0rSWrTic5yMIpQcPJ)

* **Section Title:** Masukkan nama sectionnya, misalnya 'Best Seller'.
* **Section Type:** Pilih tipe sectionnya, apakah list produk yang mau ditampilkan diambil dari **Module, Category, Brand, Random, Custom,** dan **Link.**\
  Jika Anda memilih **Module,** maka yang tampil dibawahnya adalah **Module Type,** lalu bisa Anda pilih Module Typenya.\
  Jika Anda memilih **Category,** maka yang tampil dibawahnya adalah **Category,** lalu Anda bisa pilih categorynya, dst.
* **Status:** pilih **ON.**
* **Default Section:** pilih **ON,** jika Anda ingin menjadikan Section ini sebagai default (yang pertama kali muncul saat website dibuka).\
  \*\*Note: Jika Anda membuat default section lebih dari satu, maka Anda harus pilih salah satu untuk menyetting ON pada Default Sectionnya.
* **Item Limit:** Masukkan maksimal jumlah item yang mau dimunculkan pada halaman custom section tsb, misalnya jika produknya lebih dari 100 maka Anda bisa input maksimal item limitnya 20 atau 30, sesuai selera Anda. Yang penting tidak melebihi 50 agar akses loading websitenya tidak lemot.
* **Sort Order:** Bisa dikosongkan saja.<br>

5\. Untuk membuat section yg kedua, Anda bisa klik **Add Section +** dan mengulang langkah diatas.

6\. Selanjutnya, Anda bisa mengubah jumlah item produk per barisnya, misalnya per baris ada 4 produk atau 3 produk, bisa dilihat contoh berikut ini :

![(jumlah item per row pada desktop : 4 items)](/files/-Ls0Gz5lU4BT5suYqd7d)

![(jumlah item per row pada desktop : 3 items)](/files/-Ls0cAQd7nVTPAdAFh4S)

Untuk mengubah items per row pada website seperti contoh diatas, caranya masih di menu yang sama seperti tadi, lalu sekarang klik **General Options.**

![](/files/-Ls0oW4CW6HHVV1BcckW)

Lalu klik **Edit** pada **Items per Row.** Maka akan muncul tampilan seperti berikut.

![](/files/-Ls0oqOQyYL_BnXKhyEi)

Anda bisa mengatur sendiri jumlah item produk per barisnya, misalnya jumlah item produk per baris pada layar large desktop yaitu 5 produk, \
lalu jumlah item produk per baris pada layar desktop yaitu 3 produk,\
lalu pada layar tablet 3 produk,\
lalu pada layar large phone 2 produk,\
dan pada layar phone 2 produk.

Jika sudah, klik **OK.**<br>

4\. Selanjutnya jika sudah selesai semua, klik **Save** di pojok kanan atas.


# Update Label Produk

![](/files/-Ls1FsGWIcbc50eur6YP)

Pada produk diatas, ada label 'NEW' dan '-66%'. Anda bisa mengubah tampilannya, mulai dari ukuran,warna dan jenis huruf, sampai warna labelnya.\
Dengan cara sebagai berikut:

1. Login di dashboard admin.
2. Masuk ke menu **Journal > Dashboard > Settings > Global > Product Label.**
3. Klik **Latest Label** (label untuk produk yang terakhir diupload).

![](/files/-Ls1K_AxadmnaVBzukWx)

* **Display:** Pilih **Always** jika Anda ingin labelnya terus tampil pada produk.\
  Atau pilih **Hover** jika Anda ingin labelnya hanya terlihat saat produk diklik.\
  Atau pilih **Never** untuk menyembunyikan label tsb.
* **Text:** Masukkan teks yang ingin dimunculkan pada label.
* **Product Limit:** Masukkan batasan jumlah produk yang ingin diberi label New.
* **Font:** Klik **Edit** untuk mengubah warna, ukuran dan jenis huruf pada teks label.
* **Background Color:** Klik untuk mengubah warna background label.

4\. Selanjutnya klik **Special Label** (label untuk produk yang diberikan harga khusus).

![](/files/-Ls1MRBLFEk6I0brlEQr)

* **Display:** Pilih **Always** jika Anda ingin labelnya terus tampil pada produk.\
  Atau pilih **Hover** jika Anda ingin labelnya hanya terlihat saat produk diklik.\
  Atau pilih **Never** untuk menyembunyikan label tsb.
* **Display As:** Anda bisa memilih persentase atau Text.
* **Font:** Klik **Edit** untuk mengubah warna, ukuran dan jenis huruf pada teks label.
* **Background Color:** Klik untuk mengubah warna background label.

5\. Selanjutnya klik **Out of Stock** (label untuk produk yang sudah habis stoknya).

![](/files/-Ls1MpgvnwFHN9Cktrw4)

* **Display:** Pilih **Always** jika Anda ingin labelnya terus tampil pada produk.\
  Atau pilih **Hover** jika Anda ingin labelnya hanya terlihat saat produk diklik.\
  Atau pilih **Never** untuk menyembunyikan label tsb.
* **Style:** Anda bisa pilih **Diagonal** untuk tampilan label yang miring, atau pilih **Normal** untuk tampilan label yang lurus seperti Lates Label.
* **Ribbon Font:** Klik **Edit** untuk mengubah warna, ukuran dan jenis huruf pada teks label.
* **Background Color:** Klik untuk mengubah warna background label.
* **Disable Add to Cart Button:** Klik **ON** untuk menonaktifkan tombol add to cart pada produk yang berlabel out of stock. Atau klik **OFF** untuk sebaliknya.

6\. Jika sudah semua, klik **Save.**


# Halaman Produk/Product Page


# Mengubah Tampilan pada Halaman Produk

![](/files/-LrCAOCP8G-x3MyHAGF8)

Saat Anda membuka website maka akan muncul tampilan list produk, lalu setelah Anda mengklik salah satu produk, maka Anda akan diarahkan ke halaman detail product seperti pada gambar diatas.

![](/files/-LrCN-4EEXhPfBmaYwx-)

![](/files/-LrDAS4Vcre9G28KZqmp)

Bisa Anda lihat bahwa pada halaman ini terdiri dari Nama Produk, Merk, Kode Produk, Ketersediaan, Harga, dsb, dimana tampilan pada halaman tersebut bisa Anda ubah, dengan cara sebagai berikut :

1. Login di dashboard admin.
2. Masuk ke menu **Journal > Dashboard > Settings > Product Page.**
3. Klik **General >** klik **Page Title.**

![](/files/-Lr8e9bmb_gtq-BDObJp)

* **Page Title Position:** Pilih **Top** untuk menampilkan nama produk di paling atas (di atas foto produk), atau pilih **Right** untuk menampilkan nama produk di sebelah kiri.
* **Page Title Font:** Klik **Edit** untuk mengubah tampilan font pada nama produk.
* **Page Title Background:** Klik untuk menambahkan warna background pada nama produk.
* **Title Align:** Pilih posisi teks nama produk, Anda bisa pilih **Left** untuk rata kiri, pilih **Center** untuk rata tengah, atau pilih **Right** untuk rata kanan.<br>

4\. Scroll ke bawah lalu klik **Product Details.**

![](/files/-Lr8goW3Bgrn-VGm5QIt)

* **Font:** Klik **Edit** untuk mengubah tampilan font pada halaman produk.
* **Links:** Klik **Edit** untuk mengubah tampilan font pada teks yang berbentuk link.
* **Links Hover:** Klik untuk mengubah tampilan font pada teks yang berbentuk link, saat link tsb diklik.
* **Item Background Color:** Klik untuk menambahkan background pada teks detail produk.<br>

5\. Scroll ke bawah > klik **Products Stats.**

![](/files/-Lr8jAnf0g623_sCZOEr)

* **Brand Status :** Pilih **ON** untuk menampilkan nama brand atau merk yang sudah disetting pada produk, atau pilih **OFF** untuk menyembunyikannya.
* **Product Code Status :** Pilih **ON** untuk menampilkan kode produk yang sudah disetting pada produk, atau pilih **OFF** untuk menyembunyikannya.
* **Availability Status :** Pilih **ON** untuk menampilkan teks ketersediaan produk, atau pilih **OFF** untuk sebaliknya.
* **Product Views Status :** Pilih **ON** untuk menampilkan berapa jumlah views/jumlah yang melihat halaman produk tsb, atau pilih **OFF** untuk sebaliknya.
* **Product View Text :** Jika produk Anda dilihat 100x, maka akan tampil teks " **Views : 100 ".** Anda bisa mengubah teks 'View' di menu ini.
* **In Stock Font :** Untuk teks ketersediaan produk, Anda bisa mengubahnya di menu ini.
* **Out of Stock Font :** Untuk teks produk yang habis, Anda bisa mengubahnya di menu ini.
* **Background Color :** Untuk menambahkan warna background pada teks product stats seperti Merk, Kode produk, Poin, Jumlah ketersediaan produk, dan jumlah Views produk (Seperti contoh dibawah ini).

![](/files/-LrC4Ma_Oi5MBSiJ6Qry)

\
\
6\. Scroll kebawah lalu klik **Sold Count** dan **Brand Image.**

![](/files/-LrC2eILMkWklx71fYiF)

* **Status:** Pilih **ON** jika ingin menampilkan jumlah produk yang sudah terjual, atau pilih **OFF** untuk sebaliknya.
* **Text:** Anda bisa mengganti teks misalnya menjadi "Produk Terjual", atau jika dikosongkan maka teksnya menjadi "xx Product(s) Sold".
* **Text Font**: Untuk mengubah jenis,warna dan ukuran font pada menu teks "Product(s) Sold"**.**
* **Count Font:** Untuk mengubah jenis,warna dan ukuran font pada angka produk yang terjual.
* **Background Color:** Untuk mengubah menambahkan warna background pada teks Jumlah produk yang sudah terjual.
* **Show Brand Image:** Pilih **ON** untuk menampilkan gambar merk/brand yang sudah Anda aktifkan sebelumnya, atau pilih **OFF** untuk menyembunyikannya.<br>

7\. Selanjutnya klik **Product Price.**

![](/files/-LrC57DkCffocv9zIm7h)

* **Price Font:** Untuk mengubah warna,ukuran dan jenis huruf pada harga produk.
* **Old Price Font:** Untuk mengubah warna,ukuran dan jenis huruf pada harga lama suatu produk (harga sebelum diskon, jika mengaktifkan harga diskon).
* **Old Price Background:** Untuk menambahkan background pada harga produk sebelum diskon.
* **Old Price Border Settings:** Untuk menambahkan border pada harga produk sebelum diskon.
* **Show Ex Tax:** Pilih **ON** untuk menampilkan harga sebelum pajak, atau pilih **OFF** untuk menyembunyikannya.
* **Ex Tax Font:** Untuk mengubah warna, ukuran dan jenis huruf pada teks harga sebelum pajak (jika harga sebelum pajak diaktifkan).
* **Reward Points Font:** Untuk mengubah warna, ukuran dan jenis huruf pada teks 'Harga dalam poin reward'. (untuk membuat poin reward bisa lihat [disini](https://docs.oceanesia.com/tutorial-1/manual-book-v-1-0/setting-poin-pelanggan/setting-poin-untuk-pembelian-produk)).
* **Discount Font:** Untuk mengubah warna, ukuran, dan jenis huruf pada teks harga sebelum pajak (ex tax), harga dalam poin reward, dan harga grosir.
* **Background Color:** Untuk menambahkan warna background pada teks-teks diatas.<br>

8\. Selanjutnya scroll ke bawah, lalu klik **Add To Cart Button.**

![](/files/-LrCG1QVrWGw52Tk4rCt)

* **Button Font:** Klik **Edit** untuk mengubah warna, ukuran, dan jenis huruf pada teks di tombol 'Add to Cart'
* **Font Hover Color:** Untuk mengubah warna teks 'Add to Cart' saat diklik.
* **Background:** Untuk mengubah warna atau menambahkan gambar background pada tombol Add to Cart.
* **Background Hover:** Untuk mengubah tampilan warna atau gambar background pada tombol Add to Cart saat diklik.
* **Button Icon:** Untuk menambahkan icon pada tombol Add to Cart.
* **Icon Position:** Untuk mengatur posisi icon pada tombol Add to Cart (jika diaktifkan).<br>

9\. Selanjutnya klik **Wishlist Compare.**

![](/files/-LrCHrlI49ahB9dRBuOt)

* **Font:** Untuk mengubah warna, ukuran, dan jenis huruf pada teks Wishlist dan Compare.
* **Font Hover Color:** Untuk mengubah warna huruf saat teks Wishlist dan Compare diklik.
* **Background Color:** Untuk mengubah warna background teks Wishlist dan Compare.
* **Wishlist Icon:** Untuk menambahkan icon disamping teks Wishlist.
* **Compare Icon:** Untuk menambahkan icon disamping teks Compare.<br>

10\. Selanjutnya klik **Share Plugin (**&#x74;ombol share yang berguna untuk memudahkan customer jika ingin menshare/membagikan halaman produk kepada teman-temannya di media sosial).

![](/files/-LrCjjobfPsi4NQPB4WI)

* **Status:** Pilih **ON** jika ingin mengaktifkan tombol Share pada halaman produk, atau pilih **OFF** untuk menyembunyikannya.
* **Background Color:** Untuk menambahkan background pada plugin share.
* **Disable on Mobile:** Pilih **ON** jika ingin mengaktifkan tombol share pada tampilan mobile, atau pilih **OFF** untuk menyembunyikannya.
* **Share Buttons:** Pilih sosial media yang ingin dimunculkan pada tombol share,
* **Buttons Style:** Pilihan jenis tampilan tombol share sesuai keinginan.
* **Buttons Position:** Pilihan penempatan tombol share pada halaman produk.<br>

11\. Scroll ke bawah lagi, lalu klik **Product Tabs.**

![](/files/-LrD8znUfqW-bXvshVoQ)

* **Tabs Position:** Untuk mengatur posisi tab keterangan produk (Tab pada halaman produk yang terdiri dari tab Deskripsi, Spesifikasi, dan Ulasan).\
  Jika pilih **Image** maka akan posisi tab dan teks dibawahnya akan mengikuti foto produk, tapi jika pilih **Bottom** maka posisi tab dan teks dibawahnya tidak mengikuti foto produk.
* **Tabs Font:** Klik **Edit** untuk mengubah warna, ukuran, dan jenis huruf pada tab keterangan produk.
* **Tabs Font Hover/Active:** Untuk mengubah warna huruf pada teks tab keterangan produk ketika teks diklik.
* **Tabs Background:** Untuk mengubah warna background tab keterangan produk.
* **Tabs Background Hover/Active:** Untuk mengubah warna background tab keterangan produk ketika tab diklik.
* **Tabs Border Settings:** Untuk mengatur border/garis pinggir pada tab keterangan produk.

\
12\. Scroll ke bawah lalu klik **Tabs Content** (untuk mengubah tampilan pada tab Deskripsi produk).

![](/files/-LrDFtZwWXzFgPiwT0ZU)

* **Content Font:** Untuk mengubah warna, ukuran, dan jenis huruf pada teks di tab Deskripsi.
* **Content Links Font:** Untuk mengubah warna, ukuran, dan jenis huruf pada teks yang berbentuk link di tab Deskripsi.
* **Content Background:** Untuk menambahkan warna background pada teks deskripsi produk.

\
13\. Kemudian lanjut ke **Tabs Content Specification.**

![](/files/-LrDH9v62J5aEFmKNF1m)

&#x20;Berikut penjelasannya:

![](/files/-LrDLbcvCKohA_0xlNvS)

\
14\. Selanjutnya, klik **Tabs Content Review (**&#x55;ntuk mengubah tampilan pada tab Review/Ulasan).

![](/files/-LrDQpZfXZh9E850BiUf)

Bisa lihat penjelasannya dibawah ini :

![](/files/-LrDqK5J5jCRPcjQmh4M)

![](/files/-LrDqRdSEF0Bhs_edr5m)

\
15\. Selanjutnya, klik Tab **Product Tags.**

![](/files/-LrDrN1U4Sfn5CkWzTdj)

Penjelasannya sebagai berikut:

![](/files/-LrDsgyAsmGr1acAo-O1)

* **Title Font:** Untuk mengubah warna, ukuran, dan jenis huruf pada teks judul "Tags/penandaan".
* **Title Background:** Untuk mengubah warna background pada teks judul.
* **Tag Font:** Untuk mengubah warna, ukuran, dan jenis huruf pada tulisan tag produk.
* **Tag Background:** Untuk mengubah warna background pada teks tag.
* **Tag Font Hover:** Untuk mengubah warna teks pada tag produk ketika diklik.
* **Tag Background Hover:** Untuk mengubah warna background pada teks tag produk ketika diklik.
* **Tags Align:** Untuk mengubah posisi teks pada tag produk.

16\. Jika sudah semua, selanjutnya klik **Save**.


# Menambahkan Produk Terkait

![](/files/-Lt-4YgHqXWNGiIMR_Eh)

Anda bisa menambahkan related products (produk terkait) pada halaman produk.

Dengan cara sebagai berikut:

1. Login di dashboard admin.
2. Masuk ke menu **Katalog > Produk.**
3. Lalu klik icon pensil pada produk yang ingin ditambahkan produk terkait.

![](/files/-Lt-5vrZTZn4mDbExJZS)

\
4\. Klik tab **Tautan.**

![](/files/-Lt-6QWxsakGAeWU9b5p)

Lalu scroll ke bawah sampai ke menu **Produk-produk terkait.**

![](/files/-Lt-6jd7MJDQEhr1V6BD)

Selanjutnya, ketikkan nama produk lainnya yang berkaitan dengan produk yang sedang diedit.

5\. Jika sudah, klik icon **Simpan** di pojok kanan atas.


# Tombol Add To Cart

![](/files/-Lt-7igaoZKFTIQ_lgUg)

Jika produk habis/sold out, maka tombol Add to Cart tidak bisa diklik (seperti contoh pada gambar).\
Tapi Anda juga bisa membuat tombol tsb menjadi bisa diklik walaupun stok produknya habis, biasanya ini berguna jika Anda menyediakan produk Pre Order.&#x20;

Anda bisa mengubah pengaturannya dengan cara sebagai berikut:

1. Login di dashboard admin.
2. Masuk ke menu **Journal > Dashboard >** klik **Settings >** klik **Global >** lalu klik **Product Labels.**
3. Klik **Out of Stock.**

![](/files/-Lt-Cex3YzNKBCge19jg)

Lalu set **Status OFF** pada **'Disable Add to Cart Button'.**\
\&#xNAN;*\*\*note:* Statusnya di set **ON** jika tombol Add to Cart ingin dibuat tidak bisa diklik jika stoknya habis.

4\. Selanjutnya, klik **Save** di pojok kanan atas.


# Zoom Foto Produk

Pada halaman produk, jika kursor Anda diarahkan pada foto produk maka tampilannya akan seperti berikut ini.

Contoh tampilan sebelum kursor diarahkan ke foto produk.

![\*GAMBAR 1\*](/files/-Lt2kMC43hgpXWNSYILa)

\
Lalu ini contoh tampilan setelah kursor diarahkan ke foto produk (lokasi zoom langsung pada foto produk itu sendiri).

![\*GAMBAR 2\*](/files/-Lt2kMCA-JmzZR3GgC8t)

\
Lalu ada juga contoh tampilan foto produk yang seperti di bawah ini (lokasi zoom berada disamping kanan foto produk).

![\*GAMBAR 3\*](/files/-Lt2kMCDRJwBq80c8m3-)

\
Dan Anda juga bisa menghilangkan tampilan zoom agar ketika kursor diarahkan ke foto produk maka foto produk pun tidak akan ter-zoom.\
\
Semua akan kami rangkum tutorialnya dibawah ini: \
1\. Login di dashboard admin.\
2\. Masuk ke menu **Journal > Dashboard > Settings > Product Page >** Klik **Product Image.**

![](/files/-Lt2q2diw1djeA7QPvXu)

Disini Anda cukup mengubah pengaturan pada **Cloud Zoom dan Inner Zoom.**\
a. Jika Anda ingin mengubah tampilan seperti GAMBAR 1 diatas, maka Anda cukup set **OFF** pada **Cloud Zoom** (otomatis menu Inner Zoom akan hilang).\
b. Jika Anda ingin mengubah tampilan seperti GAMBAR 2, maka Anda bisa set **ON** pada **Cloud Zoom** dan **Inner Zoom.**\
c. Selanjutnya jika Anda ingin mengubah tampilan seperti GAMBAR 3, maka Anda bisa set **ON** pada **Cloud Zoom,** dan set **OFF** pada **Inner Zoom.**

3\. Jika sudah selesai, klik **Save.**


# Update Rekening Pembayaran

Anda dapat menambah rekening yang akan dijadikan tujuan transfer oleh customer yang memesan produk Anda di website.

Berikut ini adalah langkah-langkah untuk update rekening pembayaran:

1. Login di website admin.
2. Masuk ke menu **Ekstensi**.
3. Klik **Pembayaran**.
4. Pilih metode pembayaran yang akan digunakan.
5. Klik ikon **plus (+)** untuk menginstall, jika sudah terinstall maka klik ikon pensil untuk mengedit.

![](/files/-LdMp0i-dw8LxmXPnLI4)

6\. Misalnya Kamu memilih metode pembayaran dengan transfer bank BCA, maka klik ikon **install**, jika sudah terinstall maka tampilannya akan seperti ini.

![](/files/-LdMpad2485YRDMuJaL1)

Lalu klik ikon pensil untuk mengedit, langkah selanjutnya adalah memasukkan deskripsi.

7\. Pada menu **Perintah untuk Bank Transfer via BCA**, maka diisi dengan nomor rekening dan nama rekening yang akan menjadi tujuan transfer pembayaran customer.

![](/files/-LdMqJjqR5NyrntBKz6U)

8\. Pada menu **Total**, masukkan total checkout yang harus dicapai agar metode pembayaran transfer via BCA bisa aktif.

9\. Pada menu **Status Pemesanan**, bisa dipilih status yang akan muncul setelah customer melakukan checkout, bisa dengan **Pending**, **Processed**, atau **Menunggu Pembayaran**.

10\. Selanjutnya pada menu **Geozone**, pilih wilayah mana saja yang bisa melakukan pembayaran dengan metode transfer via BCA.

11\. Pada menu **Status**, sebaiknya pilih **Diaktifkan** agar metode pembayaran muncul di website Kamu pada saat customer checkout.

12\. Untuk menu **Sort Order**, tidak wajib diisi.

![](/files/-LdMr7OWwlH92DjyVynY)

13\. Jika sudah, selanjutnya klik ikon **Simpan** di bagian kanan atas.


# Mengaktifkan Pembayaran Paypal

Pada Oceanesia, salah satu metode pembayaran default adalah dengan menggunakan PayPal. Untuk mengaktifkannya, Anda bisa mengikuti langkah berikut:

1. Login di website admin > masuk ke menu **Ekstensi > Pembayaran >** scroll ke bawah, cari PayPal. Maka akan ada banyak metode pembayaran dengan PayPal seperti dibawah ini.

![](/files/-LeFxiB4Sr6uxGHF8cC_)

Pilih yang **PayPal Payments Standard,** jika belum diinstall maka diinstall terlebih dahulu dengan mengklik tombol **install (+)** seperti  pada gambar diatas.

2\. Jika sudah diinstall, klik ikon pensil seperti gambar dibawah.

![](/files/-LeFygpEoQoQMVNOjnVP)

3\. Maka akan tampil seperti berikut.

![](/files/-LeG-WUPyyYASBhMTXWD)

Pada tab **General,** ikuti petunjuk pengisian seperti berikut:

**a. E-mail:** isi dengan email akun PayPal Anda (\*\**note: Anda harus sudah memiliki akun PayPal yang telah aktif).*

b. **Sandbox Mode:** Pilih **Tidak.**

**c. Debug Mode:** Pilih **Dinonaktifkan.**

**d. Transaction Method:** pilih **Sale.**

e. **Jumlah**: Maksudnya adalah minimal pembelanjaan agar customer bisa melakukan pembayaran dengan PayPal.

f. **Urutan**: Dikosongkan.

g. **Geo Zone:** pilih **Semua Wilayah.**

h. **Status:** pilih **Diaktifkan.**

Selanjutnya pada tab **Order Status,** pengisiannya ikuti petunjuk dibawah. (Ini hanya untuk tampilan status pesanan saja.)

![](/files/-LeG0XGHSwpQNJ8RpZ_p)

4\. Jika sudah semua, klik **Simpan.**

5\. Selanjutnya, masuk ke menu **Sistem > Lokalisasi > Mata Uang >** Jika mata uang yang ada hanya Rupiah saja, maka Anda harus menambahkan mata uang USD. (**\*\*PERLU DIKETAHUI:** *Untuk menggunakan metode pembayaran PayPal, Anda harus menambahkan mata uang USD juga).*

Klik ikon + (**Add New)** untuk menambahkan mata uang.

![](/files/-LeGCLNhWodGzPO_TKDU)

6\. Lalu ikuti petunjuk pengisisannya seperti dibawah ini.

![](/files/-LeGCvpymnvlIS-4cQrd)

\*\*Untuk kolom **Nilai,** pengisiannya menyesuaikan dengan mata uang default. Jadi, $ 0.00007400 sama dengan 1 Rupiah.

Jika ingin otomatis terupdate, bisa dari yahoo finance agar mata uangnya bisa otomatis update menyesuaikan mata uang default.

7\. Jika sudah, klik ikon **Simpan.**


# Cara Upload Produk (Video)

Berikut ini adalah penjelasan bagaimana langkah-langkah mengupload produk pada website

![](/files/-LdgLM_kq7AWIp_18FAf)

Silahkan cek pada link video youtube berikut ini.

<https://www.youtube.com/watch?v=qGcBDxxTwX4>

{% file src="/files/-LdgJNH2Q7PRHGnXDqh3" %}

**Sebelum mengupload produk, Anda harus memperhatikan hal-hal berikut ini:**

1. *Nama file produk tidak boleh mengandung special character atau symbol seperti !@#$%^&\*({\[\\|;}'",<.>/}]? dan spasi. Jadi yang boleh digunakan hanya huruf, angka, strip dan underscore.* Perhatikan contoh nama file foto yang benar berikut ini:\
   gamis-wolfis\
   gamis\_wolfis\
   gamiswolfis\
   gamiswolfis1

![](/files/-Lm2jU4yOquJBwVOj9CT)

Jadi sebelum diupload, nama file fotonya bisa Anda rename terlebih dahulu.

2\. *Ukuran file foto produk tidak lebih dari 500kB, dan dimensi file foto produk tidak lebih dari 800 x 800 pixels.* \
(Jika foto yang Anda punya melebihi ukuran tsb, Anda bisa meresize dahulu fotonya di picresize.com atau befunky.com).

3\. *Nama folder yang akan dibuat juga tidak boleh mengandung special character atau symbol seperti !@#$%^&\*({\[\\|;}'",<.>/}]? dan spasi. Jadi yang boleh digunakan hanya huruf, angka, strip dan underscore. (Sama seperti nama file produk).*\
Contohnya sebagai berikut:

![](/files/-Lm2k9x12f3OGaIgdlHN)


# Cara Upload Produk (Teks)

Untuk mengupload produk, Anda bisa ikuti tutorial berikut:

1. Masuk ke menu **Katalog > Produk**
2. Klik **Add New** (di pojok kanan atas).
3. Lalu klik tab **General,** maka akan muncul tampilan berikut.

![](/files/-LqEwwJeAf0664i-tLni)

* **Nama Produk:** Tulis nama produk.
* **Deskripsi:** Tulis deskripsi produk.
* **Judul Tag Meta:** Bisa disamakan dengan nama produk.
* **Deskripsi Tag Meta:** Bisa disamakan dengan deskripsi produk (tidak wajib diisi).
* **Kata Kunci Tag Meta:** Kata kunci dari produk tsb (tidak wajib diisi).

4\. Selanjutnya kllik tab **Data,** maka akan muncul tampilan berikut. Silahkan ikuti petunjuk pengisiannya dibawah.

![](/files/-LqExzvztiBMyl-craWb)

* **Gambar**: Silahkan upload gambar produk disini.
* **Model**: Bisa diisi dengan model produk tsb.
* **SKU, UPC, EAN, JAN, ISBN, MPN:** Bisa dikosongkan saja.

![](/files/-LqFDvF66FF16PqkXOD_)

* **LOKASI:** Anda bisa memasukkan lokasi asal pengiriman, atau bisa dikosongkan juga.
* **Harga:** Ketikkan harga produk.
* **Kelas Pajak:** Bisa pilih 'Tidak Ada'.
* **Jumlah:** Masukkan jumlah stok produk yang tersedia.
* **Jumlah Minimum:** Jumlah minimum yg produk tsb bisa dibeli oleh customer.
* **Uraian Stok:** Jika pilih Ya, maka customer bisa melihat jumlah stok produk tsb, dan sebaliknya.
* **Habis Stok:** Label yg akan muncul pada foto produk jika stok produk tsb habis.
* **Syarat Pengiriman:** Pilih Ya.
* **Kata Kunci SEO:** Kata kunci yang kana mempengaruhi SEO di mesin pencarian google, petunjuk pengisiannya adalah dengan mengisi kata kunci yang berhubungan dengan produk tsb, teksnya tidak boleh menggunakan huruf kapital,spasi dan specikkal character, untuk tanda spasi bisa diganti dengan strip.
* **Tanggal Tersedia:** Masukkan tanggal tersedianya produk tsb, jika disetting dengan tanggal yang akan datang maka produk tsb tidak akan muncul pada website.
* **Dimensi (P x L x T):** Tidak perlu diisi jika produk bukan merupakan benda yang memiliki panjang, lebar dan tinggi.
* **Satuan Panjang:** Diabaikan saja.
* **Berat:** Isi berat produk. Berat produk akan mempengaruhi harga ongkos kirim pada saat customer melakukan checkout.
* **Satuan Berat:** Satuan berat bisa menggunakan kilogram ataupun gram, yang penting disesuaikan pengisiannya dengan kolom **Berat.**
* **Status:** Ubah menjadi **Diaktifkan** jika produk tsb ingin dimunculkan pada website.
* **Urutan:** Bisa diabaikan saja.

5\. Selanjutnya klik tab **Tautan.**

![](/files/-LqFEtSQjlJE9_gpUoD8)

* **Produsen**: Bisa dikosongkan saja.
* **Kategori**: Bisa diisi dengan nama kategori yang sudah dibuat sebelumnya (Agar produk bisa terlink ke kategori, gunanya jika customer membuka website dan mengklik kategori tertentu, maka akan muncul produk tertentu yg sudah dimasukkan ke dalam kategori).\
  \*\**Note:* Untuk tutorial cara membuat kategori bisa lihat di link [berikut](https://docs.oceanesia.com/tutorial-1/manual-book-v-1-0/menentukan-kategori-produk).
* **Filter:** Bisa dikosongkan saja.
* **Toko:** Bisa diabaikan saja.
* **Unduhan:** Dikosongkan saja.
* **Produk-produk Terkait:** Masukkan nama-nama produk yang berhubungan dengan produk tsb (nama produk yang sudah diupload) agar saat di halaman produk, customer bisa melihat juga produk-produk yang berkaitan.

6\. *Hanya 3 (tiga) tab di atas yang wajib diisi. Tab selain itu bisa diisi sesuai dengan kebutuhan.*\
Jika sudah semua, selanjutnya klik **Simpan** pada pojok kanan atas.

**\*\*\*Sebelum mengupload produk, Anda harus memperhatikan hal-hal berikut ini:**

1. *Nama file produk tidak boleh mengandung special character atau symbol seperti !@#$%^&\*({\[\\|;}'",<.>/}]? dan spasi. Jadi yang boleh digunakan hanya huruf, angka, strip dan underscore.* Perhatikan contoh nama file foto yang benar berikut ini:\
   gamis-wolfis\
   gamis\_wolfis\
   gamiswolfis\
   gamiswolfis1

![](/files/-Lm2jU4yOquJBwVOj9CT)

Jadi sebelum diupload, nama file fotonya bisa Anda rename terlebih dahulu.\
\
\
2\. *Ukuran file foto produk tidak lebih dari 500kB, dan dimensi file foto produk tidak lebih dari 800 x 800 pixels.* \
(Jika foto yang Anda punya melebihi ukuran tsb, Anda bisa meresize dahulu fotonya di picresize.com atau befunky.com).\
\
\
3\. *Nama folder yang akan dibuat juga tidak boleh mengandung special character atau symbol seperti !@#$%^&\*({\[\\|;}'",<.>/}]? dan spasi. Jadi yang boleh digunakan hanya huruf, angka, strip dan underscore. (Sama seperti nama file produk).*\
Contohnya sebagai berikut:

![](/files/-Lm2k9x12f3OGaIgdlHN)


# Fitur Opsi Pada Produk

**Opsi** adalah fitur untuk membuat pilihan pada saat Customer akan memilih produk untuk dimasukan ke Keranjang belanja. Seperti menentukan Size/ukuran, Warna, Varian, dll, seperti contoh berikut ini:

![](/files/-LeKJRMtfYuSHgIpLcoK)

Untuk membuat **Opsi,** Anda dapat mengikuti langkah berikut:

1\. Masuk ke menu **Katalog > Opsi.**

Maka akan tampil beberapa contoh Opsi seperti pada gambar dibawah ini.&#x20;

![](/files/-LeKKdl1u3lqfQOTkw6w)

2\. Klik tombol **Add New** untuk menambah/membuat Opsi baru.

3\. Selanjutnya isi keterangan pada Kolom berikut sesuai kebutuhan Anda.&#x20;

![](/files/-LeKQy82saPMtNgH44bp)

* **Nama pilihan**: Isi nama judul pilihan opsi Anda misalnya, Warna, Ukuran, Varian.&#x20;
* **Tipe**: Untuk tipe, Anda dapat memilih Radio / Pilihan agar seleksi produk Anda lebih mudah saat Customer melakukan Pemilihan produk. Atau Anda juga dapat memilih tipe yang lain yang dapat Anda sesuaikan dengan kebutuhan Anda.&#x20;
* **Urutan**: Untuk pengaturan urutan tampilan, jika pada satu page produk jika Anda memiliki banyak Opsi, isikan dengan Angka misalnya 1 atau 2 atau 3 dst
* **Nama Nilai Opsi**:Untuk menambahkan untuk jenis-jenis opsi pilihan pada produk Anda.&#x20;

4\. Setelah selesai, klik **Simpan.**

**Selanjutnya,** Fitur **Opsi** ini akan Anda gunakan pada saat mengisi detil produk yang Anda upload. Anda bisa ikuti cara berikut:

1. Akses menu **Katalog > Produk >** lalu pilih produk yg ingin diedit atau klik **Add New** untuk menambahkan produk baru > Kemudian klik Tab **Opsi**.&#x20;

![](/files/-LeKXF-E_oeDcVpEqaeK)

Tab **Opsi** ini digunakan untuk informasi stock produk Anda pada Warna, Ukuran, model dan tipe yang berbeda tersebut. Pada Gambar diatas, untuk pilihan **Opsi** ukuran L memiliki Stock produk 5, dan Ukuran M juga 5, maka jumlah total stock produk untuk satu jenis produk tersebut adalah 10pcs.&#x20;

Sehingga saat Anda input jumlah pada tab **Data**, Anda harus merubahnya menjadi 10. Karena keseluran Total produk adalah 10pcs (sudah termasuk Opsi Ukuran yang berbeda). Seperti gambar dibawah ini.

![](/files/-LeKYNvYhKzRdKZU2QDV)

2\. Jika sudah, klik ikon **Simpan** di pojok kanan atas.


# Fitur Atribut (Spesifikasi Produk)

Fitur **Atribut** dapat diartikan sebagai fitur untuk menerangkan rincian dan spesifikasi pada suatu produk. Misalnya jika Anda menjual pakaian, maka pakaian tersebut memiliki spesifikasi seperti ukuran, bahan material, model.&#x20;

**Atribut** memiliki dua komponen yaitu **Atribut (**&#x62;agian – bagian rinci dari spesifikasi produk) dan **Grup Atribut** (1 kelompok dari berbagai Atribut yang masih dalam satu jenis yang dibuat menjadi Grup)**.**&#x20;

![](/files/-LeLErE0TPL22DxZkr57)

Pada gambar diata&#x73;**,** kata "DESKRIPS&#x49;**"** adalah Grup Atribut, sedangkan kata "Material Utama", "Model", "Negara Produksi" pada kotak diatas dinamakan Atribut.

Untuk membuatnya Anda dapat mengikuti petunjuk berikut:

1. Pertama membuat Grup Atribut dengan cara masuk ke menu **Katalog > Atribut > Grup Atribut.**
2. Klik ikon **+ (Add New).**
3. Lalu isi kolom berikut.

![](/files/-LeLHoYmIP3--OMqDQV1)

4\. Jika sudah, klik ikon **Simpan.**

5\. Selanjutnya, untuk membuat Atribut, masuk ke menu **Katalog > Atribut > Atribut >** isi kolom dibawah.

![](/files/-LoOGZwqxWTB9jxDsg1S)

**a. Nama Atribut:** Nama Atribut yang akan tampil, misalnya "Material Utama".

**b.  Grup Atribut:** pilih Grup Atribut yang sudah dibuat, misalnya seperti tadi yaitu 'Spesifikasi'.

**c. Urutan:** untuk menentukan urutan Atribut tsb, misalnya Atribut 'Material Utama' mau tampil di baris ke berapa.

6\. Jika sudah, klik ikon **Simpan.**

7\. Selanjutnya Anda masuk ke produk yang akan ditambahkan atributnya, yaitu masuk ke menu **Katalog > Kategori >** Lalu klik icon pensil (Ubah) pada produk.

8\. Klik tab **Atribut >** klik icon **+ (Tambah) >** masukkan nama atribut yang sudah dibuat tadi di Kolom **Atribut,** lalu masukkan rinciannya di kolom **Teks,** seperti contoh dibawah ini.

![](/files/-LoOHYk0eh1pWhxiGYcA)

Jika ingin menambah atribut lagi, maka Anda harus buat dulu atributnya di menu **Katalog > Atribut > Atribut (**&#x70;ada langkah no. 5).

9\. Jika sudah semua, klik icon **Simpan.**


# Setting Harga Discount dan Khusus

Anda dapat mensetting harga produk yang mendapatkan potongan harga/discount, baik dalam pembelian produk secara grosir maupun eceran. Terdapat 2 harga yang bisa diatur, yaitu harga **Discount** dan harga **Khusus**.

1. **SETTING HARGA DISCOUNT**

**Harga Discount,** Yaitu jika pelanggan membeli produk dengan minimal tertentu, maka mereka akan mendapatkan potongan harga (bisa disebut dengan harga grosir).

&#x20;Bisa dilihat contoh dibawah ini:

![](/files/-LdrMpbAfPCfjItG71mo)

**\*Keterangan:**

**Rp 889.000** adalah harga asli (jika hanya membeli 1 pcs).

**"3 atau lebih Rp 250.000"** maksudnya adalah jika pelanggan membeli produk minimal 3 pcs, maka harga produk per pcs adalah Rp 250.000.

Berikut ini cara mensetting harga discount:

1\) Login di website admin > Masuk ke menu **Katalog** > klik menu **Produk** > lalu klik ikon pensil untuk mengedit.

![](/files/-LdN_kqy4Q2cx9RRJrhd)

2\. Selanjutnya pilih **Discount**, maka akan tampil seperti ini.

![](/files/-LdNa5_qiPgoZ74ZMvjR)

3\. Pilih **Grup Pelanggan** yang akan mendapat harga discount, apakah pelanggan Default (pelanggan biasa/bukan member) atau pelanggan Member yang akan mendapatkan discount. &#x20;

![](/files/-LdNbINa4Id0gbqUXRWO)

**\******Catatan***: Pastikan Anda telah membuat grup Pelanggan sebelumnya, cara membuat grup pelanggan bisa lihat [disini](https://docs.oceanesia.com/fitur/grup-member-reseller-system).

4\. Selanjutnya, pada menu "**Jumlah**", masukkan jumlah minimal pembelian produk (misalnya Anda input Jumlahnya 3, maka customer akan mendapat harga discount jika mereka telah membeli produk sebanyak 3 pcs). &#x20;

![](/files/-LdNcyqf7W3ULe56NofJ)

5\. Selanjutnya pada menu "**Harga**", Anda bisa menginput harga yang akan didapatkan customer (jika customer tersebut termasuk ke dalam grup pelanggan yang telah dipilih, dan telah membeli produk sebanyak minimal yang telah Anda tentukan).

6\. Lalu Anda bisa mensetting kapan harga discount tersebut akan berlaku. "**Tanggal Mulai**" diisi dengan tanggal harga discount tersebut mulai berlaku, sedangkan "**Tanggal Akhir**" diisi dengan tanggal berakhirnya harga discount tersebut. &#x20;

![](/files/-LdNgYNZsN9Z7PB2HIvt)

\***Catatan**: Jika Anda tidak mensetting "*Tanggal Mulai"* dan "*Tanggal Akhir"* , maka harga discount tersebut akan berlaku selamanya (tanpa batasan periode).

7\. Jika sudah, maka simpan perubahan dengan mengklik&#x20;

**2. HARGA KHUSUS**

Harga khusus, yaitu jika pelanggan membeli suatu produk maka pelanggan akan mendapatkan potongan harga tanpa minimal pembelian (bisa disebut harga eceran).

Bisa dilihat contoh dibawah ini:

![](/files/-LdrOwX4KyI2ztnnp_Bp)

**\*Keterangan:** Harga asli produk tsb adalah Rp 689.000 (harga coret), tetapi karena fitur harga **Khusus** telah diaktifkan, maka harganya menjadi Rp 450.000

Berikut ini adalah cara setting harga **Khusus:**

1. Login di website admin > Masuk ke menu **Katalog** > klik menu **Produk** > lalu klik ikon pensil untuk mengedit.

![](/files/-LdN_kqy4Q2cx9RRJrhd)

2\. Selanjutnya pilih **Khusus**, maka akan tampil seperti ini.  &#x20;

![](/files/-LdNmzpD4eyyadm-YEwp)

3\. Pilih **Grup Pelanggan.**

4\. Lalu, tentukan **Harga** (Harga yang diinput adalah harga potongan yang akan muncul di produk, sedangkan harga aslinya akan tercoret).

5\. Kemudian, tentukan periode potongan harga di menu **Tanggal Mulai** dan **Tanggal Akhir** (jika tidak ingin ada periode potongan harga, maka tidak perlu diisi tanggalnya).

Jika *Tanggal Mulai* dan *Tanggal Akhir* diaktifkan, maka tampilan produk akan seperti ini:

![](/files/-LeQWKcJOsK9mpPaUlWZ)

Keterangan: Promo harga khusus (harga coret) akan berakhir 47 hari lagi. Contoh diatas adalah harga khusus (harga coret) karena customer bisa mendapatkan potongan harga walaupun membeli 1 pcs saja.

6\. Jika sudah, klik ikon "**Save**".


# Menentukan Kategori Produk

Sebelum melakukan upload produk Anda diharuskan membuat kategori terlebih dahulu, kategori ini akan digunakan untuk menentukan kategori dalam produk, sehingga pada saat upload produk,Anda tidak mengalami kesulitan dalam pengelompokan kategori.&#x20;

Kategori terdiri dari Induk kategori dan Anak kategori (submenu). Contohnya seperti bentuk menu dropdown yang memanjang kebawah atau kesamping.&#x20;

Untuk membuat Katalog, akses ke menu **Katalog > Kategori.**

Berikut adalah beberapa contoh kategori yang telah dibuat.

![](/files/-LeF8KtduP9zTI0OyzLg)

* Gambar No.1: **Fashion Pria,** pada kategori bagian ini dinamakan Induk Kategori Utama.&#x20;
* Gambar No.2: **Fashion Pria > Baju Atasan,** *Baju Atasan* dinamakan anak kategori atau biasa disebut Submenu. (Simbol ‘ > ’ mengartikan submenu Baju Atasan berada di bawah Induk kategori di atasnya. Sehingga Induk Kategori Baju Atasan adalah Fashion Pria).&#x20;

Begitu juga untuk di bawahnya **Fashion Pria > Baju Atasan > Kaos,** *Kaos* dinamakan juga dengan Submenu. Sehingga induk kategori *Kaos* adalah *Fashion Pria > Baju Atasan*. (\*\**Catatan:* Untuk induk kategori kaos tsb dapat dinamakan Induk Kategori Submenu).

Demikian seterusnya ketika menambah 1 dropdown **Submenu** baru lagi dibawahnya, otomatis **Submenu** di atasnya akan menjadi induk kategori produk di bawahnya.&#x20;

* Gambar No.3: Untuk menambah **Induk Kategori** atau **Submenu,** silahkan klik tombol **Add New**.

Setelah Anda klik Add New, maka akan tampil page seperti gambar dibawah. Page tersebut dapat digunakan untuk membuat **Induk Kategori Utama, Induk kategori** atau **Submenu.**

![](/files/-LeFAL6TGruH0q6NIlU6)

a. Pada Tab **General,** terdapat beberapa kolom, penjelasannya sbb:

* **Nama Kategori** : Isi dengan nama Kategori Anda.&#x20;
* **Deskripsi** : Keterangan pada deskripsi yang akan mendeskripsikan kategori pada page katogori, Deskripsi tersebut akan dilihat oleh Customer pada halaman depan website.
* Judul Tag Meta : Judul meta tag.&#x20;
* Deskripsi Tag Meta : Ringkasan kategori yang dibuat untuk mendiskripsikan page kategori Ke Search Engine.&#x20;

b. Pada Tab **Data,** terdapat beberapa kolom, penjelasannya sbb:

* **Induk** : Biarkan kolom tersebut menjadi kosong (jika Anda ingin membuat Ketegori yang sedang dibuat menjadi *induk kategori kategori utama*), atau silahkan pilih **Induk kategori** yang telah dibuat sebelumnya yaitu jika ingin kategori yang sedang dibuat dihubungkan dengan induk kategori di atasnya.

*\*\*Catatan dan Tips* : Pada kolom tersebut, induk kategori dan submenu akan muncul dengan auto complete, sehingga untuk memunculkan induk kategori/ submenu yang Anda buat sebelumnya dengan cara mengetikan nama kategori yang akan Anda pilih. Contoh untuk memunculkan **Fashion Pria > Baju Atasan > Kaos**, maka cukup ketik “kaos” pada kolom tersebut. Dengan otomatis pilihan kategori tersebut akan muncul.

* **Filter** : Kata kunci filter yang Anda gunakan untuk pencarian produk atau kategori di dalam admin.&#x20;
* **Toko** : Pada kolom toko beri centang untuk standar.&#x20;
* **Kata Kunci SEO** : tuliskan kata kunci SEO Anda, jangan menggunakan spasi atau tanda numerik lainnya, untuk menggabungkan antar kata, Anda cukup mengetikan tanda strip di antara tiap kata. Contoh: sepatu-adidas-putih&#x20;
* **Gambar**: upload gambar yang akan Anda gunakan untuk mewakili gambar kategori yang sedang Anda buat.
* **Atas**: Jika yang sedang Anda buat untuk Induk kategori, maka beri centang pada kolom Atas. Agar menu tersebut tampil pada Main Menu website yaitu menu utama pada halaman pertama website.&#x20;
* **Kolom**: Adalah jumlah berapa maksimal Submenu kategori yang dapat menempel pada Induk kategori yang sedang Anda buat.&#x20;
* **Urutan**: Untuk memberi pengurutan nomor pada Induk Kategori atau Subkategori agar urutan tiap menu sesuai dengan yang Anda inginkan.
* **Status**: Pilih Diaktifkan jika Anda ingin mengaktifkan atau menampilkan ke halaman depan website untuk kategori yang sedang Anda buat.

Jika sudah semua, klik ikon **Simpan.**


# Menampilkan Produk Terkait (Related Products)

Produk terkait (related products) adalah produk yang saling berhubungan atau produk sejenis, misalnya Anda memilih produk A maka nanti akan muncul juga produk yang berhubungan dengan produk A tersebut di bagian bawahnya. Contohnya seperti di bawah ini:

![](/files/-LekFqBmGvHJDvt9TGMm)

Untuk menampilkannya, Anda bisa ikuti langkah berikut:

1. Masuk ke menu **Katalog > Produk >** pilih produk, misalnya Bibendum Nulla, lalu klik ikon pensil untuk mengedit.

![](/files/-LekGVBRaFYxLen6l6Gf)

2\. Klik tab **Tautan.**

![](/files/-LekGjwpTGFPUf0UFcXG)

3\. Lalu scroll ke bawah sampai ke kolom "**Produk-produk terkait",** kemudian diketikkan nama-nama produk yang berhubungan dengan produk Bibendum Nulla tsb, contohnya seperti di bawah ini.

![](/files/-LekFhGU1glDxQ1Ra3NO)

4\. Jika sudah, klik ikon **Simpan.**

5\. Setelah itu, masuk ke menu **Journal > Dashboard > Carousel >** Lalu klik pada **Product, Related/Con Btm (1) >** lalu set **Status** menjadi **ON.**&#x20;

![](/files/-LekKS8MsNb-cyq6y8en)

&#x36;**.** Selanjutnya klik **Edit** pada **Product,Related/Con Btm (1)**

![](/files/-LekHaezNlZk54OKCRHs)

\***Catatan:** Nama kolom di setiap template selalu berbeda, pastikan Anda mengklik **Edit** pada kolom yang ada tulisan **'related'** nya.

7\. Klik **Related Products,** lalu ikuti pengisiannya seperti di bawah.

![](/files/-LekJuXyOn3tHdoJl1JW)

\***Catatan:** Untuk Item limit, bisa diisi bebas (tidak harus 10).

7\. Jika sudah, klik **Save.**


# Cara Menyembunyikan Harga Produk

Anda bisa menyembunyikan harga produk pada website Anda. Jadi jika ada user yang berkunjung ke website Anda maka user tersebut tidak bisa melihat harga produk yang Anda jual. Untuk melihat harga produk di website Anda maka mereka harus login akun terlebih dahulu di website Anda.

Untuk menggunakan fitur tersebut, caranya adalah sebagai berikut:&#x20;

1. Login di dashboard admin.
2. Masuk ke menu **Sistem > Pengaturan >** klik **Edit** pada **Nama Toko**

![](/files/-LivEmoKMc8KIjHY4Nog)

3\. Klik tab **Opsi.**

![](/files/-LivEwQHd95d52zIqQMT)

4\. Scroll ke bawah sampai pada menu **Akun >** lalu klik **Ya** pada pilihan **Login Display Prices.**

![](/files/-LivdbLIF8lu44e5ep6Y)

5\. Jika sudah, klik icon **Simpan**.


# Cara Menyembunyikan Tampilan Jumlah Produk Yang Tersedia dan Terjual

![](/files/-LpSNdDrf_7x-FkgJRUR)

Pada halaman produk (product page), akan ada tampilan hitungan jumlah produk yang tersedia dan produk yang terjual seperti gambar diatas.

Anda bisa menghilangkan tampilan tsb, dengan cara sebagai berikut:

**A. Cara Menghilangkan Hitungan Jumlah Produk yang Tersedia.**

1. Masuk ke menu **Sistem > Pengaturan >** klik icon pensil (**Ubah)** > klik tab **Opsi.**
2. Scroll ke bawah sampai ke menu **Stok.**
3. Pada pilihan **Display Stock,** pilih **Tidak.**
4. Jika sudah, klik **Simpan.**

**B. Cara Menghilangkan Hitungan Jumlah Produk yang Terjual**

1. Masuk ke menu **Journal > Dashboard > Settings > Product Page >  Product Details >** klik **Products Stats.**
2. Klik **Sold Count.**
3. Set **Status** menjadi **OFF.**
4. Klik **Save.**

Maka hasilnya akan seperti berikut ini.

![](/files/-LpSPiIjFmeHijj8xvGH)


# Update Label "Out of Stock" atau "Sold Out" Pada Produk

![](/files/-LdvtK9gr9ppJIOPEqvc)

Anda bisa mengupdate label "Out of Stock" atau "Sold Out", atau keterangan lain jika stok produknya sudah habis, dengan cara berikut:

1. Login di website admin > Klik **Katalog > Produk >** Klik **Data.**
2. Scroll ke bawah, pada menu **Jumlah,** isi angka 0 (nol) jika produk sudah habis.

![](/files/-LdvsAsWBOFSD_mCzwuI)

3\. Lalu klik menu **Habis Stok,** maka akan tampil seperti dibawah.

![](/files/-LdvrfAw29fHfZWd75pZ)

Anda bisa memilih keterangan yang mana yang akan muncul di foto produk,jika produk tsb sedang habis stoknya.

4\. Jika sudah, klik ikon **Simpan** di pojok kanan atas.

Maka pada saat pelanggan Checkout, akan muncul pemberitahuan seperti dibawah ini.&#x20;

![](/files/-LdvubrBqKSJA2Vkvxpo)




---

[Next Page](/llms-full.txt/1)

