tutorial membuat toko online yang menarik

tutorial membuat toko online yang menarik

tutorial membuat toko online yang menarik – Pada tutorial kali ini Anda akan belajar membuat toko online dimana Anda bisa menampilkan dan menjual produk yang ingin Anda Jual. Membuat toko online bagi sebagian orang merupakan hal yang sulit untuk dikerjakan, tetapi kalau Anda memakai tool dan cara yang tepat seperti pada panduan ini, Anda dapat membuatnya dengan sangat mudah.

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

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

Hal Yang Dibutuhkan Untuk Membuat Toko Online:

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

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

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

Berikut tutorial membuat toko online yang menarik

langkah membuat toko online

Langkah 1: Pesan Hosting dan Domain

Lakukan pemesanan hosting dan domain untuk toko online Anda

Jika Anda belum memiliki hosting dan domain, cobalah lakukan pemesanan terlebih dahulu. Pada tutorial ini kami melakukan pemesanan melalui layanan hosting Niagahoster. Kalau Anda sudah mempunyai hosting dan domain, silakan lanjutkan ke langkah berikutnya.

hosting untuk toko membuat toko online

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

2. Terdapat empat paket hosting yang dapat Anda gunakan, pada tutorial ini kami memilih 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. Masukkan nama domain yang akan Anda gunakan untuk membuat toko online, kemudian klik tombol Cari Domain.

tentukan nama domain

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

domain tersedia

6. Halaman selanjutnya 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, tapi kalau Anda belum memiliki 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. Selanjutnya silakan pilih metode pembayaran yang mau Anda gunakan, pada panduan ini kami memilih transfer Bank.

metode pembayaran

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

checkout sekarang

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

cara melakukan pembayaran

12. Berikutnya Anda akan melihat detail mengenai 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 menit sampai Anda mendapatkan detail login tersebut.

Catatan: kalau Anda telah memilih sebuah domain ketika melakukan pendaftaran, maka perlu diingat bahwa domain Anda tidak akan dapat diakses di internet secara langsung. Proses ini disebut dengan pointing dan membutuhkan waktu 5 menit sampai 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

Agar website Anda dapat 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 klik menu WordPress seperti gambar di bawah ini.

cara membuat website di cpanel

2. Kemudian silakan klik 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 akan Anda gunakan untuk login ke dashboard WordPress.

password untuk website wordpress

6. Terakhir silakan klik tombol Install.

instalasi wordpress

Apabila 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 memakai 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 web 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, kemudian 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 supaya 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, tekan 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 telah tersedia. 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 agar lebih informatif dan customer memperoleh informasi yang
jelas mengenai produk yang Anda jual. Anda juga dapat menambahkan list spesifikasi seperti
dalam gambar berikut ini.
Kesalahan yang sering dilakukan oleh kebanyakan member ialah 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 mengenai 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 bisa 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. Lalu 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. Namun 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, gunakan cara 1.
* Jika 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 tutorial 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
website Anda. Nah, itulah fungsi dari fitur Blog pada template ini.
PERHATIAN: Artikel blog harus menggunakan kategori BLOG yang sudah otomatis dibuat ketika
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. Masukkan Judul Artikel Blog
2. Tulis Artikel Blog. Anda bisa 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, contoh: 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 dapat 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), lalu 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 web Anda semakin lebih cepat ketika diakses oleh pengunjung website Anda. Dengan
cara menambahkan beberapa baris kode tambahan pada file htaccess website 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 dapat 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 jika penyedia hosting membatasi hal ini.

Nah sekarang website anda sudah jadi dengan tampilan yang sangat menawan

Terima Kasih sudah mengikuti tutorial membuat toko online yang menarik. Semoga Bermanfaat