tutorial membuat toko online lewat wordpress

tutorial membuat toko online lewat wordpress

tutorial membuat toko online lewat wordpress – Pada panduan kali ini Anda akan belajar membuat toko online dimana Anda dapat menampilkan dan menjual produk yang ingin Anda Jual. Membuat toko online untuk sebagian orang merupakan hal yang sulit untuk dilakukan, tapi jika Anda menggunakan tool dan cara yang tepat seperti pada panduan ini, Anda dapat membuatnya dengan mudah.

Saat ini masyarakat Indonesia lebih memilih untuk melakukan transaksi online kalau dibandingkan dengantransaksi konvensional. Berdasarkan catatan Badan Pusat Statistik (BPS), volume transaksi online meningkat 1.5% lebih banyak kalau dibandingkan transaksi konvensional.

Berdasarkan data tersebut, kesempatan produk Anda terjual akan lebih besar jika bisa dilakukan transaksi secara online. Untuk mewujudkannya Anda hanya perlu membuat toko online seperti yang akan dijelaskan langkah demi langkah melalui tutorial ini.

Hal Yang Diperlukan Untuk Membuat Toko Online:

Untuk membuat toko online atau jenis website lainnya, Anda hanya perlu dua hal.

  • Domain – yaitu sebuah alamat website toko online Anda di internet, seperti namatokoanda.com
  • Hosting – yaitu sebuah tempat dimana semua file website toko online Anda di simpan.

Terdapat banyak jenis layanan hosting yang dapat Anda gunakan, salah satunya ialah Niagahoster yang memberikan domain gratis untuk setiap hosting yang Anda gunakan.

Berikut tutorial membuat toko online lewat wordpress

langkah membuat toko online

Langkah 1: Memesan Hosting dan Domain

Lakukan pemesanan hosting dan domain untuk toko online Anda

Jika Anda belum memiliki hosting dan domain, silakan lakukan pemesanan terlebih dahulu. Pada panduan ini kami melakukan pemesanan lewat layanan hosting Niagahoster. Jika Anda sudah memiliki hosting dan domain, silakan melanjutkan ke langkah berikutnya.

hosting untuk toko membuat toko online

1. Untuk melakukan pemesanan hosting, silakan klik tautan berikut PESAN DOMAIN DAN HOSTING

2. Ada empat paket hosting yang dapat Anda gunakan, pada tutorial ini kami pilih paket Personal dengan domain gratis. Silakan tekan tombol Pilih Sekarang.

cara membuat website dengan order hosting

3. Tentukan durasi hosting untuk website Anda, setelah itu tekan tombol Selanjutnya.

durasi hosting untuk membuat website

4. Ketikkan nama domain yang akan Anda gunakan untuk membuat toko online, kemudian klik tombol Cari Domain.

tentukan nama domain

5. Apabila domain Anda tersedia silakan klik tombol Tambah Ke Cart, tapi jika sudah tidak tersedia silakan cari nama domain lainnya.

domain tersedia

6. Halaman berikutnya akan tampil mengenai detail pesanan hosting dan domain Anda beserta total biayanya. Silakan tekan tautan Lanjut Ke Checkout>.

checkout

7. Akan tampil halaman untuk login, tetapi kalau Anda belum mempunyai akun Niagahoster, silakan tekan tombol Selanjutnya.

cara membuat website di niagahoster

8. Untuk Anda yang belum mempunyai akun Niagahoster, silakan isi detail yang diminta pada kolom yang tersedia.

isi data untuk domain website

9. Kemudian silakan pilih metode pembayaran yang mau Anda gunakan, pada tutorial ini kami memilih transfer Bank.

metode pembayaran

10. Untuk menyelesaikan pesanan Anda, silakan tekan tombol Checkout Sekarang.

checkout sekarang

11. Kemudian silakan tekan tombol Klik disini untuk cara dan konfirmasi pembayaran.

cara melakukan pembayaran

12. Selanjutkan Anda akan melihat detail tentang total harga untuk pesanan Anda. Silakan lakukan pembayaran sesuai dengan nominal tagihan.

harga hosting dan domain

13. Setelah Anda melakukan pembayaran dan melakukan konfirmasi, segera informasi detail login ke cPanel akan dikirimkan ke email Anda. Silakan ditunggu beberapa saat sampai Anda mendapatkan detail login tersebut.

Catatan: kalau Anda telah memilih sebuah domain ketika melakukan pendaftaran, maka perlu diingat bahwa domain Anda tidak akan bisa diakses di internet secara langsung. Proses ini disebut dengan pointing dan membutuhkan waktu 5 menit hingga maksimal 24 jam. Email dan website Anda tidak akan berfungsi dengan baik hingga domain Anda terpointing.

Langkah 2: Instalasi Website

membuat toko online dengan wordpress

Lakukan instalasi WordPress beserta plugin dan template

a. Instal WordPress

Supaya website Anda bisa diakses melalui internet, Anda harus melakukan instalasi WordPress. Berikut adalah langkah-langkahnya.

1. Silakan login ke cPanel hosting Anda, dengan memakai username dan password yang dikirimkan ke email Anda setelah Anda melakukan pembayaran dan hosting Anda aktif. Untuk URL login cPanel berupa namadomain.com/cpanel. Setelah berhasil login ke cPanel silakan tekan menu WordPress seperti gambar di bawah ini.

cara membuat website di cpanel

2. Selanjutnya silakan tekan tombol Install Now

cara membuat website dengan wordpress

3. Pada bagian Software Setup silakan pilih nama domain Anda pada kolom Choose Domain, untuk kolom In Directory silakan untuk dikosongkan.

pilih nama domain

4. Jangan lupa untuk mengisi nama toko online Anda beserta deskripsinya.

isi nama website dan deskripsi

5. Silakan tentukan username dan password yang mau Anda gunakan untuk login ke dashboard WordPress.

password untuk website wordpress

6. Terakhir silakan klik tombol Install.

instalasi wordpress

Jika proses instalasi berhasil, akan tampil detail mengenai URL website Anda beserta URL untuk login ke dashboard WordPress.

url login wordpress

c. Ganti Template WordPress

Pada panduan kali ini saya akan menggunakan template wordpress premium indostore. Info Lengkap klik disini TEMPLATE INDOSTORE

lihat demonya : KLIK DISINI

Berikut adalah langkah-langkah melakukan instalasi template melalui wordpress dashboard:
1. Pastikan Anda telah login wp-admin website Anda.
namadomain.com/wp-login.php
2. Klik Appereance > Themes > Klik tombol Add New

website toko online murah

3. selanjutnya, tombol Add New akan berubah menjadi tombol Upload Theme, klik tombol
tersebut lalu klik tombol Choose File, pilih file template (.zip) yang akan Anda install.

website toko online sederhana
4. Tunggu sampai proses install selesai, setelah itu klik Activate


5. Selesai. selanjutnya kita akan belajar Cara mengkonfigurasi theme options

D. KONFIGURASI INDOSTORE OPTIONS
Selanjutnya, Anda dapat melakukan konfigurasi theme options yang telah disediakan:

website toko online baju
Pada theme option, Anda dapat merubah logo, banner dan beberapa tab pengaturan fitur-fitur yang
tersedia pada template ini. Perhatikan teks instruksi pada setiap pengaturan, ini bisa membantu
Anda agar lebih mudah melakukan konfigurasi pada theme options

website toko online terbaik

PERHATIAN: Penting untuk diperhatikan bahwa Anda harus membaca dan mengecek setiap
pengaturan dari masing-masing Tab Pengaturan supaya Anda memahami theme options template ini.

E. SETTING PERMALINK
Agar web Anda lebih seo friendly dan fungsi dari template ini berfungsi dengan baik, Anda perlu
mengganti settingan permalink seperti langkah-langkah berikut ini:
1. Arahkan kursor pada Settings
2. Pilih Permalinks
3. Lalu pilih pada Custom Stucture
4. Tambahkan kode /%postname%.html

website toko online indonesia
Selanjutnya, Anda perlu menginstall plugin tambahan berikut ini:
http://wordpress.org/extend/plugins/no-category-base-wpml/
*tersedia juga pada halaman download member area
*Cukup diinstall dan diaktifkan tanpa setingan apapun.

Cara install paling mudah ialah langsung cari dari list plugin di WordPress:
1. Arahkan kursor pada Plugins > Add New
2. Isi kolom Search, ketik no-category-base-wpml
3. Klik Install Now pada WP No Category Base – WPML compatible

website toko online adalah
Fungsinya: Menghilangkan text category pada permalink website Anda, karena kategori blog tidak dapat tampil/tidak
berfungsi apabila terdapat text category pada permalink website.

F. CARA MENAMBAHKAN PRODUK
OK, selanjutnya adalah bab/bagian yang paling penting dalam tutorial ini, yaitu cara
menambahkan produk.
1. Arahkan kursor pada Produk > Tambahkan Produk

contoh website toko online
2. Muncul halaman editor dimana Anda dapat menambahkan 5 point penting produk Anda:
a. Judul Produk
b. Deskripsi Produk (penjelasan tentang produk Anda)
c. Detail Produk / IndoStore Panel (detail seperti harga, kode produk dsb)
d. Gambar Produk
e. Kategori & Tags
3. Apabila semua point diatas telah diisi, klik tombol Publish

contoh website toko online sederhana
PERHATIAN: Setelah ini kami akan menjelaskan lebih detail dari masing-masing ke5 point tersebut.
Lanjutkan membaca panduan ini.

F.1 Judul Produk
Masukkan judul produk Anda pada kolom yang sudah disediakan. Saran kami gunakan judul produk yang
jelas dan memiliki kata kunci yang ditargetkan untuk keperluan SEO. Jangan terlalu pendek dan
terlalu panjang.


F.2 Deskripsi Produk
Masukkan deskripsi produk supaya lebih informatif dan customer mendapatkan informasi yang
jelas mengenai produk yang Anda jual. Anda juga bisa menambahkan list spesifikasi seperti
dalam gambar berikut ini.
Kesalahan yang sering dilakukan oleh kebanyakan member adalah tidak membuat deskripsi produk yang jelas
dan kurang informatif, biasanya hanya menampilkan gambar produk saja. Hal ini kurang bagus untuk SEO
(search engine optimation) dan customer kurang mendapatkan penjelasan tentang produk yang ditawarkan.
Jadi, buatlah deskripsi produk yang baik dan informatif bagi customer Anda.
*Gunakan Bulleted List seperti gambar dibawah ini untuk membuat list spesifikasi produk Anda.

contoh website toko online dengan wordpress

F.3 Detail Produk
Pada bagian ini Anda harusnya lebih teliti, karena lebih banyak kolom yang perlu diisi. Dan sekali lagi, jangan
lupa perhatikan instruksi yang ada di setiap kolom isian agar tidak terjadi kesalahan.

website toko online di indonesia
*Kosongkan kolom pilihan warna apabila tidak ingin menampilkan pilihan warna pada produk ini. Apabila
Anda mengisinya, pengunjung diharuskan memilih warna sebelum dapat ditambahkan ke dalam keranjang.


*Anda dapat memberikan pilihan harga/ukuran/model pada produk dengan cara mencentang “Pilihan
Harga/Ukuran” dan menambahkan pilihan 1, pilihan 2 dan seterusnya.

membuat website toko online dengan wordpress

F.4 Gambar Produk
Untuk menambahkan gambar ada 2 cara yaitu:
1. Upload gambar per produk
Upload beberapa gambar per produk. Jadi, 1 produk memiliki gambar lebih dari 1 view. Cocok
jika Anda memiliki gambar produk dari berbagai versi atau sisi, misal tampak depan,
belakang, dll.
2. Upload gambar tidak per produk (masal)
Upload gambar semua produk secara bersamaan pada Media. Kemudian pada saat
input/menambahkan produk, Anda hanya tinggal setting salah satu gambar yang telah
diupload sebelumnya sebagai featured image.

Cara nomor 2 lebih mudah, karena upload gambar tidak perlu per produk. Tetapi memiliki
kekurangan, yaitu hanya dapat menampilkan 1 gambar pada display produk. (hanya menampilkan
gambar yang disetting sebagai featured image)


Display Produk dengan Cara 1 —- VS —- Display Produk dengan Cara 2

* Apabila tiap produk Anda mempunyai lebih dari 1 gambar, misal tampak depan, belakang,
samping dll, pakai cara 1.
* Apabila tiap produk Anda hanya memiliki 1 gambar, gunakan cara 2 karena lebih cepat.
PERHATIAN! Gunakan gambar yang mempunyai lebar minimal 500px (tinggi mengikuti) agar
mendapatkan tampilan yang bagus.

Setelah ini kami akan menjelaskan detail dari masing-masing cara menambahkan gambar produk
(Cara 1 dan Cara 2). Lanjutkan membaca panduan ini ya .

Cara 1: Upload gambar per produk
Upload gambar lebih dari satu untuk 1 produk (per produk).
1. Pastinya Anda sudah menyiapkan beberapa gambar untuk produk ini. Misalkan 4 gambar
2. Klik Tombol Add Media

3. Klik Upload Files > Select Files dan pilih gambar dari komputer Anda.
4. Seleksi beberapa gambar untuk produk ini. Contoh pada gambar, seleksi 4 gambar.

ebook cara membuat website toko online
5. Maka, gambar tersebut akan diupload dan masuk ke dalam Media Library.
6. Tentukan gambar utama/featured image produk ini.
a. Klik Set Featured Image
b. Ubah select menu pada posisi Uploaded to this post, yang artinya menampilkan gambar
yang diupload hanya pada produk ini saja. Nah, 4 gambar ini yang akan muncul pada
display produk sebagai gambar mini dan dapat di hover zoom.
c. Pilih salah satu sebagai gambar utama/featured image.
d. Klik tombol Set featured image.
e. Selesai, lanjutkan point berikutnya (Setting Kategori & Tags Produk).

Cara 2: Upload gambar lebih dari 1 produk secara bersamaan (masal)
Upload gambar semua produk secara masal.
1. Pastinya Anda sudah menyiapkan semua gambar untuk beberapa produk atau semua produk.
2. Arahkan kursor pada Media > Add New > Select Files

3. Pilih semua gambar produk yang akan diupload. Tunggu sampai dengan proses upload selesai.

4. Pada halaman editor produk, Anda hanya perlu menentukan gambar utama/featured image
dari produk ini. Lihat pada pojok kanan bawah, pada kotak Featured Image. Klik pada link Set
featured image


5. Pilih gambar yang sebelumnya sudah diupload, klik tombol Set Featured Image, maka gambar
tersebut sudah menjadi gambar utama dari produk ini. Selesai, lanjutkan point berikutnya
(Setting Kategori & Tags Produk).

5.e) Kategori & Tags
Untuk mengelompokkan produk, Anda dapat menggunakan Category. Anda bisa membuat kategori
terlebih dahulu sebelum mulai menambahkan produk. Klik Produk > Categories


Pada saat menambahkan produk (editor produk), pilih kategori dan tags pada seperti dalam gambar
berikut:


Apabila ke-5 point sudah dilengkapi, Anda dapat mempublikasikan produk Anda dengan cara klik
tombol PUBLISH pada halaman editor produk Anda.

F.5 CARA MENAMBAHKAN ARTIKEL BLOG
Agar website Anda semakin SEO atau lebih disukai oleh mesin pencari, buatlah artikel terkait produk
yang Anda jual, tips & trik, cara penggunaan, dan informasi lainnya yang bermanfaat bagi pengunjung
web Anda. Nah, itulah fungsi dari fitur Blog pada template ini.
PERHATIAN: Artikel blog harus menggunakan kategori BLOG yang sudah otomatis dibuat saat
template ini di-install.
Menambahkan/memposting Artikel Blog
1. Arahkan kursor pada Blog > Tulis Artikel Baru


2. Caranya hampir sama seperti ketika Anda manambahkan produk, cuma bedanya tanpa ada
panel detail produk.
1. Ketik Judul Artikel Blog
2. Tulis Artikel Blog. Anda dapat menambahkan gambar ke dalam artikel dengan cara klik
tombol Add Media > Pilih Gambarnya > Pilih Tata Letak, Ukuran gambar > Insert to Post
3. Pilih Kategori artikel ini. *Harus pilih kategori BLOG
4. Ketik keyword Tags.
5. Terbitkan artikel dengan cara klik tombol PUBLISH

F.6 CUSTOM MENUS (OPTIONAL)
Custom menus hanya tersedia pada bagian Navigasi Atas. Anda dapat mengatur isi dari navigasi
tersebut dengan membuat menu baru. Secara default, navigasi atas menampilkan halaman(page)
yang ada di website Anda dan Anda tidak diharuskan membuat menu baru, ini hanya pilihan saja.
Langkah-langkah membuat custom menu:


1. Klik Appereance > Menus > Cari tombol create a new menu *lihat gambar diatas (no.1)
2. Beri nama menu yang Anda buat, misal: Menu Contoh *lihat gambar diatas (no.2)
3. Apabila sudah dibuat menunya, isi komponen menu dari sisi A dan tambahkan ke sisi B
memakai tombol Add to Menu. *lihat gambar diatas (no.3)
4. Aturlah posisi atau urutan komponen custom menu pada sisi B. Jika sudah OK, centang
pada Menu IndoStore untuk menampilkan menu yang Anda buat pada menu navigasi atas
web. *lihat gambar diatas (no.4 dan kotak B)
5. Klik tombol Save Menu
*Geser item sedikit ke kanan untuk menjadikannya sub menu dari item diatasnya.

F.7 WIDGET AREA (FOOTER)
IndoStore Theme memiliki 5 (lima) widget area yaitu: Sidebar kiri, Sidebar Kanan, Footer bagian
kiri, tengah dan kanan.
Anda dapat menambahkan widget pada tiap-tiap widget area yang tersedia di halaman Widgets.
1. Klik Appereance > Widgets
2. Anda bisa menambahkan available widgets yang tersedia di sebelah kiri (sisi A) ke widget area
yang ada di sebelah kanan (sisi B)


3. Klik salah satu widget yang ingi Anda tambahkan (sisi A), kemudian pilih widget area tempat Anda ingin
meletakkan widget tersebut.
Contoh: Menambahkan widget Categories
1. Klik Widget Categories
2. Pilih Widget Area-nya (contoh: Sidebar)
3. Klik tombol Add Widget


4. Atur dan setting sesuai keinginan Anda.

F.7 OPTIMASI KECEPATAN WEBSITE
Tips agar website Anda semakin lebih cepat ketika diakses oleh pengunjung web Anda. Dengan
cara menambahkan beberapa baris kode tambahan pada file htaccess web Anda. Klik link berikut
ini: http://oketheme.com/free-download/extra-htaccess.txt
Blok semua kode atau tekan Ctrl + A pada keyboard, lalu COPY.


Untuk mengedit file htaccess Anda perlu masuk ke File Manager hosting Anda. Tetapi dengan
adanya plugin WPHtaccess Editor, Anda bisa mengedit langsung dari WP dashboard Anda.
1. Download file plugin WP Htaccess Editor dari halaman member area (Plugin Tambahan).
2. Install plugin tersebut. Caranya: klik Plugins > Add New > Upload Plugin


3. Klik tombol Choose File, pilih file plugin yang sebelumnya sudah didownload, kemudian klik
Install Now
4. Setelah terinstall, Activate (aktifkan)
5. Maka, akan ada menu Htaccess pada sidebar WP dashboard Anda. Klik menu Htaccess
6. Pada Content of the Htaccess File, PASTE kode tambahan di lokasi no.2 pada gambar berikut:


7. Hasilnya akan seperti gambar berikut ini, jangan lupa klik tombol Save file


PERHATIAN: Tidak semua penyedia hosting memberikan akses untuk edit file .htaccess, text error
akan muncul saat Anda klik tombol Save file kalau penyedia hosting membatasi hal ini.

Nah sekarang website anda sudah jadi dengan tampilan yang sangat menarik

Terima Kasih sudah mengikuti tutorial membuat toko online lewat wordpress. Semoga Bermanfaat