إنتقل إلى المحتوى الرئيسي

طريقة تغيير مكان قسم التسوق في المتجر

هذا الدليل لأي متجر يستخدم انستافيد ويريد تغيير مكان قسم التسوق الذي يظهر من إعدادات التجارة الاجتماعية.

الفكرة بسيطة: نحتاج أن نقول للنظام أين يضع قسم التسوق داخل الصفحة.

  1. هل نضع قسم التسوق قبل جزء معين في الصفحة؟
  2. أم نضعه بعد جزء معين؟
  3. وما هو هذا الجزء؟

أين أغيّر المكان؟​

  1. افتح لوحة تحكم انستافيد.
  2. افتح تبويب التجارة الاجتماعية.
  3. ابحث عن قسم اسمه مكان قسم التسوق.
  4. فعّل خيار تموضع مخصص.
  5. اختر الموضع:
    • قبل العنصر: يظهر قسم التسوق فوق القسم الذي اخترته.
    • بعد العنصر: يظهر قسم التسوق تحت القسم الذي اخترته.
  6. اختر نوع الهدف.
  7. ضع قيمة العنصر المستهدف.
  8. اضغط حفظ التجارة الاجتماعية.
  9. افتح المتجر وحدّث الصفحة.

📸 Screenshot Needed

Dashboard Section: انستافيد > التجارة الاجتماعية > مكان قسم التسوق UI State: خيار تموضع مخصص مفعّل. الحقول ظاهرة: الموضع، نوع الهدف، العنصر المستهدف. القيمة التجريبية: featured-products أو section.home-products. What to Capture: لوحة مكان قسم التسوق كاملة مع زر حفظ التجارة الاجتماعية إن كان ظاهرًا في نفس الشاشة. Suggested File: help-center/static/img/help/instafeed/change-shopping-section-placement.png RTL Note: واجهة عربية، لكن قيمة CSS selector أو Element ID تظهر LTR. Size: 1200×620px

ما معنى نوع الهدف؟​

يوجد نوعان مهمان:

1. Element ID​

استخدم هذا النوع إذا كان العنصر في الصفحة لديه id.

مثال:

<section id="featured-products">

في لوحة التحكم اكتب:

نوع الهدف: Element ID
العنصر المستهدف: featured-products

مهم: عند استخدام Element ID لا تكتب علامة #.

2. CSS selector​

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

مثال ID بطريقة CSS:

#featured-products

مثال كلاس:

.home-products

مثال صفة خاصة:

section[section-id="abc123"]

في لوحة التحكم اكتب:

نوع الهدف: CSS selector
العنصر المستهدف: section[section-id="abc123"]

كيف أعرف ID أو CSS selector للعنصر؟​

اتبع هذه الخطوات من الكمبيوتر:

  1. افتح صفحة المتجر.
  2. اذهب للمكان الذي تريد وضع قسم التسوق قبله أو بعده.
  3. اضغط بزر الفأرة اليمين على القسم.
  4. اختر Inspect أو فحص.
  5. سيظهر لك كود الصفحة.
  6. ابحث عن أقرب سطر كبير يلف القسم، وغالبًا يكون:
<section ...>

أو:

<div ...>

ثم اختر قيمة مناسبة من الأمثلة التالية.

📸 Screenshot Needed

Dashboard Section: واجهة المتجر > أدوات المطور في المتصفح UI State: صفحة المتجر مفتوحة مع Inspect على قسم منتجات أو سلايدر. السطر المحدد يحتوي id أو section-id أو class. What to Capture: جزء الصفحة المستهدف + لوحة Elements في المتصفح مع السطر المحدد. لا تظهر بيانات عملاء. Suggested File: help-center/static/img/help/instafeed/find-selector-in-browser-inspect.png RTL Note: واجهة المتجر قد تكون RTL، لكن كود HTML يظهر LTR وهذا طبيعي. Size: 1400×800px

إذا وجدت id​

مثال:

<section id="best-sellers">

استخدم:

نوع الهدف: Element ID
العنصر المستهدف: best-sellers

أو استخدمه كـ CSS selector:

نوع الهدف: CSS selector
العنصر المستهدف: #best-sellers

الأفضل والأسهل: استخدم Element ID.

إذا وجدت section-id​

مثال:

<section section-id="abc123">

استخدم:

نوع الهدف: CSS selector
العنصر المستهدف: section[section-id="abc123"]

إذا وجدت class​

مثال:

<section class="home-products">

استخدم:

نوع الهدف: CSS selector
العنصر المستهدف: .home-products

مهم: عند استخدام الكلاس، ضع نقطة . قبل الاسم.

مثال آخر:

<section class="home-products featured-section">

يمكنك استخدام:

.home-products

أو:

.featured-section

إذا كان الكلاس موجودًا في أكثر من مكان، قد يظهر قسم التسوق في المكان الخطأ.

كيف أتأكد أن الاختيار صحيح؟​

إذا كنت تعرف استخدام Console في المتصفح، جرّب هذا:

  1. افتح المتجر.
  2. اضغط بزر الفأرة اليمين.
  3. اختر Inspect.
  4. افتح تبويب Console.
  5. جرّب هذا الأمر مع CSS selector:
document.querySelector('ضع_الكود_هنا')

مثال:

document.querySelector('section[section-id="abc123"]')

إذا ظهر لك عنصر، فالاختيار صحيح.

ولو تريد التأكد أنه موجود مرة واحدة فقط:

document.querySelectorAll('section[section-id="abc123"]').length

الأفضل أن تكون النتيجة:

1

إذا كانت النتيجة 0، فالكود غير صحيح.

إذا كانت النتيجة أكبر من 1، فالكود موجود في أكثر من مكان وقد لا يكون مناسبًا.

أمثلة جاهزة​

أريد قسم التسوق فوق قسم المنتجات المميزة​

إذا كان الكود:

<section id="featured-products">

اكتب في لوحة التحكم:

الموضع: قبل العنصر
نوع الهدف: Element ID
العنصر المستهدف: featured-products

أريد قسم التسوق تحت قسم الأكثر مبيعًا​

إذا كان الكود:

<section class="best-sellers">

اكتب في لوحة التحكم:

الموضع: بعد العنصر
نوع الهدف: CSS selector
العنصر المستهدف: .best-sellers

أريد قسم التسوق فوق قسم لديه section-id​

إذا كان الكود:

<section section-id="abc123">

اكتب في لوحة التحكم:

الموضع: قبل العنصر
نوع الهدف: CSS selector
العنصر المستهدف: section[section-id="abc123"]

أشياء لا تفعلها​

  • لا تكتب اسم القسم مثل: فساتين سهرة.
  • لا تكتب رابط الصفحة.
  • لا تكتب الكود كاملًا مثل <section ...>.
  • لا تكتب # إذا اخترت Element ID.
  • لا تستخدم كلاس عام جدًا مثل .container أو .row أو .section.
  • لا تغيّر الكود إذا لم تكن متأكدًا.

متى أطلب المساعدة؟​

اطلب المساعدة إذا:

  • لم تجد id.
  • لم تجد section-id.
  • وجدت كلاس لكن موجود في أكثر من مكان.
  • تغيّر تصميم الصفحة ولم يعد قسم التسوق يظهر في المكان الصحيح.
  • لا تعرف أي سطر في الكود يمثل القسم المطلوب.

ملخص سريع​

إذا وجدت:

id="example"

استخدم:

Element ID
example

إذا وجدت:

class="example"

استخدم:

CSS selector
.example

إذا وجدت:

section-id="example"

استخدم:

CSS selector
section[section-id="example"]

استكشاف الأخطاء​

لم يتحرك قسم التسوق بعد الحفظ​

  • تأكد أن نوع الهدف يطابق القيمة التي كتبتها.
  • تأكد أنك اخترت قبل العنصر أو بعد العنصر حسب المكان المطلوب.
  • افتح المتجر في نافذة خاصة لتجنب الكاش.
  • تأكد أن القسم المستهدف موجود في الصفحة نفسها التي تختبرها.

📸 Screenshot Needed

Dashboard Section: واجهة المتجر > قسم التسوق بعد تغيير المكان UI State: قسم التسوق ظاهر فوق أو تحت القسم المستهدف في الصفحة، مع منتجات مرتبطة بالمنشورات. What to Capture: القسم المستهدف وقسم التسوق في نفس اللقطة حتى يظهر ترتيب "قبل/بعد" بوضوح. Suggested File: help-center/static/img/help/instafeed/shopping-section-storefront-result.png RTL Note: التقط من واجهة متجر عربية. أخفِ أسماء منتجات أو أسعار غير مناسبة للنشر إن لزم. Size: 1400×900px

اختفى قسم التسوق من الصفحة​

  • عطّل تموضع مخصص مؤقتًا واحفظ الإعدادات.
  • تأكد أن العنصر المستهدف لم يتم حذفه من القالب.
  • جرّب كود قسم آخر موجود في الصفحة.

مقالات ذات صلة​

آخر تحديث: 2026-06-11

آخر تحديث في