שלב 1: קבלת מפתח הווידג'ט של Photta
היכנסו ללוח הבקרה של Photta Business בכתובת business.photta.app. עברו אל Settings ← API Keys ומצאו את המפתח הציבורי שלכם (publishable key) — הוא מתחיל ב-pk_live_ ונראה כך: pk_live_xxxxxxxxxxxxxxxxxxxxxxxx. לחצו על סמל ההעתקה ליד המפתח. זהו הפרט היחיד שדרוש לכם עבור האינטגרציה עם Shopify; לעולם אל תדביקו את המפתח הסודי (sk_live_) שלכם בקוד צד-לקוח (frontend).
אם עדיין אין לכם חשבון, לחצו על 'Start free trial' בדף Photta Business. הניסיון מעניק לכם 50 מדידות חינם ללא צורך בכרטיס אשראי. מפתח ה-pk_live_ יהיה זמין מיד לאחר אימות כתובת המייל ורישום דומיין החנות ב-Settings ← Allowed Domains.
שלב 2: פתיחת קוד התבנית ב-Shopify
בפאנל הניהול של Shopify, עברו אל Online Store ← Themes. ליד התבנית הפעילה שלכם, לחצו על תפריט שלוש הנקודות ובחרו ב-Edit code. עורך הקוד יפתח עץ קבצים בצד שמאל. הרחיבו את תיקיית ה-Layout ולחצו על theme.liquid — זוהי תבנית האב שעוטפת כל דף בחנות שלכם.
השתמשו בחיפוש המובנה בדפדפן (Cmd+F או Ctrl+F) בתוך עורך הקוד וחפשו את </body>. אתם אמורים למצוא התאמה אחת בדיוק ליד החלק התחתון של הקובץ, ממש מעל </html>. מקמו את הסמן בשורה שמיד לפני </body>. כל מה שתדביקו כאן ייטען בכל דפי החנות, וזה בדיוק מה שדרוש לכם.
שלב 3: הדבקת קטע הסקריפט של Photta
הדביקו את הקטע הבא בשורה שמיד לפני </body>, והחליפו את pk_live_... במפתח האמיתי שהעתקתם בשלב 1: <script src="https://widget.photta.app/sdk.js" data-pk="pk_live_..." defer></script>. המאפיין defer הוא חשוב — הוא מונע מהסקריפט לחסום את טעינת הדף ומבטיח שהווידג'ט יופעל לאחר שה-DOM מוכן.
לחצו על Save בפינה הימנית העליונה של עורך הקוד. Shopify תשמור את הקובץ ותציג הודעת אישור ירוקה. אין צורך לפרסם גרסת תבנית חדשה או לבצע פעולה נוספת — השינוי פעיל בתבנית שלכם ברגע שלחצתם על Save.
שלב 4: אימות טעינת הווידג'ט
פתחו דף מוצר כלשהו בחנות שלכם בלשונית דפדפן חדשה (השתמשו בחלון גלישה בסתר כדי לעקוף מטמון של משתמש מחובר). גללו מטה לאזור המוצר — אתם אמורים לראות כפתור 'Try it on' ליד כפתור הוספה לסל. לחצו עליו, העלו תמונת בדיקה, ואשרו שתוצאת המדידה מופיעה. אם ראיתם את הכפתור, ההתקנה הושלמה.
אם הכפתור לא מופיע, פתחו את כלי המפתחים בדפדפן (F12 ← לשונית Console) וחפשו הודעות שגיאה מ-photta או sdk.js. הבעיה הנפוצה ביותר היא אי-התאמה בדומיין: דומיין החנות שלכם חייב להיות רשום תחת Settings ← Allowed Domains בלוח הבקרה לעסקים. הוסיפו אותו שם, המתינו 30 שניות וטענו מחדש את דף המוצר.
שלב 5: התאמת צבעי הווידג'ט למותג שלכם
כברירת מחדל, הווידג'ט משתמש בפלטת הצבעים הכהה והניטרלית של Photta. כדי להתאים אותו למותג שלכם, הוסיפו מאפייני data לאותו תג סקריפט: data-color-primary עבור צבע כפתור ה-CTA (ערך 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 חושף מאפייני CSS מותאמים אישית תחת ה-namespace של --photta-* שבהם ניתן להשתמש ב-CSS של התבנית. תוכנית Growth ומעלה מאפשרת גם להסתיר את תגית 'Powered by Photta' דרך לוח הבקרה תחת Customize ← Branding. השינויים חלים בזמן אמת לאחר השמירה — אין צורך בפריסה מחדש או בעדכון הווידג'ט.