Adım 1: Photta widget anahtarınızı alın
business.photta.app adresindeki Photta Business Paneline giriş yapın. Ayarlar → API Anahtarları bölümüne gidin ve yayınlanabilir anahtarınızı bulun — pk_live_ ile başlar ve pk_live_xxxxxxxxxxxxxxxxxxxxxxxx gibi görünür. Anahtarın yanındaki kopyala simgesine tıklayın. Shopify entegrasyonu için ihtiyacınız olan tek kimlik bilgisi budur; sk_live_ gizli anahtarınızı asla herhangi bir ön yüz koduna yapıştırmayın.
Henüz bir hesabınız yoksa, Photta Business sayfasındaki 'Ücretsiz denemeyi başlat' düğmesine tıklayın. Deneme süresi, kredi kartı gerektirmeden size 50 ücretsiz deneme hakkı verir. pk_live_ anahtarınız, e-posta adresinizi doğruladıktan ve Ayarlar → İzin Verilen Alan Adları bölümünde mağaza alan adınızı kaydettikten hemen sonra hazır olacaktır.
Adım 2: Shopify tema kodunuzu açın
Shopify yönetim panelinizde Çevrimiçi Mağaza → Temalar'a gidin. Etkin temanızın yanındaki üç noktalı menüye tıklayın ve Kodu düzenle'yi seçin. Kod düzenleyici solda bir dosya ağacı açar. Layout klasörünü genişletin ve theme.liquid'e tıklayın — bu, mağazanızdaki her sayfayı saran ana şablondur.
Kod düzenleyicinin içinde tarayıcınızın yerleşik aramasını (Cmd+F veya Ctrl+F) kullanın ve </body> araması yapın. Dosyanın en altına yakın, </html> etiketinin hemen üzerinde tam olarak bir eşleşme bulmalısınız. İmlecinizi </body> etiketinden hemen önceki satıra getirin. Buraya yapıştırdığınız her şey mağazanızın her sayfasında yüklenecektir, bu da tam olarak ihtiyacınız olan şeydir.
Adım 3: Photta kod parçacığını yapıştırın
Aşağıdaki parçacığı </body> etiketinden hemen önceki satıra yapıştırın ve pk_live_... kısmını Adım 1'de kopyaladığınız gerçek anahtarınızla değiştirin: <script src="https://widget.photta.app/sdk.js" data-pk="pk_live_..." defer></script>. defer niteliği önemlidir — betiğin sayfa oluşturmanızı engellemesini önlerken, DOM hazır olduktan sonra widget'ın başlatılmasını sağlar.
Kod düzenleyicinin sağ üst köşesindeki Kaydet'e tıklayın. Shopify dosyayı kaydedecek ve yeşil bir onay mesajı görüntüleyecektir. Yeni bir tema sürümü yayınlamayın veya başka bir şey yapmayın — Kaydet'e tıkladığınız anda değişiklik etkin temanızda canlıya geçer.
Adım 4: Widget'ın doğru yüklendiğini doğrulayın
Mağaza ön yüzünüzdeki herhangi bir ürün sayfasını yeni bir tarayıcı sekmesinde açın (oturum açılmış önbelleği atlamak için gizli pencere kullanın). Ürün bölümüne inin — Sepete Ekle düğmesinin yanında bir 'Üzerinde dene' düğmesi görmelisiniz. Düğmeye tıklayın, bir test fotoğrafı yükleyin ve deneme sonucunun göründüğünü onaylayın. Düğmeyi görüyorsanız kurulum tamamlanmıştır.
Düğme görünmüyorsa, tarayıcı geliştirici konsolunu açın (F12 → Konsol sekmesi) ve photta veya sdk.js kaynaklı herhangi bir hata mesajı olup olmadığına bakın. En yaygın sorun alan adı uyuşmazlığıdır: mağaza alan adınız İş Paneli'ndeki Ayarlar → İzin Verilen Alan Adları altında listelenmelidir. Oraya ekleyin, 30 saniye bekleyin ve ürün sayfasını yeniden yükleyin.
Adım 5: Widget renklerini markanıza uyacak şekilde özelleştirin
Varsayılan olarak widget Photta'in nötr koyu paletini kullanır. Markanızla uyumlu hale getirmek için aynı script etiketine veri nitelikleri ekleyin: CTA düğme renginiz için data-color-primary (hex değeri, örn. #D4AF37) ve modal arka planı için data-color-surface. Örnek: <script src="https://widget.photta.app/sdk.js" data-pk="pk_live_..." data-color-primary="#D4AF37" defer></script>. Bu nitelikleri ekledikten sonra theme.liquid'i tekrar kaydedin.
Tam CSS düzeyinde geçersiz kılmalar için Photta widget'ı, temanızın temel CSS'inden hedefleyebileceğiniz --photta-* ad alanında CSS özel özellikleri sunar. Growth planı ve üzeri, 'Powered by Photta' rozetini İş Paneli üzerinden Özelleştir → Markalama altından gizlemenize de olanak tanır. Değişiklikler kaydedildikten sonra gerçek zamanlı olarak uygulanır — yeniden dağıtım veya widget güncellemesi gerekmez.