المتطلبات الأساسية
- حساب Shopify (تجربة مجانية متاحة)
- الوصول إلى لوحة تحكم Shopify
الخطوة الأولى: إنشاء متجرك على Shopify
إذا لم يكن لديك متجر Shopify بالفعل، اتبع هذه الخطوات (إذا كان لديك حساب بالفعل، انتقل إلى الخطوة الثانية):- انتقل إلى shopify.com وانقر على ابدأ التجربة المجانية
- أدخل بريدك الإلكتروني، أنشئ كلمة مرور، واختر اسم متجرك
- أكمل عملية الإعداد — أضف تفاصيل عملك، اختر خطة، وقم بتكوين التفضيلات
- أضف المنتجات، ونظّم المجموعات، وقم بإعداد بوابات الدفع
الخطوة الثانية: تثبيت تطبيق Headless
يتصل Framerfy بمتجرك عبر Shopify Storefront API لجلب البيانات. لتفعيل ذلك:- في لوحة تحكم Shopify، انتقل إلى الإعدادات ← التطبيقات وقنوات المبيعات
- انقر على متجر تطبيقات Shopify
- ابحث عن Headless وافتح التطبيق الصادر عن Shopify
- انقر على تثبيت، ثم فتح
الخطوة الثالثة: إنشاء واجهة متجر
- في تطبيق Headless، انقر على إضافة واجهة متجر
- أدخل اسمًا لواجهة متجرك
- ضمن قسم Storefront API، انقر على إدارة
- فعّل جميع الصلاحيات المطلوبة (الوصول للقراءة على المنتجات والمجموعات وعمليات الدفع والعملاء)
- انسخ رمز الوصول العام — هذا هو مفتاح API الخاص بك في Framerfy
الخطوة الرابعة: الحصول على نطاق متجرك
- انتقل إلى الإعدادات ← الصفحة الرئيسية
- انسخ نطاقك الأساسي (بالصيغة:
your-store.myshopify.com)
الخطوة الخامسة: تكوين Framerfy
الآن قم بربط متجر Shopify بـ Framerfy:- قم بزيارة framerfy.ae وسجّل باستخدام بريدك الإلكتروني
- بعد تسجيل الدخول، انتقل إلى صفحة النظرة العامة
- انقر على + إضافة متجر
- أدخل اسمًا للمتجر (لا يحتاج أن يطابق اسم متجر Shopify — هو فقط لراحتك)
- الصق رابط نطاق Shopify ورمز الوصول العام (من الخطوة الثالثة)
- انقر على حفظ
الخطوة السادسة: الوصول إلى الإضافة
لاستخدام Framerfy داخل Framer:- افتح مشروع Framer الخاص بك
- انقر على Plugins في شريط الأدوات
- ابحث عن Framerfy وافتحه
- انقر على تسجيل الدخول وأدخل بيانات الاعتماد (البريد الإلكتروني وكلمة المرور من الخطوة الخامسة)
- اختر متجرك وانقر على متابعة
- ستصل إلى الصفحة الرئيسية — إعداد الإضافة مكتمل ✅
الخطوة السابعة: جلب البيانات في CMS
لمزامنة منتجات Shopify إلى Framer CMS:- انتقل إلى صفحة CMS في Framer
- انقر على إدارة (متوفر في الرأس)
- اختر جميع الحقول التي تحتاجها لبناء موقعك
- انقر على تأكيد
- ستتزامن بيانات Shopify الآن مع Framer CMS
الخطوة الثامنة: استخدام المكونات المخصصة
بعد اكتمال الإعداد، افتح الإضافة للوصول إلى مكتبة المكونات. تتضمن مكونات جاهزة للاستخدام لتكامل Framer × Shopify:- محددات المتغيرات
- عروض صور المتغيرات
- عرض الأسعار
- زر إضافة إلى عربة التسوق
- زر الشراء
- نافذة عربة التسوق
- فلاتر الأسعار
- محددات الألوان
- محدد الكمية
تفاصيل الاتصال
لديك الآن كل ما تحتاجه للاتصال:| الحقل | القيمة |
|---|---|
| النطاق | your-store.myshopify.com |
| مفتاح API | رمز الوصول العام |
| الاسم | أعطِ اسمًا لمتجرك حتى تعرف المتجر المشار إليه |