Cara Edit Tampilan Dasar Katalog Toko Online

Oke, sekarang kita simak langsung tutorialnya berikut ini ya, Sob !

Site Identity Setting

Pada bagian ini, dalam template shopisle kamu bisa melakukan perubahan pada identitas katalog toko online kamu seperti menambahkan logo, mengganti site title, tagline, icon site katalog toko online kamu, Sob! Simak tutorialnya berikut ini:

STEP 1. Pertama tama silahkan login ke wp admin kamu, Sob !

Login wp admin

STEP 2. Setelah login, kamu akan menemukan menu di sebelah kiri, silahkan klik Appearance > Customize

Appearance > Customize

STEP 3. Selanjutnya kamu bisa klik Menu Site Identity

Site Identitiy Menu

STEP 4. Nah, kamu bisa menambahkan Logomu dengan klik Select Logo, Mengisi Site Title atau Judul di toko onlinemu dan mengganti tagline Toko Onlinemu

Site Identitiy Customizing

STEP 5. Kamu juga bisa scroll ke bawah, jika kamu ingin menambahkan atau mengganti Site icon toko online kamu loh, Sob! Site icon ini adalah ikon yang kamu lihat di tab browser kamu, nah untuk mengupload icon ini kamu hanya perlu mengupload icon toko onlinemu dengan klik Select image. Select image > Upload Icon > Select

Select image > Upload Icon > Select

STEP 6. Setelah semuanya terganti dan terisi silahkan klik tombol publish untuk menyimpan seluruh konfigurasi perubahan site identity yang sudah dilakukan.

Publish perubahan

STEP 7. Berhasil, kamu bisa cek di katalog toko online kamu dengan melihat perubahan katalog toko online kamu yang terbaru

Header Text Colour and Background Colour

Nah, kali ini kamu bisa mengganti warna tulisan header kamu dan background kamu, Sob ! Ini dia tutorialnya:

STEP 1. Setelah login wp admin kamu, kamu bisa pilih menu appearance di sebelah kiri dan klik customize

Appearance > Customize

STEP 2. Silahkan kamu pilih menu colors seperti gambar di bawah ini:

Colors Menu

STEP 3. Kamu bisa memilih warna apa yang akan kamu gunakan dalam tulisan di bagian header kamu, Sob. Kamu juga bisa mengganti warna background, untuk menggantinya kamu bisa klik Select Color.

Mengganti Warna Header Text dan Background

STEP 4. Setelah kamu mengganti warna sesuai dengan apa yang kamu mau, kamu bisa langsung klik tombol Publish di bagian atas menu untuk menyimpan perubahan warna yang sudah kamu lakukan.

Publish untuk menimpan

STEP 5. YAY ! Kamu sudah berhasil mengganti setelan warna katalog toko online, Kamu bisa cek katalog Toko Online kamu yang berhasil terganti.

Header Image dan Blog Header Setting

Nah kali ini kamu bisa melakukan perubahan pada gambar header dan header blog kamu, Sob! Ikutin tutorialnya berikut ini:

STEP 1. Setelah login wp admin kamu, kamu bisa pilih menu appearance di sebelah kiri dan klik customize.

Appearance > Customize

STEP 2. Silahkan kamu pilih menu Header seperti gambar di bawah ini:

Header Menu

STEP 3. Selanjutnya kamu bisa menambahkan gambar (Add New Image) pada header kamu atau menyembunyikan gambar (Hide Image). Kamu juga bisa menambahkan gambar dengan rekomendasi di kolom Suggested dengan klik pada tombol Random Suggested Headers.

Header Image Setting

STEP 4. Untuk Kamu juga bisa menambahkan Blog Header Title dan menambahkan Blog Header Subtitle.

Menambahkan blog header title dan subtitle

STEP 5. Setelah kamu mengisi kolom sesuai dengan apa yang kamu mau, kamu bisa langsung klik tombol Publish di bagian atas menu untuk menyimpan perubahan warna yang sudah kamu lakukan.

Klik Publish

STEP 6. Selesai ! Kamu berhasil mengubah pengaturan header, kamu bisa cek katalog Toko Online kamu yang berhasil terganti.

Frontpage Setting: Big Title Section

Untuk yang satu ini kamu bisa melakukan setting untuk halaman depan kamu yang muncul pertama kali. Terdapat gambar yang besar dan tulisan juga button yang mempermudah pengunjung dalam menjelajah katalog toko online kamu. Ini tutorialnya, Sob.

STEP 1. Setelah login wp admin kamu, kamu bisa pilih menu appearance di sebelah kiri dan klik customize.

Appearance>Customize

STEP 2. Silahkan kamu pilih menu Frontpage Section di sidebar menu bagian kiri seperti gambar di bawah ini:

Frontpage Section

STEP 3. Selanjutnya klik menu Big Title Section.

Big Title Section

STEP 4. Nah, kamu sudah masuk ke bagian yang kamu bisa ubah untuk mempercantik katalog toko online kamu. Dimulai dari mengganti gambar dengan klik Change Image > Upload Image > Select Files > Choose Image. Kamu juga bisa menambahkan dan mengisi judulnya dan sub judulnya.

Big Title Section

STEP 5. Kamu juga bisa mengganti label button kamu, mencantumkan button link, dimana kamu bisa memberikan akses langsung ke bagian yang kamu inginkan saat customer melakukan klik pada button tersebut.

Subtitle, Button label dan Button Link

STEP 6. Selanjutnya kamu bisa klik button Publish di bagian atas side bar menu untuk menyimpan perubahan yang sudah kamu lakukan.

klik publish

STEP 7. Wohoo ! Kamu berhasil mengubah pengaturan frontpage section untuk big title katalog toko online, kamu bisa cek katalog Toko Online kamu yang berhasil terganti.

Background Image

Oke, Sob sekarang buat kamu yang pengen nambahin background image di katalog toko online, pantengin tutorialnya berikut ini.

STEP 1. Setelah login wp admin kamu, kamu bisa pilih menu appearance di sebelah kiri dan klik customize.

Appearance > Customize

STEP 2. Silahkan kamu pilih menu Background image di sidebar menu bagian kiri seperti gambar di bawah ini:

Background Image Menu

STEP 3. Nah, selanjutnya kamu bisa mulai menambahkan background image kamu dengan klik Select Image > Select file > Choose image.

Background image >Select Image

STEP 4. Selanjutnya kamu bisa klik button Publish di bagian atas side bar menu untuk menyimpan perubahan yang sudah kamu lakukan.

Klik Publish

STEP 5. Nah! Sudah selesai dan kamu berhasil menambahkan background image, kamu bisa cek katalog Toko Online kamu yang berhasil terganti.

Menambahkan Social Media di Footer

Sekarang kamu bisa menambahkan social media toko online kamu di footer yang ada di katalog toko online kamu, Loh ! Simak terus tutorialnya berikut ini:

STEP 1. Setelah login wp admin kamu, kamu bisa pilih menu Appearance di sebelah kiri dan klik Customize.

Appearance > Customize

STEP 2. Silahkan kamu pilih menu Footer di sidebar menu bagian kiri seperti gambar di bawah ini:

Footer Menu

STEP 3. Selanjutnya kamu bisa isi Copyright. Menambahkan social media baru dengan klik Add new social.

Copyright

STEP 4. Oke, untuk menambahkan social media, selanjutnya kamu bisa memberikan link social media toko onlinemu yang tersedia. Seperti contoh di bawah ini yang memasukkan link facebook di kolom Button Link. Lakukan ini untuk social media yang lain di bawahnya.

Add Social Media

STEP 5. Selanjutnya kamu bisa klik button Publish di bagian atas side bar menu untuk menyimpan perubahan yang sudah kamu lakukan.

Klik Publish

STEP 6. YAY! Sekarang kamu sudah berhasil menambahkan social media di toko online, kamu bisa cek katalog Toko Online kamu yang berhasil terganti.

Menambahkan Widget

Ada banyak pilihan widget yang bisa kamu sesuaikan sesuai dengan apa yang kamu butuhkan di katalog toko onlinemu, seperti contohnya menambahkan galeri foto, kalender, filter product dan masih banyak yang lainnya. Yuk, langsung aja simak tutorialnya berikut ini.

STEP 1. Setelah login wp admin kamu, kamu bisa pilih menu Appearance di sebelah kiri dan klik Customize.

Appearance > Customize

STEP 2. Selanjutnya kamu bisa langsung klik menu Widgets seperti yang ada di bawah ini:

Widgets Menu

STEP 3. Oke, setelah itu akan muncul menu seperti ini dan kamu bisa klik Footer area 1 > Add Widget.

Footer Area Menu

STEP 4. Selanjutnya akan muncul menu dengan tampilan seperti ini. Nah, disini kamu bisa Pilih Widgets apa saja yang ingin kamu tambahan di bagian footer katalog Toko Online dengan klik salah satu pilihan widget di sebelah kanan, misalnya menambahkan Calendar, klik Calendar.

Add a Widget

STEP 5. Selanjutnya, kamu bisa scroll kebawah untuk contoh tampilan penambahan widget yang ada di sebelah kanan. Di kolom Title kamu bisa memberikan judul, setelah itu klik Done > Apply.

Calendar Widget Example

STEP 6. Selanjutnya kamu bisa klik button Publish di bagian atas side bar menu untuk menyimpan perubahan yang sudah kamu lakukan.

klik Publish

STEP 7. WHOOP! Sekarang kamu sudah berhasil menambahkan widget di toko online, kamu bisa cek katalog Toko Online kamu yang berhasil diperbarui.

Mengubah isi About Us Page

Untuk kamu informasi mengenai toko online kamu itu perlu banget, berikan informasi tentang toko online atau brand kamu dengan jelas sehingga semakin meyakinkan pengunjung toko onlinemu untuk menghubungi sampai akhirnya melakukan pembelian. Yuk, ikutin tutorialnya berikut ini!

STEP 1. Setelah login wp admin kamu, kamu bisa pilih menu Pages di menu side bar sebelah kiri

Pages Menu

STEP 2. Selanjutnya temukan page About, lalu klik Edit.

Pages > About > Edit

STEP 3. Selanjutnya kamu bisa langsung melakukan perubahan pada kotak yang bertulskan “Lorem ipsum..”. Ganti Judul dan isinya sesuai dengan keterangan tentang katalog toko online atau brand kamu.

Ganti Judul dan isinya

STEP 4. Setelah kamu selesai melakukan edit, klik button Update di kolom sebelah kanan text box

Update Button

STEP 5. Sekarang kamu sudah berhasil mengganti halaman di toko online, kamu bisa cek ulang katalog Toko Online kamu di halaman about us yang berhasil diperbarui.

Menambahkan Contact Us Page

Untuk menambahkan halaman contact us, agar bisa muncul icon seperti gambar berikut ini, kamu disarankan untuk install plugin wp font awesome untuk menambahkan iconnya. Ikuti tutorialnya berikut ini:

Contact Us Icon

STEP 1. Setelah login wp admin, kamu bisa cari dan pilih menu Plugins>Add New di sidebar menu sebelah kiri

Plugins > Add New

STEP 2. Pada kolom search cari dengan keyword Font Awesome.

Font Awesome

STEP 3. Selanjutnya akan muncul Plugin Better Font Awesome seperti berikut ini:

Better Font Awesome Plugin

STEP 4. Selanjutnya kamu bisa langsung klik tombol Install Now.

Install Now Button

STEP 5. Setelah itu klik tombol Activate.

Activate Better Font Awesome

STEP 6. Selanjutnya kembali ke sidebar menu yang di sebelah kiri lalu pilih menu Pages > Add New. Isi bagian judul dengan Contact Us.

Menambahkan Judul Contact Us

STEP 7. Setelah itu kamu bisa copy paste shortcode di bawah ini untuk memunculkan icon dan formatnya didalam text box. Selanjutnya kamu bisa isi instagram toko online kamu, nomor hp, nomor wa dan email kamu.

[icon name="instagram" class="fa-2x" unprefixed_class=""] Instagram:

[icon name="phone" class="fa-2x" unprefixed_class=""] Phone:

[icon name="whatsapp" class="fa-2x" unprefixed_class=""] Whatsapp:

[icon name="envelope-square" class="fa-2x" unprefixed_class=""] Email:

Add this Shortcode

STEP 8. Lalu klik tombol Update di sebelah kanan untuk menyimpan konfigurasimu

Klik Update Button

STEP 9. Oke, Sob sekarang kamu cek halaman Contact Us kamu untuk melihat perubahan pada halaman contact us kamu.

Yay! Sekarang kamu sudah berhasil mengganti tampilan dasar katalog toko online kamu dengan mudah. Simak terus Tips Hosting di halaman tutorial Jagoan Hosting Indonesia ya, jika ada bagian dari tutorial yang tidak ditemukan, kamu bisa menghubungi teman-teman di Jagoan Hosting supaya bisa dibantu lebih lanjut melalui Live Chat atau fitur Open Tiket ya!