Langkah 1: Dapatkan kunci widget Photta anda
Log masuk ke Papan Pemuka Photta Business di business.photta.app. Navigasi ke Tetapan → Kunci API dan cari kunci boleh diterbitkan anda — ia bermula dengan pk_live_ and kelihatan seperti pk_live_xxxxxxxxxxxxxxxxxxxxxxxx. Klik ikon salin di sebelah kunci. Ini adalah satu-satunya kelayakan yang anda perlukan untuk integrasi Shopify; jangan sesekali menampal kunci rahsia sk_live_ anda ke dalam mana-mana kod frontend.
Jika anda belum mempunyai akaun, klik 'Mulakan percubaan percuma' pada halaman Photta Business. Percubaan ini memberi anda 50 percubaan cuba-pasang percuma tanpa memerlukan kad kredit. Kunci pk_live_ anda tersedia serta-merta selepas anda mengesahkan alamat e-mel dan mendaftarkan domain kedai anda di Tetapan → Domain Dibenarkan.
Langkah 2: Buka kod tema Shopify anda
Dalam panel admin Shopify anda, pergi ke Kedai Dalam Talian → Tema. Di sebelah tema aktif anda, klik menu tiga titik dan pilih Edit kod. Editor kod membuka pepohon fail di sebelah kiri. Kembangkan folder Layout dan klik theme.liquid — ini adalah templat induk yang membungkus setiap halaman di kedai anda.
Gunakan carian terbina dalam penyemak imbas anda (Cmd+F atau Ctrl+F) di dalam editor kod dan cari </body>. Anda sepatutnya menemui tepat satu padanan berhampiran bahagian paling bawah fail, tepat di atas </html>. Letakkan kursor anda pada baris sejurus sebelum </body>. Segala-galanya yang anda tampal di sini akan dimuatkan pada setiap halaman kedai anda, itulah yang anda perlukan.
Langkah 3: Tampal coretan skrip Photta
Tampal coretan berikut pada baris sejurus sebelum </body>, gantikan pk_live_... dengan kunci sebenar anda yang disalin dalam Langkah 1: <script src="https://widget.photta.app/sdk.js" data-pk="pk_live_..." defer></script>. Atribut defer adalah penting — ia menghalang skrip daripada menyekat paparan halaman anda sambil tetap memastikan widget dimulakan selepas DOM siap.
Klik Simpan di sudut kanan atas editor kod. Shopify akan menyimpan fail dan memaparkan pemberitahuan pengesahan hijau. Jangan terbitkan versi tema baharu atau lakukan perkara lain — perubahan akan berkuat kuasa pada tema aktif anda sebaik sahaja anda mengklik Simpan.
Langkah 4: Sahkan widget dimuatkan dengan betul
Buka mana-mana halaman produk pada etalase anda dalam tab penyemak imbas baharu (gunakan tetingkap peribadi/inkognito untuk memintas sebarang caching log masuk). Tatal ke bawah ke bahagian produk — anda sepatutnya melihat butang 'Cuba sekarang' berhampiran butang Tambah ke Troli. Klik butang tersebut, muat naik foto ujian, dan sahkan hasil cuba-pasang muncul. Jika anda melihat butang tersebut, pemasangan telah selesai.
Jika butang tidak muncul, buka konsol pembangun pelayar (F12 → tab Console) dan cari sebarang mesej ralat daripada photta atau sdk.js. Isu yang paling biasa ialah ketidakpadanan domain: domain kedai anda mesti disenaraikan di bawah Tetapan → Domain Dibenarkan dalam Papan Pemuka Perniagaan. Tambahkannya di sana, tunggu 30 saat, dan muat semula halaman produk.
Langkah 5: Sesuaikan warna widget mengikut jenama anda
Secara lalai widget menggunakan palet gelap neutral Photta. Untuk memadankan jenama anda, tambahkan atribut data pada tag skrip yang sama: data-color-primary untuk warna butang CTA anda (nilai hex, cth. #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 theme.liquid sekali lagi selepas menambah atribut ini.
Untuk penggantian peringkat CSS penuh, widget Photta mendedahkan sifat tersuai CSS pada ruang nama --photta-* yang boleh anda sasarkan daripada CSS asas tema anda. Pelan Growth dan ke atas juga membolehkan anda menyembunyikan lencana 'Dikuasakan oleh Photta' melalui Papan Pemuka Perniagaan di bawah Sesuaikan → Penjenamaan. Perubahan digunakan dalam masa nyata selepas menyimpan — tiada penggunaan semula atau kemas kini widget diperlukan.