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


واجهة المتجر بعد التحديث على الكمبيوتر والجوال، مأخوذة من القالب وهو يعمل على منتجات المتجر نفسه.
- الدور
- تصميم تجربة وواجهة وتطوير Shopify
- المنصة
- Shopify Liquid · Three.js
- النطاق
- القالب والرف ثلاثي الأبعاد وصفحات المنتج والمقاسات والسلة
- المتجر
- h2aa.store ↗
شاهد القطعة، لفّها، ثم اختر المقاس.
يقرر متسوق الملابس بناءً على أشياء قليلة: الأمام، والخلف، والمقاس، والسعر. وعلى الجوال تعرض الشبكة الثابتة الأمام فقط تقريبًا. لذلك يعلّق التحديث القطع على رف يتصفحه المتسوق بإبهامه، فيسحب القطعة للأمام ويلفّها قبل فتح صفحة المنتج.
الباقي Shopify معتاد لكن بعناية: صفحات منتج تبدأ بالقطعة نفسها، وإرشاد مقاس يجيب فورًا، وسلة تعرض التقدم نحو عرض الصيف. ويحتفظ المتجر بهويته ومجموعاته وبيانات المنتجات والمخزون الأصلية في Shopify.
رف ملابس تلفّه بإبهامك.
كل قطعة مبنية من صورة المنتج في المتجر: يتحول الشكل إلى قماش منحنٍ بسُمك حقيقي معلّق على شمّاعة. اسحب للتصفح، واضغط لسحب القطعة للأمام، واسحب لتلفّها. تتوقف الحركة عند اللمس، وتحترم إعداد تقليل الحركة.



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


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


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


ما تم التحقق منه
- 35 اختبارًا آليًا: الصفحات والمخزون والرفوف وأدوات المعرض والمقاسات والسلة
- فحص قالب Shopify بلا أخطاء مسجلة
- التسليم على نطاق المتجر نفسه ببيانات المنتجات والمخزون الأصلية
حدود العمل بوضوح
- لم يُقَس أي تغيير في المبيعات أو التحويل
- الرف تمثيل مبني على الصور، وليس مسحًا ثلاثي الأبعاد للقطعة
- حين لا توجد صورة خلفية للقطعة، يعرض الرف خلفية سادة مُعدّة؛ وتحتفظ صفحات المنتج بصور التاجر نفسه
- إرشاد المقاس تقريبي حتى تتوفر جداول مقاسات فعلية
رحلة التسوق من الرف إلى السلة.
تسجيل مدته 36 ثانية للمتجر بعد التسليم مع ترجمة عربية: المدخل، والرف، وصفحة منتج، والسلة.
أين يتردد متسوقوك؟
بين صورة المنتج واختيار المقاس والسلة تتراكم قرارات صغيرة. أخبرني أي جزء من متجرك يحتاج أن يصبح أوضح.