كيف تشغّل صفحات Framer مع متجر Shopify

ابنِ صفحات الهبوط في Framer للحملات، وأبقِ السلة والدفع داخل متجر Shopify. ورابط السلة ينقل المشتري ويملأ سلته نيابة عنه. أمران يكسران هذا الإعداد. تحليلاتك تتشوش بسبب نطاقين، وأسعارك تتباعد. وتستطيع إصلاح الاثنين في فترة بعد الظهر.

افصل صفحات Framer عن متجر Shopify

يأخذ Framer الصفحات التي تغيّرها كثيرًا وتريد حرية تصميم فيها: صفحات هبوط الحملات، والمقالات الإعلانية، وقصة العلامة، وصفحات الإطلاق، ونتائج الاختبارات التفاعلية. ويحتفظ Shopify بكل ما يتعلق بالمال: صفحات المنتجات، والمجموعات، والسلة، والدفع، وحسابات العملاء، وحالة الطلب. لا تعد بناء صفحة الدفع.

ينجح هذا الفصل لأن المجموعتين تؤديان مهمتين مختلفتين وتُحرَّران بوتيرتين متباعدتين جدًا. ستنشر أربع نسخ من صفحة هبوط هذا الشهر، ولن تلمس الدفع ولا مرة.

التسليم يتم برابط سلة

يوثّق Shopify صيغة رابط تملأ السلة مباشرة من وصلة. وجّه زر Framer إلى yourstore.com/cart/VARIANT_ID:QUANTITY. وأضف خصمًا عبر ?discount=CODE. وأضف أكثر من منتج بفاصلة، مثل cart/11111:1,22222:2. وأضف ?storefront=true إن أردت أن يهبط المشتري على صفحة السلة بدل الذهاب إلى الدفع مباشرة.

تجد معرّف الـ variant في رابط لوحة Shopify حين تفتح أحد الخيارات. واحتفظ برابط واحد لكل عرض في ملاحظة مشتركة. فمعرّف variant خاطئ يرسل كل مشترٍ إلى حجم عبوة خاطئ، ولن تكتشفه إلا في تقرير التجهيز.

أصلح التتبّع قبل أن تنفق دولارًا على الإعلانات

هنا تنكسر معظم إعدادات Framer مع Shopify بصمت. يبدأ الزائر على نطاق Framer وينتهي على دفع Shopify. وبلا الإعداد الصحيح، يحسب GA4 الجلسة الواحدة جلستين، ويفقد Meta الرابط بين النقرة والشراء.

افعل أربعة أشياء. أضف النطاقين إلى قائمة القياس عبر النطاقات في GA4، أو ضعهما على النطاق الجذر نفسه. ركّب بكسل Meta في Framer، ومرة أخرى عبر Shopify Customer Events. ومرّر وسوم UTM عبر رابط السلة ليبقى المصدر بعد القفزة. ثم نفّذ عملية شراء اختبارية حقيقية وتأكد أنها تظهر مرة واحدة في GA4 ومرة واحدة في Meta، لا مرتين ولا صفر مرة.

أبقِ السعر صادقًا في نظامين

في اللحظة التي تقول فيها صفحة Framer 49 دولارًا ويحصّل Shopify 54، تحصل على طلبات استرداد ومشكلة في التقييمات. اكتب السعر في مكان واحد بالضبط في كل صفحة. ولا تضعه أبدًا داخل صورة مصدّرة، ولا داخل رسم الهيرو الذي استغرق منك ساعتين.

وحالما تتجاوز ثلاث صفحات هبوط، انقل العرض إلى مجموعة في Framer CMS بحقول للسعر وسعر المقارنة ورابط السلة وحالة المخزون. عندها يحدّث تعديل واحد كل الصفحات. واضبط تذكيرًا شهريًا لفتح كل صفحة حية بجانب منتجها في Shopify والتأكد من تطابقهما.

احمِ السرعة التي دفعت ثمنها

صفحات Framer تبدأ سريعة. ثم يضيف أحدهم أداة محادثة، ومسجّل خرائط حرارة، وبكسلين، وتضمين مراجعات، فيستغرق الهيرو أربع ثوانٍ على شبكة 4G. وحد Largest Contentful Paint لدى Google هو 2.5 ثانية عند المئين 75 من زيارات الجوال الحقيقية. هذه هي ميزانيتك للصفحة كاملة.

قدّم صورة الهيرو بالحجم الذي تُعرض به فعلًا. واستثنِها من التحميل الكسول. وحمّل أدوات المراجعات تحت الشاشة الأولى فقط. واختبر على جوال حقيقي عبر بيانات جوال مخنوقة بدل سطح مكتب على واي فاي المكتب.

متى يكون Framer الأداة الخاطئة

كتالوج من 200 وحدة تخزين مع فلترة وبحث وتغيّر مخزون يومي مكانه Shopify، ويُستعمل Framer لصفحات الحملات فقط. وFramer يستحق مكانه حيث تحسم جودة التصميم وسرعة التكرار النتيجة، وهذا يعني صفحات الهبوط لا تصفّح الكتالوج.

الإعداد، بالترتيب

اربط نطاق Framer عندك. ابنِ صفحة هبوط واحدة ورابط سلة واحدًا. أضف البكسل على المنصتين ومرّر وسوم UTM عبر الرابط. نفّذ عملية شراء حقيقية واحدة وتتبّعها في GA4 وMeta وطلب Shopify. وعند ذلك فقط وجّه ميزانية الإعلانات إليها.

خصّص يومًا لتلك الصفحة الأولى وساعة لكل صفحة بعدها. السرعة هي كل سبب تشغيل هذه المنظومة، فالزاوية الجديدة يجب أن تصير حية في فترة بعد ظهر واحدة بدل سبرنت كامل.