Membuat Katalog Produk Keren Tanpa Koding dengan Framer dan Mayar

Di tutorial kali ini kita akan belajar bagaimana membuat katalog produk yang keren, bisa dikustom sesuai selera, dan yang pasti tanpa koding.

Kali ini kita akan menggunakan Framer sebagai web builder dan Mayar sebagai checkout platformnya.

Goalnya adalah membuat  sebuah landing page yang keren seperti ini: https://mayar-embed.framer.website/

Oke sebelum mulai, saya asumsikan kamu sudah punya akun Mayar dan ada produk didalamnya. Oke kita mulai tutorialnya.

01. Buat Akun Framer

Kunjungi website Framer di https://framer.com/ dan klik Start for Free untuk membuat akun.

02. Copy & Remix Template

Jika kamu sudah membuat akun, langkah berikutnya adalah kunjungi web template Mayar & Framer di https://mayar-embed.framer.website/ , lalu klik tombol Copy & Remix this Template

Lalu klik Copy project to my account.

03. Edit Tampilan & CMS (Produk)

Jika anda sudah ada di editor Framer, anda dapat dengan mudah merubah desain sesuai yang anda inginkan. Misalkan ubah logo, ubah warna, ubah teks dan lainnya. Edit sesuai selera dan brand anda.

Jika sudah, langkah selanjutnya adalah mengubah produk sesuai dengan produk anda. Disini kita akan menggunakan fitur CMS yang ada di Framer untuk memasukkan produk.

Caranya, Klik menu CMS yang ada di header atas editor Framer.

Lalu klik salah satu produk untuk mengedit.

Ubah Title dan Subtitle sesuai nama Produk anda, upload gambar produk, tentukan harga, dan yang paling penting masukkan link produk untuk pelanggan melakukan checkout.

Note: Link Produk dapat anda dapatkan di detail produk Mayar

04. Publish

Setelah anda melakukan editing konten produk di CMS jangan lupa tekan tombol Save untu menyimpan.

Saat semua produk sudah dimasukkan, kini waktunya untuk mempublish web kamu.

Kembali ke halaman Editor Framer, lalu di pojok kanan atas tekan tombol Publish.

Web anda kini dapat diakses dengan klik link domain tersebut (https://author-gather-818428.framer.app/).

Karena kita pakai Mayar, anda bisa langsung checkout dan membayar dengan mengklik gambar produk anda. Akan muncul pop-up yang berisi detail produk dan link untuk membeli.

05. Custom Domain

Anda dapat merubah domain web anda menggunakan domain gratis dari Framer dengan format [nama_site].framer.website atau menggunakan custom domain anda sendiri.

Caranya Klik gambar Gear dikanan atas untuk masuk ke Setting.

Lalu Klik menu Domain disebelah kiri dan masukkan domain yang anda inginkan.

Untuk menggunakan domain anda sendiri, anda harus mengupgrade web Framer anda ke paket berbayar.

Selamat Mencoba