स्टेप 1: अपनी Photta विजेट की (key) प्राप्त करें
business.photta.app पर Photta Business डैशबोर्ड में लॉग इन करें। Settings → API Keys पर जाएं और अपनी पब्लिशेबल की (publishable key) ढूंढें — यह pk_live_ से शुरू होती है और pk_live_xxxxxxxxxxxxxxxxxxxxxxxx जैसी दिखती है। की (key) के बगल में स्थित कॉपी आइकन पर क्लिक करें। Shopify एकीकरण के लिए आपको केवल इसी क्रेडेंशियल की आवश्यकता है; अपनी sk_live_ सीक्रेट की (secret key) को कभी भी किसी फ्रंटएंड कोड में पेस्ट न करें।
यदि आपके पास अभी तक अकाउंट नहीं है, तो Photta Business पेज पर 'Start free trial' पर क्लिक करें। ट्रायल आपको बिना क्रेडिट कार्ड के 50 फ्री ट्राई-ऑन देता है। आपके ईमेल पते को सत्यापित करने और Settings → Allowed Domains में अपने स्टोर डोमेन को पंजीकृत करने के तुरंत बाद आपकी pk_live_ की (key) उपलब्ध हो जाती है।
स्टेप 2: अपना Shopify थीम कोड खोलें
अपने Shopify एडमिन पैनल में, Online Store → Themes पर जाएं। अपनी सक्रिय थीम के बगल में, तीन-बिंदु वाले मेनू पर क्लिक करें और Edit code चुनें। कोड एडिटर बाईं ओर एक फाइल ट्री खोलता है। Layout फोल्डर को एक्सपैंड करें और theme.liquid पर क्लिक करें — यह मास्टर टेम्पलेट है जो आपके स्टोर के प्रत्येक पेज को रैप करता है।
कोड एडिटर के अंदर अपने ब्राउज़र के अंतर्निहित सर्च (Cmd+F या Ctrl+F) का उपयोग करें और </body> खोजें। आपको फ़ाइल के बिल्कुल नीचे, </html> के ठीक ऊपर एक मैच मिलना चाहिए। अपना कर्सर </body> के ठीक पहले वाली लाइन पर रखें। आप यहाँ जो कुछ भी पेस्ट करेंगे वह आपके स्टोर के हर पेज पर लोड होगा, जिसकी आपको वास्तव में आवश्यकता है।
स्टेप 3: Photta स्क्रिप्ट स्निपेट पेस्ट करें
</body> से ठीक पहले वाली लाइन पर निम्नलिखित स्निपेट पेस्ट करें, pk_live_... को स्टेप 1 में कॉपी की गई अपनी वास्तविक की (key) से बदलें: <script src="https://widget.photta.app/sdk.js" data-pk="pk_live_..." defer></script>। 'defer' एट्रिब्यूट महत्वपूर्ण है — यह स्क्रिप्ट को आपके पेज रेंडरिंग को रोकने से रोकता है जबकि यह सुनिश्चित करता है कि DOM तैयार होने के बाद विजेट इनिशियलाइज़ हो जाए।
कोड एडिटर के ऊपरी-दाएं कोने में Save पर क्लिक करें। Shopify फ़ाइल को सेव करेगा और एक हरा पुष्टिकरण टोस्ट प्रदर्शित करेगा। नया थीम वर्ज़न प्रकाशित न करें या कुछ और न करें — जैसे ही आप Save पर क्लिक करते हैं, परिवर्तन आपकी सक्रिय थीम पर लाइव हो जाता है।
स्टेप 4: सत्यापित करें कि विजेट सही ढंग से लोड हुआ है
एक नए ब्राउज़र टैब में अपने स्टोरफ्रंट पर कोई भी उत्पाद पेज खोलें (किसी भी लॉग-इन कैशिंग से बचने के लिए प्राइवेट/इन्कॉग्निटो विंडो का उपयोग करें)। उत्पाद अनुभाग तक नीचे स्क्रॉल करें — आपको Add to Cart बटन के पास एक 'Try it on' बटन दिखाई देना चाहिए। उस पर क्लिक करें, एक परीक्षण फोटो अपलोड करें, और पुष्टि करें कि ट्राई-ऑन परिणाम दिखाई दे रहा है। यदि आपको बटन दिखाई देता है, तो इंस्टॉलेशन पूरा हो गया है।
यदि बटन दिखाई नहीं देता है, तो ब्राउज़र डेवलपर कंसोल (F12 → Console टैब) खोलें और photta या sdk.js से किसी भी त्रुटि संदेश की जांच करें। सबसे आम समस्या डोमेन मिसमैच है: आपका स्टोर डोमेन बिज़नेस डैशबोर्ड में Settings → Allowed Domains के अंतर्गत सूचीबद्ध होना चाहिए। इसे वहां जोड़ें, 30 सेकंड प्रतीक्षा करें, और उत्पाद पेज को रीलोड करें।
स्टेप 5: अपने ब्रांड से मेल खाने के लिए विजेट के रंगों को कस्टमाइज़ करें
डिफ़ॉल्ट रूप से विजेट Photta के न्यूट्रल डार्क पैलेट का उपयोग करता है। अपने ब्रांड से मेल खाने के लिए, उसी स्क्रिप्ट टैग में डेटा एट्रिब्यूट्स जोड़ें: आपके CTA बटन के रंग के लिए data-color-primary (hex मान, जैसे #D4AF37), और मोडल बैकग्राउंड के लिए data-color-surface। उदाहरण: <script src="https://widget.photta.app/sdk.js" data-pk="pk_live_..." data-color-primary="#D4AF37" defer></script>। इन एट्रिब्यूट्स को जोड़ने के बाद theme.liquid को फिर से सेव करें।
पूर्ण CSS-स्तर के ओवरराइड के लिए, Photta विजेट --photta-* नेमस्पेस पर CSS कस्टम प्रॉपर्टीज़ को एक्सपोज़ करता है जिन्हें आप अपनी थीम के बेस CSS से टारगेट कर सकते हैं। ग्रोथ प्लान और उससे ऊपर के प्लान आपको Customize → Branding के तहत बिज़नेस डैशबोर्ड के माध्यम से 'Powered by Photta' बैज को छिपाने की अनुमति भी देते हैं। परिवर्तन सेव करने के बाद रीयल टाइम में लागू होते हैं — किसी पुन: परिनियोजन (re-deploy) या विजेट अपडेट की आवश्यकता नहीं होती है।