Mengubah Tampilan pada Halaman Produk

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.

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.

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

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

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

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

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

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

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

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

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

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

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

Berikut penjelasannya:

14. Selanjutnya, klik Tabs Content Review (Untuk mengubah tampilan pada tab Review/Ulasan).

Bisa lihat penjelasannya dibawah ini :

15. Selanjutnya, klik Tab Product Tags.

Penjelasannya sebagai berikut:

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