Langkah 1: Dapatkan kunci widget Photta Anda
Masuk ke Dashboard Photta Business di business.photta.app. Navigasikan ke Pengaturan → Kunci API dan temukan kunci publikasi (publishable key) Anda — kunci ini dimulai dengan pk_live_ dan terlihat seperti pk_live_xxxxxxxxxxxxxxxxxxxxxxxx. Klik ikon salin di sebelah kunci tersebut. Ini adalah satu-satunya kredensial yang Anda perlukan untuk integrasi Shopify; jangan pernah menempelkan kunci rahasia sk_live_ Anda ke kode frontend mana pun.
Jika Anda belum memiliki akun, klik 'Mulai uji coba gratis' di halaman Photta Business. Uji coba ini memberi Anda 50 sesi coba-coba gratis tanpa memerlukan kartu kredit. Kunci pk_live_ Anda segera tersedia setelah Anda memverifikasi alamat email dan mendaftarkan domain toko Anda di Pengaturan → Domain yang Diizinkan.
Langkah 2: Buka kode tema Shopify Anda
Di panel admin Shopify Anda, buka Toko Online → Tema. Di sebelah tema aktif Anda, klik menu tiga titik dan pilih Edit kode. Editor kode akan membuka pohon file di sebelah kiri. Perluas folder Layout dan klik theme.liquid — ini adalah templat master yang membungkus setiap halaman di toko Anda.
Gunakan pencarian bawaan browser Anda (Cmd+F atau Ctrl+F) di dalam editor kode dan cari </body>. Anda seharusnya menemukan tepat satu kecocokan di bagian paling bawah file, tepat di atas </html>. Posisikan kursor Anda pada baris tepat sebelum </body>. Segala sesuatu yang Anda tempel di sini akan dimuat di setiap halaman toko Anda, yang memang merupakan hal yang Anda butuhkan.
Langkah 3: Tempel potongan skrip Photta
Tempelkan cuplikan berikut pada baris tepat sebelum </body>, ganti pk_live_... dengan kunci asli Anda yang disalin pada Langkah 1: <script src="https://widget.photta.app/sdk.js" data-pk="pk_live_..." defer></script>. Atribut defer sangat penting — ini mencegah skrip memblokir render halaman Anda sambil tetap memastikan widget terinisialisasi setelah DOM siap.
Klik Simpan di sudut kanan atas editor kode. Shopify akan menyimpan file dan menampilkan notifikasi konfirmasi berwarna hijau. Jangan mempublikasikan versi tema baru atau melakukan hal lain — perubahan akan langsung aktif pada tema aktif Anda saat Anda mengklik Simpan.
Langkah 4: Verifikasi widget dimuat dengan benar
Buka halaman produk apa pun di etalase Anda di tab browser baru (gunakan jendela pribadi/incognito untuk menghindari caching saat masuk). Gulir ke bawah ke bagian produk — Anda akan melihat tombol 'Try it on' di dekat tombol Tambah ke Keranjang. Klik tombol tersebut, unggah foto uji coba, dan konfirmasi hasil try-on muncul. Jika Anda melihat tombol tersebut, instalasi telah selesai.
Jika tombol tidak muncul, buka konsol pengembang browser (F12 → tab Konsol) dan cari pesan kesalahan dari photta atau sdk.js. Masalah yang paling umum adalah ketidakcocokan domain: domain toko Anda harus terdaftar di bawah Pengaturan → Domain yang Diizinkan di Dashboard Bisnis. Tambahkan di sana, tunggu 30 detik, dan muat ulang halaman produk.
Langkah 5: Sesuaikan warna widget agar cocok dengan merek Anda
Secara default, widget menggunakan palet gelap netral milik Photta. Untuk menyesuaikan dengan merek Anda, tambahkan atribut data ke tag skrip yang sama: data-color-primary untuk warna tombol CTA Anda (nilai hex, misal #D4AF37), dan data-color-surface untuk latar belakang modal. Contoh: <script src="https://widget.photta.app/sdk.js" data-pk="pk_live_..." data-color-primary="#D4AF37" defer></script>. Simpan kembali theme.liquid setelah menambahkan atribut ini.
Untuk penimpaan tingkat CSS penuh, widget Photta mengekspos properti kustom CSS pada namespace --photta-* yang dapat Anda targetkan dari CSS dasar tema Anda. Paket Growth ke atas juga memungkinkan Anda menyembunyikan lencana 'Powered by Photta' melalui Dashboard Bisnis di bawah Sesuaikan → Branding. Perubahan diterapkan secara real-time setelah disimpan — tidak perlu penerapan ulang atau pembaruan widget.