> 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

![](https://468408990-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVM9qa13Pa-5BtdEH57%2F-LrC9uBp8TS2JXXsnOzs%2F-LrCAOCP8G-x3MyHAGF8%2Fimage.png?alt=media\&token=7690912f-bee4-4fd4-8491-5fb87ec6cea0)

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.

![](https://468408990-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVM9qa13Pa-5BtdEH57%2F-LrCMxY18bBQKR9SXMEK%2F-LrCN-4EEXhPfBmaYwx-%2Fimage.png?alt=media\&token=e801eb58-3b06-4829-95be-e5d1550fda5c)

![](https://468408990-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVM9qa13Pa-5BtdEH57%2F-LrD8pWFtjgJ7SrvOs7t%2F-LrDAS4Vcre9G28KZqmp%2Fimage.png?alt=media\&token=e01de5bd-4cfe-4072-a4b1-a1733586b748)

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.**

![](https://468408990-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVM9qa13Pa-5BtdEH57%2F-Lr8buFa4sqtjqH3EoNM%2F-Lr8e9bmb_gtq-BDObJp%2Fimage.png?alt=media\&token=c1cfffe6-0aee-4c9d-b2cb-beea7602e4a7)

* **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.**

![](https://468408990-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVM9qa13Pa-5BtdEH57%2F-Lr8buFa4sqtjqH3EoNM%2F-Lr8goW3Bgrn-VGm5QIt%2Fimage.png?alt=media\&token=f1619b39-3f2f-4dec-895d-56cacb241126)

* **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.**

![](https://468408990-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVM9qa13Pa-5BtdEH57%2F-Lr8buFa4sqtjqH3EoNM%2F-Lr8jAnf0g623_sCZOEr%2Fimage.png?alt=media\&token=89eaf08b-9731-411b-b8fe-8a8660970cfc)

* **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).

![](https://468408990-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVM9qa13Pa-5BtdEH57%2F-LrC0tKu5j1bIggDHDr6%2F-LrC4Ma_Oi5MBSiJ6Qry%2Fimage.png?alt=media\&token=8856cf73-d894-417e-be20-0bcbcf298799)

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

![](https://468408990-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVM9qa13Pa-5BtdEH57%2F-LrC0tKu5j1bIggDHDr6%2F-LrC2eILMkWklx71fYiF%2Fimage.png?alt=media\&token=bd855626-abb8-426c-a640-7a641e0c809e)

* **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.**

![](https://468408990-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVM9qa13Pa-5BtdEH57%2F-LrC0tKu5j1bIggDHDr6%2F-LrC57DkCffocv9zIm7h%2Fimage.png?alt=media\&token=181c3e0c-31d8-42a3-96ef-c8d92e691509)

* **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.**

![](https://468408990-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVM9qa13Pa-5BtdEH57%2F-LrC9uBp8TS2JXXsnOzs%2F-LrCG1QVrWGw52Tk4rCt%2Fimage.png?alt=media\&token=f5087caa-af08-4c91-8d40-319cd8b7f7e2)

* **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.**

![](https://468408990-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVM9qa13Pa-5BtdEH57%2F-LrC9uBp8TS2JXXsnOzs%2F-LrCHrlI49ahB9dRBuOt%2Fimage.png?alt=media\&token=f6dcb787-72bd-4d98-8379-57c119be7d9e)

* **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).

![](https://468408990-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVM9qa13Pa-5BtdEH57%2F-LrCdSUNnxwwTj4otH69%2F-LrCjjobfPsi4NQPB4WI%2Fimage.png?alt=media\&token=f48e2885-db11-4502-ad81-3f02ccb2c8d7)

* **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.**

![](https://468408990-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVM9qa13Pa-5BtdEH57%2F-LrD8pWFtjgJ7SrvOs7t%2F-LrD8znUfqW-bXvshVoQ%2Fimage.png?alt=media\&token=1d86fda6-01cc-4ea2-964b-7bdc9b8e07e7)

* **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).

![](https://468408990-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVM9qa13Pa-5BtdEH57%2F-LrD8pWFtjgJ7SrvOs7t%2F-LrDFtZwWXzFgPiwT0ZU%2Fimage.png?alt=media\&token=97a66cc0-7c09-4c5a-ab72-ba37b305ef76)

* **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.**

![](https://468408990-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVM9qa13Pa-5BtdEH57%2F-LrD8pWFtjgJ7SrvOs7t%2F-LrDH9v62J5aEFmKNF1m%2Fimage.png?alt=media\&token=592df658-3e3b-44e7-ae0c-3787004a7567)

&#x20;Berikut penjelasannya:

![](https://468408990-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVM9qa13Pa-5BtdEH57%2F-LrD8pWFtjgJ7SrvOs7t%2F-LrDLbcvCKohA_0xlNvS%2FScreenshot_87.png?alt=media\&token=21168eec-9229-402a-89d5-f5ae30fb06c5)

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

![](https://468408990-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVM9qa13Pa-5BtdEH57%2F-LrDQllG35Wz_1GtkS0N%2F-LrDQpZfXZh9E850BiUf%2Fimage.png?alt=media\&token=6d87ee47-8630-4746-92da-a96718a85aed)

Bisa lihat penjelasannya dibawah ini :

![](https://468408990-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVM9qa13Pa-5BtdEH57%2F-LrDQllG35Wz_1GtkS0N%2F-LrDqK5J5jCRPcjQmh4M%2FScreenshot_88.png?alt=media\&token=9a256b0e-d0ff-4ac5-8c81-6b4146600c51)

![](https://468408990-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVM9qa13Pa-5BtdEH57%2F-LrDQllG35Wz_1GtkS0N%2F-LrDqRdSEF0Bhs_edr5m%2FScreenshot_91.png?alt=media\&token=5544b783-7b84-4cca-a6f0-e8826f817ea3)

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

![](https://468408990-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVM9qa13Pa-5BtdEH57%2F-LrDqtaYtJVJg9QC42dz%2F-LrDrN1U4Sfn5CkWzTdj%2Fimage.png?alt=media\&token=1fa80f9a-d8f8-4fe6-86c3-816afc3c0ef9)

Penjelasannya sebagai berikut:

![](https://468408990-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVM9qa13Pa-5BtdEH57%2F-LrDqtaYtJVJg9QC42dz%2F-LrDsgyAsmGr1acAo-O1%2Fimage.png?alt=media\&token=054b59ef-6150-4580-8c2d-52149a96b80b)

* **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**.