ملابس شارع · تحديث متجر Shopify · مشروع عميل

H2A

تبيع H2A ملابس الشارع لمتسوقين يتصفحون من الجوال. أعدت بناء قالب Shopify حول تفاعل واحد: اسحب القطعة من رف ملابس ثلاثي الأبعاد، ولفّها، ثم اختر المقاس.

رئيسية H2A على الكمبيوتر: قمصان معلقة على رف ثلاثي الأبعاد وقطعة مسحوبة للأمام مع اسمها وسعرها.
الرف نفسه على الجوال مع أزرار السابق والتالي والإيقاف وزر اختيار المقاس.

واجهة المتجر بعد التحديث على الكمبيوتر والجوال، مأخوذة من القالب وهو يعمل على منتجات المتجر نفسه.

الدور
تصميم تجربة وواجهة وتطوير Shopify
المنصة
Shopify Liquid · Three.js
النطاق
القالب والرف ثلاثي الأبعاد وصفحات المنتج والمقاسات والسلة
المتجر
h2aa.store ↗

شاهد القطعة، لفّها، ثم اختر المقاس.

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

الباقي Shopify معتاد لكن بعناية: صفحات منتج تبدأ بالقطعة نفسها، وإرشاد مقاس يجيب فورًا، وسلة تعرض التقدم نحو عرض الصيف. ويحتفظ المتجر بهويته ومجموعاته وبيانات المنتجات والمخزون الأصلية في Shopify.

الرف

رف ملابس تلفّه بإبهامك.

كل قطعة مبنية من صورة المنتج في المتجر: يتحول الشكل إلى قماش منحنٍ بسُمك حقيقي معلّق على شمّاعة. اسحب للتصفح، واضغط لسحب القطعة للأمام، واسحب لتلفّها. تتوقف الحركة عند اللمس، وتحترم إعداد تقليل الحركة.

مدخل العلامة بشعار H2A الكروم الدوّار وزر دخول المتجر
مدخل العلامةمدخل واحد، ويمكن إيقاف الحركة
رف الصيف على الجوال وقطعة مسحوبة للأمام
تصفح الرفاسحب، واضغط، وقرّب القطعة
القطعة نفسها ملفوفة على الشمّاعة لتظهر من الخلف
لفّ القطعةاسحب لترى الجانب والخلف
المواسم

لكل موسم رفّه الخاص.

تفتح مجموعتا الصيف والشتاء على رفين بمنتجاتهما، ويأتي الكتالوج الكامل أسفلهما. ويوضح مفتاح المواسم أين أنت الآن.

صفحة مجموعة الصيف على الجوال
الصيفتيشيرتات وشورتات
صفحة مجموعة الشتاء على الجوال مع هوديز وكرونيك على الرف
الشتاءهوديز وكرونيك
صفحة المنتج

القطعة أولًا، ثم طريق واحد واضح للمقاس.

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

صفحة المنتج على الكمبيوتر مع المعرض والاسم والسعر وأزرار المقاسات
صفحة المنتج على الكمبيوترالمعرض والسعر والمقاسات جنبًا إلى جنب
أداة اعرف مقاسك على الجوال مع حقلي الطول والوزن ومقاس مقترح
اعرف مقاسكتقدير فوري موسوم بوضوح
السلة

العرض ظاهر في المكان المهم.

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

صفحة المنتج على الجوال مع صورة القطعة والاسم والسعر
صفحة المنتجاختر المقاس لإضافتها
السلة على الجوال مع المقاس المختار وسطر التقدم نحو عرض الصيف
السلةالمقاس في كل سطر والتقدم نحو العرض

ما تم التحقق منه

  • 35 اختبارًا آليًا: الصفحات والمخزون والرفوف وأدوات المعرض والمقاسات والسلة
  • فحص قالب Shopify بلا أخطاء مسجلة
  • التسليم على نطاق المتجر نفسه ببيانات المنتجات والمخزون الأصلية

حدود العمل بوضوح

  • لم يُقَس أي تغيير في المبيعات أو التحويل
  • الرف تمثيل مبني على الصور، وليس مسحًا ثلاثي الأبعاد للقطعة
  • حين لا توجد صورة خلفية للقطعة، يعرض الرف خلفية سادة مُعدّة؛ وتحتفظ صفحات المنتج بصور التاجر نفسه
  • إرشاد المقاس تقريبي حتى تتوفر جداول مقاسات فعلية
جولة مسجلة

رحلة التسوق من الرف إلى السلة.

تسجيل مدته 36 ثانية للمتجر بعد التسليم مع ترجمة عربية: المدخل، والرف، وصفحة منتج، والسلة.

التالي

أين يتردد متسوقوك؟

بين صورة المنتج واختيار المقاس والسلة تتراكم قرارات صغيرة. أخبرني أي جزء من متجرك يحتاج أن يصبح أوضح.