> For the complete documentation index, see [llms.txt](https://docs.oceanesia.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.oceanesia.com/tutorial-1/manual-book-v-1-0/tampilan-website/tampilan-produk/halaman-produk-product-page/mengubah-tampilan-pada-halaman-produk.md). # 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.
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.
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.
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.
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).
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.
10\. Selanjutnya klik **Share Plugin (**tombol 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.
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) Berikut penjelasannya: ![](/files/-LrDLbcvCKohA_0xlNvS) \ 14\. Selanjutnya, klik **Tabs Content Review (**Untuk 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**.