الخطوة 1: احصل على مفتاح أداة Photta الخاص بك
قم بتسجيل الدخول إلى لوحة تحكم Photta Business على business.photta.app. انتقل إلى الإعدادات ← مفاتيح API وحدد موقع مفتاحك القابل للنشر — يبدأ بـ pk_live_ ويبدو مثل pk_live_xxxxxxxxxxxxxxxxxxxxxxxx. انقر فوق أيقونة النسخ بجوار المفتاح. هذا هو الاعتماد الوحيد الذي تحتاجه لتكامل Shopify؛ لا تقم أبدًا بلصق مفتاحك السري sk_live_ في أي كود أمامي (frontend).
إذا لم يكن لديك حساب بعد، فانقر فوق 'بدء التجربة المجانية' في صفحة Photta Business. تمنحك التجربة 50 عملية تجربة مجانية دون الحاجة لبطاقة ائتمان. سيكون مفتاح pk_live_ متاحًا فور تأكيد بريدك الإلكتروني وتسجيل نطاق متجرك في الإعدادات ← النطاقات المسموح بها.
الخطوة 2: افتح كود قالب Shopify الخاص بك
في لوحة تحكم أدمن Shopify، انتقل إلى المتجر عبر الإنترنت ← القوالب. بجوار قالبك النشط، انقر فوق قائمة النقاط الثلاث واختيار تعديل الكود. يفتح محرر الكود شجرة ملفات على اليسار. قم بتوسيع مجلد 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).
انقر فوق حفظ في الزاوية العلوية اليمنى من محرر الكود. سيقوم Shopify بحفظ الملف وعرض إشعار تأكيد أخضر. لا تقم بنشر إصدار قالب جديد أو القيام بأي شيء آخر — التغيير يصبح مباشرًا على قالبك النشط في اللحظة التي تنقر فيها على حفظ.
الخطوة 4: التحقق من تحميل الأداة بشكل صحيح
افتح أي صفحة منتج في واجهة متجرك في تبويب متصفح جديد (استخدم نافذة تصفح خفي لتجاوز أي تخزين مؤقت لجلسة تسجيل الدخول). قم بالتمرير لأسفل إلى قسم المنتج — يجب أن ترى زر 'جربه الآن' بالقرب من زر إضافة إلى السلة. انقر فوقه، وقم بتحميل صورة اختبارية، وتأكد من ظهور نتيجة التجربة. إذا رأيت الزر، فهذا يعني أن التثبيت قد اكتمل.
إذا لم يظهر الزر، افتح وحدة تحكم مطوري المتصفح (F12 ← تبويب Console) وابحث عن أي رسائل خطأ من photta أو sdk.js. المشكلة الأكثر شيوعًا هي عدم تطابق النطاق: يجب إدراج نطاق متجرك ضمن الإعدادات ← النطاقات المسموح بها في لوحة تحكم الأعمال. أضفه هناك، وانتظر 30 ثانية، ثم أعد تحميل صفحة المنتج.
الخطوة 5: تخصيص ألوان الأداة لتناسب علامتك التجارية
بشكل افتراضي، تستخدم الأداة لوحة ألوان Photta الداكنة المحايدة. لمطابقتها مع علامتك التجارية، أضف سمات بيانات إلى نفس وسم النص البرمجي: data-color-primary للون زر الدعوة لاتخاذ إجراء (قيمة هيكس، مثل #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 مخصصة في مساحة الاسم --photta-* والتي يمكنك استهدافها من ملف CSS الأساسي لقالبك. تتيح لك خطة النمو وما فوقها أيضًا إخفاء شارة 'Powered by Photta' عبر لوحة تحكم الأعمال ضمن تخصيص ← العلامة التجارية. يتم تطبيق التغييرات في الوقت الفعلي بعد الحفظ — لا حاجة لإعادة النشر أو تحديث الأداة.