بانر Hero في Horizon: المقاسات والإعدادات مباشرةً من الكود

Horizon هو الثيم الذي يوفره Shopify للمتاجر الجديدة، وقسم Hero فيه هو أول ما يلمسه معظم التجار. يعرض لك محرر الثيم قائمة منسدلة للارتفاع بستة خيارات وخانة لصورة. لكنه لا يخبرك أن ثلاثة من هذه الخيارات تغيّر وحدة قياسها بحسب عرض الشاشة، ولا أن “Large” هنا تعني شيئًا مختلفًا تمامًا عن “Large” في Dawn.

كيف حصلنا على هذه الأرقام. في 1 سبتمبر 2026 قرأنا مستودع Shopify/horizon العام عند الـ commit رقم 8b42ace (2026-08-31) — فـ Horizon لا يصدر إصدارات ولا وسوم، لذا فإن الـ commit هو النسخة. أخذنا مخطط الإعدادات وسلالم srcset من sections/hero.liquid، وهو 1496 سطرًا؛ ومتغيّرات الارتفاع من snippets/theme-styles-variables.liquid؛ وقواعد القسم من assets/base.css. أما أوصاف البلوكات فقد استُخلصت من مكتبة blocks/ المشتركة في الثيم، لأن مخطط hero يسمّيها فقط. كل رقم هنا استُخرج من تلك الملفات بواسطة سكربت.

الارتفاعات تغيّر وحدتها مع اتساع الشاشة

هذا هو الجزء الذي يفاجئ الناس. Horizon لا يمتلك ارتفاعًا واحدًا لكل خيار — بل ثلاثة، عبر نقطتي انقطاع، والوحدة تتبدّل:

تحت 40em تكون الارتفاعات ثابتة بوحدة rem. وفوقها تصبح svh، وهي وحدة ارتفاع إطار العرض الصغير — أي نسبة مئوية من الشاشة المرئية. لذا فإن hero بحجم Large على الهاتف يكون بارتفاع ثابت 560px، وعلى سطح مكتب عريض يكون 80% من أي ارتفاع تكون عليه نافذة الزائر.

وهناك ارتفاعان آخران يتجاوزان الجدول تمامًا. full-screen يضبط 100svh. وcustom يُظهر شريط تمرير، section_height_custom، يمتد من 0 إلى 100% بقيمة افتراضية 50 — وهذه القيمة تُكتب أيضًا مباشرةً بوحدة svh، لا بالبكسل.

لماذا لا تساوي “Large” هنا “Large” في Dawn

كلا الثيمين يوفر hero بحجم Large. لكنهما غير قابلين للمقارنة، لسببين منفصلين.

أساس rem مختلف. بحثنا في كل ملف من ملفات الثيم: Horizon لا يتجاوز مطلقًا حجم الخط الجذري، لذا فإن 1rem هي الحجم الافتراضي للمتصفح، 16px. أما Dawn فيضبط font-size: calc(var(--font-body-scale) * 62.5%)، وهو ما يجعل 1rem تساوي 10px. القيمة نفسها 35rem تعني 560px في Horizon و350px في Dawn.

الوحدة مختلفة فوق نقطة الانقطاع. Large في Dawn ارتفاع ثابت 720px على سطح المكتب، وهو نفسه على كل شاشة. أما Large في Horizon فهي 80svh، فتنمو مع الشاشة: نحو 720px على نافذة بارتفاع 900px، ونحو 1152px على نافذة بارتفاع 1440px.

إذا كنت تنقل تصميمًا بين الثيمين، فهذا هو الإعداد الأكثر احتمالًا لأن يفسده.

مقاسات الصور بدقة

يبني Horizon قيمة srcset من سلّمين مكتوبين بشكل ثابت في الكود، في السطرين 103 و105 من القسم:

ارفع صورة بعرض 3840px إذا كان الـ hero يمتد على عرض الصفحة. أما السلّم الأضيق فينتهي عند 1600px لأن كل صورة هناك لا تشغل إلا جزءًا من العرض.

لاحظ الدرجة الأدنى: Horizon يبدأ من 832px حيث يبدأ Dawn من 375px. Horizon لا يقدّم ببساطة نسخة بمقاس الهاتف من صورة hero بعرض كامل، وهذا أمر يجدر معرفته إذا كانت زياراتك في معظمها من الموبايل وعلى اتصالات بطيئة.

البلوكات ليست في هذا الملف

Dawn يصف بلوكاته داخل مخطط القسم. أما Horizon فيسمّيها ويحفظ الأوصاف في مكتبة مشتركة، لذا فإن قراءة sections/hero.liquid وحده لا تخبرك بشيء عن قدرات البلوك. وبعد استخلاصها، تحمل الأنواع الثمانية 104 إعدادات بينها:

@theme هو محرف بدل: يقبل أي بلوك من بلوكات الثيم، ولهذا لا يمتلك إعدادات خاصة به. أما group فهو الأثقل بـ 36 إعدادًا، لأنه حاوية تخطيط تكرّر معظم ضوابط المحاذاة والتباعد الخاصة بالقسم نفسه على مستوى أدنى.

للمقارنة: بانر الصورة في Dawn يقدّم 3 أنواع من البلوكات تحمل 12 إعدادًا في المجموع. أما Hero في Horizon فيقدّم 8 أنواع تحمل 104. هذا هو الفرق الحقيقي بين الثيمين، وهو غير مرئي في أي مكان داخل محرر الثيم.

كل إعداد على القسم

36 إعدادًا، كما تظهر في المحرر:

مما يجدر الإشارة إليه:

أربعة إعدادات محاذاة منفصلة. horizontal_alignment وvertical_alignment تنطبقان عندما يتدفق المحتوى في صف؛ أما horizontal_alignment_flex_direction_column وvertical_alignment_flex_direction_column فتنطبقان عندما يتراكم عموديًا. غيّر أحدها ويبقى الآخر على قيمته القديمة، وهذا هو السبب المعتاد في أن يبدو الـ hero صحيحًا على سطح المكتب وخاطئًا على الموبايل.

reflection_opacity — شريط تمرير من 0 إلى 100%، افتراضيًا 75، مقترن بـ blurred_reflection. ولا يوجد ما يعادله في Dawn.

أربع خانات للصور وأربع خانات للفيديو. الـ hero يأخذ الوسائط مرتين — واحدة لسطح المكتب ومجموعة موبايل منفصلة خلف custom_mobile_media، وقيمته الافتراضية false.

كيف تتحقق من هذا بنفسك

افتح sections/hero.liquid واقرأ بلوك {% schema %} في الأسفل للوقوف على الإعدادات. أما الارتفاعات فهي في الأسطر 143 إلى 157 من snippets/theme-styles-variables.liquid. وأوصاف البلوكات موجودة في blocks/ — ملف واحد لكل نوع، مسمّى تمامًا كما في عمود type أعلاه.

Horizon لا يمتلك إصدارات، لذا لا يوجد رقم نسخة يمكن الاستناد إليه. هذه الصفحة تذكر بدلًا من ذلك الـ commit الذي قُرئت منه؛ وإذا تغيّر الثيم، فإن هذه الأرقام تتغيّر معه.