> ## Documentation Index
> Fetch the complete documentation index at: https://docs.framerfy.ae/llms.txt
> Use this file to discover all available pages before exploring further.

# البدء

> يرشدك هذا الدليل خلال إنشاء متجر Shopify وتهيئة Storefront API للتكامل مع Framerfy.

<iframe className="w-full aspect-video rounded-xl" src="https://www.youtube.com/embed/ksO88iQGNZk?si=17KBaNhUvcT84Vpz" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen />

## المتطلبات الأساسية

* حساب Shopify (تجربة مجانية متاحة)
* الوصول إلى لوحة تحكم Shopify

## الخطوة الأولى: إنشاء متجرك على Shopify

إذا لم يكن لديك متجر Shopify بالفعل، اتبع هذه الخطوات (إذا كان لديك حساب بالفعل، انتقل إلى الخطوة الثانية):

1. انتقل إلى [shopify.com](https://shopify.com) وانقر على **ابدأ التجربة المجانية**
2. أدخل بريدك الإلكتروني، أنشئ كلمة مرور، واختر اسم متجرك
3. أكمل عملية الإعداد — أضف تفاصيل عملك، اختر خطة، وقم بتكوين التفضيلات
4. أضف المنتجات، ونظّم المجموعات، وقم بإعداد بوابات الدفع

## الخطوة الثانية: تثبيت تطبيق Headless

يتصل Framerfy بمتجرك عبر Shopify Storefront API لجلب البيانات. لتفعيل ذلك:

1. في لوحة تحكم Shopify، انتقل إلى **الإعدادات ← التطبيقات وقنوات المبيعات**
2. انقر على **متجر تطبيقات Shopify**
3. ابحث عن **Headless** وافتح التطبيق الصادر عن Shopify
4. انقر على **تثبيت**، ثم **فتح**

## الخطوة الثالثة: إنشاء واجهة متجر

1. في تطبيق Headless، انقر على **إضافة واجهة متجر**
2. أدخل اسمًا لواجهة متجرك
3. ضمن قسم **Storefront API**، انقر على **إدارة**
4. فعّل جميع الصلاحيات المطلوبة (الوصول للقراءة على المنتجات والمجموعات وعمليات الدفع والعملاء)
5. انسخ **رمز الوصول العام** — هذا هو **مفتاح API** الخاص بك في Framerfy

## الخطوة الرابعة: الحصول على نطاق متجرك

1. انتقل إلى **الإعدادات ← الصفحة الرئيسية**
2. انسخ نطاقك الأساسي (بالصيغة: `your-store.myshopify.com`)

## الخطوة الخامسة: تكوين Framerfy

الآن قم بربط متجر Shopify بـ Framerfy:

1. قم بزيارة [framerfy.ae](https://framerfy.ae) وسجّل باستخدام بريدك الإلكتروني
2. بعد تسجيل الدخول، انتقل إلى صفحة **النظرة العامة**
3. انقر على **+ إضافة متجر**
4. أدخل اسمًا للمتجر (لا يحتاج أن يطابق اسم متجر Shopify — هو فقط لراحتك)
5. الصق **رابط نطاق Shopify** و**رمز الوصول العام** (من الخطوة الثالثة)
6. انقر على **حفظ**

أنت جاهز! متجرك متصل الآن بـ Framerfy.

## الخطوة السادسة: الوصول إلى الإضافة

لاستخدام Framerfy داخل Framer:

1. افتح مشروع Framer الخاص بك
2. انقر على **Plugins** في شريط الأدوات
3. ابحث عن **Framerfy** وافتحه
4. انقر على **تسجيل الدخول** وأدخل بيانات الاعتماد (البريد الإلكتروني وكلمة المرور من الخطوة الخامسة)
5. اختر متجرك وانقر على **متابعة**
6. ستصل إلى الصفحة الرئيسية — إعداد الإضافة مكتمل ✅

## الخطوة السابعة: جلب البيانات في CMS

لمزامنة منتجات Shopify إلى Framer CMS:

1. انتقل إلى صفحة **CMS** في Framer
2. انقر على **إدارة** (متوفر في الرأس)
3. اختر جميع الحقول التي تحتاجها لبناء موقعك
4. انقر على **تأكيد**
5. ستتزامن بيانات Shopify الآن مع Framer CMS

::: tip ملاحظة إذا أجريت تغييرات على منتجات Shopify، انقر على زر **مزامنة** في الرأس لسحب آخر التحديثات. :::

## الخطوة الثامنة: استخدام المكونات المخصصة

بعد اكتمال الإعداد، افتح الإضافة للوصول إلى **مكتبة المكونات**. تتضمن مكونات جاهزة للاستخدام لتكامل Framer × Shopify:

* محددات المتغيرات
* عروض صور المتغيرات
* عرض الأسعار
* زر إضافة إلى عربة التسوق
* زر الشراء
* نافذة عربة التسوق
* فلاتر الأسعار
* محددات الألوان
* محدد الكمية

اسحب وأفلت هذه المكونات في مشروع Framer الخاص بك لبناء واجهة متجرك.

::: tip ملاحظة نحن حاليًا في مرحلة ألفا. إذا كنت بحاجة إلى مكون غير موجود، أرسل طلبًا عبر نموذج **المساعدة والملاحظات** مع اسم المكون ووصفه. نحن نطور بناءً على ملاحظات المستخدمين — لا تتردد في التواصل. :::

## تفاصيل الاتصال

لديك الآن كل ما تحتاجه للاتصال:

| الحقل         | القيمة                                        |
| :------------ | :-------------------------------------------- |
| **النطاق**    | `your-store.myshopify.com`                    |
| **مفتاح API** | رمز الوصول العام                              |
| **الاسم**     | أعطِ اسمًا لمتجرك حتى تعرف المتجر المشار إليه |

أدخل هذه التفاصيل في إعدادات اتصال المتجر في Framerfy لإتمام التكامل.