كيف المتقدمة Shopify تطوير مخصص يخلق تجربة مستخدم أفضل

بالنسبة إلى Paravel ، بائع حقائب وحقائب وإكسسوارات السفر الأخرى عالية الجودة والمبتكرة والمسؤولة ، فإن الوظائف المخصصة أمر لا بد منه. المنتجات التي ينتجونها ويبيعونها فريدة من نوعها ، لذا كان من الضروري تقديم تجربة تسوق فريدة من نوعها لعملائهم.

احتاجت Paravel إلى الكثير من وظائف التجارة الإلكترونية الأساسية لتمكينها من تشغيل العمليات العملية من خلال متجرها عبر الإنترنت. في الأصل ، تم بناؤها على منصة مفتوحة المصدر تسمى Spree ، والتي لديها الكثير من الأتباع والمؤيدين بسبب حقيقة أنها منصة مفتوحة المصدر.

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

في حين أن هذه مجرد لقطة سريعة لمختلف الميزات الوظيفية لـ Spree ، فإن بعضها يأتي بنفس التكلفة العالية مثل المنصات مفتوحة المصدر الأخرى. قد تكون وظائفهم غير محدودة تقريبًا ، لكنها تتطلب الكثير من وقت التطوير وحتى المزيد من الخبرة لإنجازها. بدون خبرة تشفير واسعة النطاق أو خلفية في التطوير ، يمكن لمنصات مثل Spree استنفاد الموارد بسرعة.

احتاجت Paravel إلى تجربة تسوق فريدة من نوعها ، لكنها احتاجت أيضًا إلى حل خارج الصندوق يقدم الكثير لتجار التجارة الإلكترونية. كانت المشكلة بالنسبة لهم هي كيف يمكنهم الحصول على متجر التجارة الإلكترونية المصمم والمطور بدقة من Spree إلى منصة أكثر قدرة؟

عملية ترحيل شاملة

بعد التواصل مع فريق المبيعات لدينا ، قررت بارافيل أن الانتقال إلى Shopify Plus كان الحل - مع بعض الشروط. من بين أشياء أخرى ، لم يرغب Paravel في تجربة أي آثار سلبية من الترحيل وأرادوا أن يقدم متجرهم الجديد جميع وظائف متجر Spree الخاص بهم ثم البعض. للقيام بذلك ، احتاج Paravel إلى أكثر من شريك Shopify Plus - لقد احتاجوا إلى خبير Shopify Plus.

بينما تقدم Spree خيارات غير محدودة تقريبًا للتخصيص ، Shopify Plus ، كمنصة SaaS للتجارة الإلكترونية المستضافة ، يمكن أن تقدم لهم أكثر من ذلك بكثير. بمساعدة فريق تطوير مثل 1Digital ^Ⓡ ، يمكن لـ Shopify Plus أن تقدم لهم جميع التخصيصات التي قدمتها Spree والمزيد. عرض Shopify Plus أيضًا ميزات أمان عالية ، ووقت تشغيل مضمون ، وسرعة موقع سريعة ، وتوافق مماثل مع تطبيقات ومكونات الطرف الثالث ، وقبول عدد من خيارات الدفع ، وقابلية التوسع الهائلة ، وأكثر من ذلك بكثير. كان Paravel ، في هذه المرحلة ، مكلفًا بنقل متجر Spree الحالي ، وتصميمه ووظائفه ، إلى Shopify Plus.

بالنسبة للبعض ، فإن عملية ترحيل موقع الويب مروعة ، لكننا عرفنا خلاف ذلك. مع مئات من عمليات الترحيل الناجحة في الخلفية وفريق من المطورين لدعم جهودنا ، كنا نعلم أنه يمكن القيام بذلك دون أي مشكلة على الإطلاق. سيستغرق الأمر فقط عملية شاملة.

كانت العملية مكثفة ، لكن لم تتمكن وكالة ^1Digital Ⓡ من تنفيذها بألوان متطايرة. تطلب المشروع ترحيل 32 حقل منتج (بما في ذلك الأسماء والأوصاف والصور والأسعار والمزيد) بالإضافة إلى أكثر من 4000 حساب وطلبات عملاء لكل منها. للقيام بذلك ، قمنا بإعداد خادم Linux مؤقت وكتبنا برنامجًا نصيًا مخصصًا لرسم هذه المعلومات وتصنيفها من مخزون Spree لموقعهم الأصلي.

لنقله ، أنشأنا برنامجًا نصيًا مخصصًا آخر للاتصال بـ Shopify API قبل استيراد جميع الحقول ذات الصلة بشكل صحيح. أثناء العملية وبعدها ، تم فحص البيانات للتأكد من وصولها بشكل صحيح إلى المتجر الجديد ، بحيث لا يتم فقد أي شيء فحسب ، بل سيتم نشرها جميعًا في المكان الذي كان من المفترض أن تذهب إليه.

حالت عمليتنا الشاملة دون فقدان البيانات ، ولكن ماذا عن فقدان حركة المرور؟ إذا كان هناك شيء واحد يوقف عملاء التجارة الإلكترونية من احتمال إعادة النظام الأساسي (حتى لو كان سيأتي بمزايا ضخمة) ، فهو الخوف من فقدان حركة المرور أو سلطة المجال.

لحسن الحظ ، تمنع عملية الترحيل الخاصة بنا إتلاف مُحسّنات محرّكات البحث بدقة بقدر ما تمنع فقدان البيانات. باستخدام Paravel ، كما فعلنا مع كل مشروع ترحيل ، قمنا بجمع جميع عناوين URL المرتبطة بموقعهم على الويب ثم قمنا بإعداد 301 إعادة توجيه إلى عناوين URL المرتبطة على موقع Shopify الجديد. ليس من المستغرب أن Paravel لم تتكبد أي خسارة في حركة المرور أو تقلب في الترتيب بعد اكتمال الترحيل.

الدعم - فقط في حالة

انتقل الترحيل إلى Shopify دون حدوث فواق ، وكان Paravel في طريقه إلى متجر جديد Shopify Plus مع وظائف محسّنة وتجربة مستخدم أفضل ، ولكن لمجرد أن نكون آمنين ، قمنا بتضمين فترة دعم مجانية مدتها 30 يومًا مع مشروع الترحيل . يجب على أي وكالة هجرة Shopify لديها عملية مثبتة القيام بذلك ؛ إنها مجرد جزء لا يتجزأ من استراتيجية ترحيل ناجحة.

يختلف طول فترات الدعم المجاني وفقًا لنطاق المشروع ، ولكن في حالة ترحيل Paravel ، فقد خصصنا 30 يومًا. لقد منحهم هذا وقتًا لمدة شهر كامل للتحقيق في موقع الويب الجديد الخاص بهم ومعالجة أي أخطاء ترحيل قد تظهر - والتي سنقوم بإصلاحها مجانًا.

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

موقع تم تطويره حديثًا

لكن الهجرة لم تنته بعد. كان لدى Paravel معايير للنقل مرتبطة بتجربة العميل التي سيقدمها الموقع الجديد ، ولضمان ذلك ، كان علينا تطوير موقع Shopify Plus جديد تمامًا لهم.

كجزء من مشروعهم ، قام مطورو وكالة ^{1Digital Ⓡ} بصياغة صفحة رئيسية جديدة لهم والتي كانت متكاملة مع العلامة التجارية بشكل أفضل وساعدت في وضع منتجاتهم في مكان مرغوب فيه أكثر. لقد تضمنت صورًا محدثة للمنتج والخلفية تتماشى بشكل أفضل مع اهتمامات وتصورات السوق المستهدفة. ضع في اعتبارك الانطباع الأنيق والمتطور للصفحة الرئيسية الجديدة ، أدناه ، مع وجود صورة ثابتة للصفحة الرئيسية القديمة تحتها.

بالنسبة لزوار صفحتهم الرئيسية ، فإن التصميم الجديد مذهل على الفور ليس فقط من حيث الجماليات الفائقة للصور ولكن أيضًا للجهود المتضافرة التي يبذلها لوضع قيمة منتجات Paravel في المقدمة والوسط. ستلاحظ أيضًا أن هناك قائمة في الجزء العلوي من تخطيط الصفحة الرئيسية الجديدة التي كانت تفتقر إلى التصميم السابق ؛ كانت طريقة الوصول إلى منتجاتهم سابقًا عن طريق التمرير لأسفل في الصفحة حيث يوجد زر بعنوان "تسوق المجموعة". تتميز الصفحة الجديدة بميزات تنقل أفضل في الموقع ، كما ترى أعلاه.

بالتمرير لأسفل الصفحة الرئيسية ، يمكن للزوار مشاهدة المراجعات عبر لافتة منزلقة ، ومعرفة المزيد حول فئات المنتجات الشائعة ، وحتى معرفة كيفية استخدام العملاء للمنتجات عبر وسائل التواصل الاجتماعي ، كما ترى في بعض لقطات الشاشة أدناه.

بالإضافة إلى الصفحة الرئيسية ، 1Digital ^{Ⓡ صممت} قالب صفحة فئة جديد مع صفحة "قصتنا" لـ Paravel ، فوق العديد من صفحات النظام الأخرى. من بين تلك الصفحات التي تم تطويرها كانت صفحات عربة التسوق والدفع ، وصفحات تسجيل الدخول ، وصفحات شهادات الهدايا ، وصفحات "شكرًا لك". أخيرًا ، قمنا بتخصيص عدد من صفحات المحتوى بما في ذلك صفحات "الأسئلة الشائعة" و "الشروط".

تعد أهمية تصميم موقع ويب سريع الاستجابة عالي الجودة أمرًا بالغ الأهمية للتجارة الإلكترونية في الوقت الحاضر ، وكان مطورو ^1Digital حريصين على إعداد موقع ويب مستجيب محدث لـ Paravel كجزء من المشروع. لصالح تجربة مستخدم Paravel ، يتكيف التصميم الجديد المتجاوب بواسطة ^1Digital تلقائيًا مع الشاشات الأصغر حجمًا وتغيير حجم النص وإعادة تنسيقه وفقًا لذلك.

التطوير المتقدم - وظائف صفحة الفئة

عندما قام مطورو ^1Digital بنقل جميع المعلومات المرتبطة بفئات منتجات Paravel ، أضفنا أيضًا بعض الوظائف الجديدة لهم لتمريرها إلى عملائهم وبالتالي تحسين تجربة العملاء.

لقد قمنا بتثبيت محرر Metafield في قالب صفحة الفئة الخاصة بهم حتى يتمكن Paravel من إجراء تغييرات سريعة على بعض الشارات التي ظهرت على عرض صفحة الفئة الخاصة بهم. سمح لهم ذلك بتعديل الحقول المخصصة بحيث يمكن عرض العروض الترويجية المرتبطة بالمنتجات "الجديدة" أو "الأكثر مبيعًا" أو "المميزة" بشكل أكثر بروزًا.

هذه الميزة التي تبدو بسيطة تعطي الكثير من القوة لمسؤولي Paravel لإجراء تغييرات سريعة وسهلة على عرض موقع الويب الخاص بهم دون العمل مع مطور. يمكن إعطاء رجل سمكة أو تعليم الفن ، وقد قدمنا ​​تعليمات مفصلة إلى Paravel حول كيفية استخدام التطبيق وإدارته حتى يتمكنوا من إجراء التغييرات بسهولة حتى بعد إغلاق المشروع.

وبالمثل ، أنشأ ^{مطورو 1Digital عينات} المنتج ووظيفة العرض السريع على صفحات مجموعات Paravel. قمنا بإنشاء برنامج نصي مخصص لصفحة مجموعات Shopify Plus الخاصة بهم والتي كانت قادرة على جلب وعرض المعلومات المطلوبة.

يضمن البرنامج النصي لهذه الحوامل أيضًا أنه عندما ينقر العميل على الحامل المرتبط باللون محل الاهتمام ، سيتم عرض صورة المنتج بهذا اللون. بالإضافة إلى ذلك ، سيعرض السعر المطبق المرتبط بالتغيير بالإضافة إلى أي خيارات "للتخصيص" ، أو ، إذا لزم الأمر ، رسالة "نفاد المخزون".

التطوير المتقدم - وظائف صفحة المنتج

تركز Paravel بشكل كبير على تجربة العملاء ، وعلى هذا النحو ، فقد تطلبوا قدرًا كبيرًا من الوظائف الإضافية من قالب صفحة المنتج ، بما في ذلك القدرات الإضافية للمساعدة في تخصيص تجربة التسوق.

لذلك ، كجزء من جانب التطوير المتقدم للمشروع ، ساعدت ^{1Digital Ⓡ} في إنشاء مجموعة جديدة وأفضل من الميزات لتخصيص تجربة التسوق على موقع الويب الخاص بهم ، وتحديدًا على صفحة المنتج الخاصة بهم.

قمنا بتكوين قالب صفحة المنتج الخاص بهم بحيث يتم عرضه بشكل مشابه لمتجر Spree القديم. ثم أنشأنا شريط "إضافة إلى عربة التسوق" الذي سيبقى في الجزء السفلي من عرض صفحة المنتج. كان هذا هو الجزء السهل.

قمنا أيضًا بتطوير أداة لقالب صفحة المنتج الخاصة بهم والتي من شأنها أن تسمح للمتسوقين بتخصيص تجربة المتسوق الخاصة بهم وجعلها أكثر واقعية. بالإضافة إلى تزويد عملائها بالقدرة على رؤية الشكل الذي ستبدو عليه حقيبة معينة (أو منتج آخر) باستخدام وظيفة الحامل الموضحة أعلاه ، تمنح Paravel عملاءها أيضًا القدرة على تخصيص منتجاتهم.

كان بارافيل مهتمًا بميزات تعزيز التحويل لأداة واقعية تسمح لعملائها برؤية شكل منتجاتهم حقًا بمجرد تخصيصها ، لذلك أنشأنا أداة تمكنهم من القيام بذلك.

عرضت الأداة التي أنشأناها لـ Paravel نافذة منبثقة تحتوي على الكلمات "تخصيص" عندما يزور أحد العملاء صفحة المنتج ، ثم أنشأنا أداة من شأنها أن تمكن العميل من تخصيص المنتج وفقًا لنمط ولون الحروف التي ستظهر على شكل حرف واحد فقط مع الأحرف الأولى من اسمها.

يتم عرض هذه الأداة كأداة على صفحة المنتج بعد أن ينقر العميل على "تخصيص" ومن السهل جدًا معالجتها وتخصيصها وفقًا لتفضيلاتهم. للتأكد من أن المنتج سيعرض التخصيص بشكل صحيح ، كان علينا إنشاء برنامج نصي مخصص يعرض بدقة الأحرف التي أدخلها العميل ، في النمط الذي حدده ، على المنطقة الصحيحة من المنتج ، كما يمكن رؤيته في الصورة أدناه. كمستوى أخير من الوظائف ، أنشأنا "قالب نايلون" من شأنه أن يمكّن عملاء بارافيل من تخصيص منتجاتهم بأحرف مطرزة بدلاً من الحروف المرسومة يدويًا أو الزينة.

كان هناك عدد قليل من التخصيصات التي أنشأناها لصفحات منتجات Paravel ، بما في ذلك تنفيذ أربع علامات تبويب من صفحات المنتج في متجر Spree القديم عبر ترميز HTML. قمنا أيضًا بإعادة إنشاء وظيفة "اختر مغامرتك الخاصة" من متجر Paravel's Spree ، والتي تمكن العملاء من إضفاء الطابع الشخصي على منتجات Paravel مع التصاميم المطلية والمرسومة يدويًا ، بالإضافة إلى بعض التخصيصات الأخرى للحفاظ على تكامل الوظيفة الأصلية التي ظهرت على متجر Spree.

التكامل مع التطبيقات الحرجة

لتأمين وظائف متجرهم الجديد Shopify Plus وضمان تجربة مستخدم سلسة وممتعة ، كان على 1Digital ^Ⓡ Agency أن تدمج متجر Paravel الجديد مع تطبيقاتها المهمة للأعمال.

من بين أمور أخرى ، اعتمد عملاء Paravel على المراجعات والشهادات التي تمكنت Paravel من رسمها وعرضها عبر YotPo ، والتي تأكدنا من دمجها بسلاسة بالنسبة لهم. اعتمدت Paravel أيضًا بشكل كبير على استخدام Zaius لمشاركة العملاء وإدارة علاقات العملاء ، لذلك قمنا بإجراء هذا التكامل بالإضافة إلى ما سبق ذكره.

علاوة على ذلك ، يستفيد Paravel من الوظائف التي توفرها ليس فقط مقاييس RJ ولكن أيضًا من خلال Talkable. توفر هذه التطبيقات بيانات قيمة لمسؤولي Paravel وتسمح ببرامج تسويق إحالة آمنة.

قامت 1Digital ^Ⓡ Agency بدمج جميع هذه التطبيقات مع متجر Paravel الجديد بالإضافة إلى ترميز وتطوير موقع Shopify Plus الجديد. لقد انتهينا من هذا المشروع ، الشامل في نطاقه ، والذي يستلزم انتقالًا وتطويرًا مخصصًا متقدمًا ، دون توقف. وهذا يعني أن العميل لم يواجه أي انقطاعات لا داعي لها في العمل ، ولا خسارة في حركة المرور ، وانتقل إلى متجر تم تطويره حديثًا مع وظائف مخصصة متقدمة دون حدوث أي عوائق. للقيام بذلك يتطلب خبرة وعمليات شاملة ، وكلاهما ^1Digital يدمج في سير عملنا.

الحل الكامل

يقوم بعض المزودين بضبط خدماتهم على واحدة أو اثنتين من الخدمات المتخصصة للغاية ، لكننا نعلم أن المشكلات التي يواجهها تجار التجارة الإلكترونية متنوعة. إذا كنا قادرين فقط على تقديم خدمات التطوير ، فلن نتمكن من ترحيل Paravel من Spree إلى Shopify Plus ، وهي واحدة من منصات التجارة الإلكترونية الرائدة للتجار عبر الإنترنت. وبالمثل ، إذا اقتصرنا على أداء عمليات الترحيل ، فلن نتمكن من تخصيص متجرهم الجديد بالطريقة التي يريدونها.

Shopify Plus خدمات التصميم والتطوير ، حتى عند إقرانها بخدمات الترحيل الخاصة بنا ، ليست سوى لقطة صغيرة لما تقدمه وكالة ^1Digital . علاوة على خدمات التصميم المخصص الخاصة بنا في Shopify ، نقدم أيضًا حملات تسويق رقمية شاملة بما في ذلك حملات تحسين محركات البحث (SEO) و PPC ذات التنافسية العالية ، والتي تم بحثها بدقة ، واستهدافها.

تتوقف قصة النجاح هذه على حقيقة أننا كنا قادرين على ترحيل Paravel من Spree إلى متجر Shopify Plus المطور حديثًا مع وظائف متقدمة. تركز العديد من دراسات الحالة الأخرى الخاصة بالتجارة الإلكترونية على منصات التجارة الإلكترونية الأخرى مثل تصميم BigCommerce والتطوير ، وخدمات Magento المماثلة ، وحملات التسويق الرقمي. ألق نظرة على ذخيرتنا ، وإذا كنت تريد أن ترى كيف يمكننا حل المشكلات التي تواجه عملك على الإنترنت ، فاتصل بنا على 888-982-8269.

تحميل PDF