Buat Katalog Produk Tanpa Coding dengan Mudah Menggunakan Google Sites dan Mayar

Buat Katalog Produk Tanpa Coding dengan Mudah Menggunakan Google Sites dan Mayar
Photo by Rubaitul Azad / Unsplash

Di era digital yang semakin canggih ini, kemampuan untuk menampilkan dan menjual barang secara online adalah kunci kesuksesan bisnis. Langkah penting dalam membangun kehadiran online yang kuat adalah membuat katalog produk yang menarik dan informatif. Namun, bagaimana jika Anda tidak akrab dengan pemrograman atau coding?

Beruntung, kemajuan teknologi telah membuat proses ini lebih mudah. Artikel Ini akan membahas cara menggunakan platform Google Sites dan kemudahan integrasi Mayar untuk membuat katalog produk tanpa coding. Orang yang tidak terlalu mahir dalam teknik sekalipun dapat membuat katalog produk yang profesional dan menarik dengan menggunakan pendekatan yang ramah pengguna ini.

Mayar, sebagai platform pembayaran kontemporer, tidak hanya menawarkan solusi pembayaran yang aman dan efisien, namun juga opsi integrasi yang serbaguna. Kita dapat mengembangkan halaman katalog produk yang menakjubkan tanpa menyentuh satu baris kode pun dengan menggunakan Google Sites sebagai alat pembuatan situs web.

Postingan ini akan memandu Anda melalui proses menggabungkan Google Sites dengan Mayar untuk membuat katalog produk yang luar biasa. Hal ini memungkinkan, bahkan bisnis yang belum berpengalaman untuk menampilkan barang-barang mereka secara online dengan daya tarik maksimal, memunculkan pilihan bisnis baru tanpa memperhatikan kendala teknologi.

Sebelum Anda Memulai

Sebelum membuat katalog produk yang menghubungkan Google Sites dengan Mayar, Anda harus membuat akun Google Sites dengan menggunakan akun google anda. Anda juga memerlukan akun mayar untuk menghubungkan produknya Google Sites.

Langkah ke 1: silakan kalian akses website sites.google.com

Langkah ke 2: jika sudah silahkan kalian login menggunakan akun Google yang kalian miliki

Langkah ke 3: selanjutnya untuk membuat page baru silahkan kalian klik button ataupun gambar dengan tanda tambah di bagian mulai situs baru.

A screenshot of a computer

Description automatically generated

Langkah ke 4: Maka nanti kalian akan langsung di-direct ke halaman editor dari page yang ingin kalian buat.

A screenshot of a computer

Description automatically generated

Langkah ke 5: Pertama saya akan coba menginputkan nama situs terlebih dahulu di sini di bagian nama situs mungkin bisa kalian inputkan nama situs bisnis yang kalian miliki.

A black rectangular object with white text

Description automatically generated

Langkah ke 6: Jika sudah Selanjutnya silahkan kalian Tampilkan judul dari halaman katalog produk yang ingin kalian buat.

A computer screen shot of a computer screen

Description automatically generated

Langkah ke 7: Selanjutnya saya akan coba menambahkan teks di bagian header terlebih dahulu. Setelah berhasil atau pun selesai menambahkan teks yang saya Letakkan pada bagian header sebagai keterangan pada judul yang terdapat di header.

A screenshot of a computer

Description automatically generated

Langkah ke 8: Berikunya saya akan coba mengubah tema pada bagian header terlebih dahulu untuk mengubah tema silakan ke Tab tema. Nanti akan tampil beberapa tema yang sudah bisa anda langsung pakai. Jika Anda ingin, Anda juga dapat menyesuaikan tema dengan mengklik tombol tambah atau mengimpor. untuk tutorial kali ini saya menggubakan thema Aristoteles.

A screenshot of a computer

Description automatically generated


Langkah ke 9: Saya kemudian akan memilih format konten yang akan saya tampilkan, yang akan terdiri dari gambar, judul, dan keterangan produk yang saya inginkan. Saya akan membuat dua konten produk dengan format ini.

A screenshot of a computer

Description automatically generated

Langkah ke 10: Berikutnya saya akan coba menambahkan gambar, judul serta keterangan produk yang akan saya tampilkan.

A screenshot of a computer

Description automatically generated

Langkah ke 11: Selanjutnya saya akan coba menambahkan embed Button menggunakan fitur yang ada di mayar. Pertama masuk ke halaman mayar dan melakukan login pada platform mayar.

A screenshot of a computer

Description automatically generated

Langkah ke 12: Jika sudah Silahkan kalian masuk ke halaman menu dari produk yang ingin kalian buat buttonnya dan masuk ke detail produknya disini karena saya menggunakan kelas online dan juga kelas bootcamp maka saya akan masuk pada detail produk kelas online.

A screenshot of a computer

Description automatically generated

Langkah ke 13: jika sudah pilih produk yang ingin dimasukan “Algoritma Pemrograman Dasar”.

A screenshot of a computer

Description automatically generated

Langkah ke 14: baik jika sudah berada di halaman detail product seperti ini silahkan kalian klik button embet yang terdapat di bagian button copy link pembayaran.

A screenshot of a web page

Description automatically generated

Langkah ke 15: Maka nanti akan otomatis muncul modal yang menampilkan script klik button “copy kode” untuk menyalin script untuk membuat button.

A screenshot of a computer

Description automatically generated

Langkah ke 16: kembali ke halaman Google Site lalu silahkan kalian pilih smartkan di bagian sematkan.

A screenshot of a computer

Description automatically generated

Langkah ke 17: lalu akan muncul modal yang terdapat dua pilihan yang pertama menggunakan url lalu yang kedua dengan menyematkan kode silakan pilih menyematkan kode lalu kalian pastekan script yang sudah kalian copy tadi lalu klik button berikutnya.

Langkah ke 18: Maka nanti akan menampilkan preview dari hasil script yang kita pastekan tadi silakan klik button sisipkan.

A screenshot of a computer

Description automatically generated

Langkah ke 19: Tinggal kalian atur posisi button. Begitu juga pada produk satunya yang ingin kalian tampilkan. Apa abila sudah selesai maka akan seperti berikut.

A screenshot of a computer

Description automatically generated

Langkah ke 20: Berikutnya saya ingin buat 2 content lagi menggunakan link produknya saja tanpa menggunakan button. Sebelum itu kalian dapat Kembali pada halaman mayar.

A screenshot of a computer

Description automatically generated

Langkah ke 21: Lalu pilih produk yang ingin di tampilkan di sini saya menggunakan produk E-book dan Produk Digital. Pertama kita klik “E-book”.

A screenshot of a computer

Description automatically generated

Langkah ke 22: Pilih produk yang mau di tampilkan saya memilih produk “JOURNAL DESIGN OF AUTOMATIC”.

A screenshot of a computer

Description automatically generated

Langkah ke 23:  Setelah masuk pada halaman detail produk klik button “copy link halaman produk”.

A screenshot of a computer

Description automatically generated

Langkah ke 24: kembali ke halaman Google Site lalu silahkan kalian pilih smartkan di bagian sematkan.

A screenshot of a computer

Description automatically generated

Langkah ke 25: lalu akan muncul modal yang terdapat dua pilihan yang pertama menggunakan url lalu yang kedua dengan menyematkan kode silakan pilih menggunakan url lalu kalian pastekan url yang sudah kalian copy tadi.

A screenshot of a web page

Description automatically generated

Langkah ke 26: Jika sudah tautkan linknya maka akan tampil lagi pilihan tampilan yaitu pilihan yang pertama yaitu seluruh halaman dan yang kedua yaitu hanya pratinjaunya saja di sini saya memilih pratinjau lalu klik sisipkan.

A screenshot of a computer

Description automatically generated

Langkah ke 27: Berikut adalah hasilnya. Begitu juga untuk content satunya lagi.

A screenshot of a computer

Description automatically generated

Langkah ke 28: Berikutnya saya ingin menambahkan footer dimana kita dapat Scroll ke bagian bawah Maka nanti akan menampilkan button tambah footer. Lalu klik button “tambah footer”.

A screenshot of a computer

Description automatically generated

Langkah ke 29: Isi footer sesuai keinginan di sini saya mengisinya dengan nama toko saya.

A screenshot of a computer

Description automatically generated

Langkah ke 30: Berikutnya saya ingin publikasi halaman katalog produk yang telah kita buat ini dengan cara klik button “publikasikan”.

A screenshot of a computer

Description automatically generated

Langkah ke 31: Setelah itu akan tampil modal untuk menginputkan domain yang akan kalian gunakan. Silakan kalian masukkan domain sesuai dengan bisni kalian. jika sudah kalian dapat melihat preview domain yang akan digunakan. Jika sudah sesuai kalian dapat klik button “publikasikan”.

A screenshot of a computer

Description automatically generated

Langkah ke 32: untuk melihat hasilnya kalian dapat klik logo url yang terdapat di bagian header editor.

A screenshot of a computer

Description automatically generated

Langkah ke 33: Nanti akan tampil modal berisikan url dari katalog yang telah kita buat lalu klik button “Salin link”.

A screenshot of a computer

Description automatically generated

Langkah ke 34: lalu salin link url tersebut pada browser kalian maka akan menampilkan halaman katalog yang telah kalian buat.

A screenshot of a computer

Description automatically generated

Selamat anda telah berhasil membuat halaman katalog produk tampah code.

Membuat katalog produk tanpa perlu belajar coding adalah kemajuan besar dalam dunia bisnis digital. Sekarang setiap orang, dari pengusaha kecil hingga bisnis pemula, dapat membuat katalog produk yang menakjubkan tanpa terjebak dalam kode yang rumit dengan bantuan Google Sites dan integrasi cerdas dengan Mayar. Membuat katalog produk kini lebih sederhana dan lebih murah dibandingkan sebelumnya, yang terkesan sulit dan membutuhkan kemampuan teknologi. Integrasi dengan Mayar meningkatkan pengalaman pembelian online dengan menyediakan solusi pembayaran yang sederhana dan aman.

Sebagai penutup, mari terus menjelajahi dan memanfaatkan teknologi untuk mendukung pertumbuhan bisnis kita. Dengan menciptakan katalog produk tanpa coding, kita membuka pintu untuk menghadirkan bisnis online yang lebih tangkas, lebih mudah diakses, dan lebih menarik. Selamat berkatalog tanpa batasan teknis, dan semoga perjalanan bisnis Anda semakin sukses!