تقارير وأبحاث حول شوبيفاي والتجارة الإلكترونية
يطلب Dawn v16.0.0 من المتصفح 9 عروض للصور من 375 إلى 3840px، وسلّماً مختلفاً يصل إلى 7680px عند استخدام صورتين. هذه هي كل إعدادات قسم Image banner، وكل القيم الافتراضية، والارتفاعات الدقيقة بالبكسل، مقروءة من كود القالب نفسه.
توثيق Shopify نفسه لقسم Image banner يتوقف عند “أضف صورة وبعض النص”. فهو لا يخبرك بالمقاس الذي يجب أن تكون عليه تلك الصورة، ولا بالارتفاع الذي سينتهي إليه البانر، ولا بما تغيّره كل قائمة منسدلة فعلياً. هذه الصفحة تفعل ذلك، لأن كل ما فيها مكتوب في الكود المصدري لـ Dawn وقد قرأناه هناك.
كيف حصلنا على هذه الأرقام. في 1 سبتمبر 2026 قرأنا أربعة ملفات من المستودع العام Shopify/dawn عند الإصدار v16.0.0 (2026-08-10): القسم sections/image-banner.liquid، 507 أسطر، من أجل مخطط الإعدادات وسلالم srcset؛ وassets/section-image-banner.css من أجل قواعد الارتفاع؛ وlayout/theme.liquid من أجل حجم خط الجذر الذي يحوّل rem إلى بكسل؛ وconfig/settings_schema.json من أجل نطاق حجم نص المتن. كل رقم في هذه الصفحة استُخرج من تلك الملفات ببرنامج، ولم يُنسخ يدوياً. فإذا ظهر رقم هنا، فهو موجود في القالب.
هذا هو الجزء الذي لا ينشره أحد، وهو الجزء الذي يحدّد ما إذا كان بانرك سيظهر حاداً على شاشة لابتوب ريتينا.
لا يقدّم Dawn صورة واحدة. بل يبني srcset ويترك المتصفح يختار. وسلّم العروض مكتوب بشكل ثابت في القسم، وهناك سلّمان منه:
| الحالة | النطاق | الدرجات | العروض المطلوبة |
|---|---|---|---|
| صورة واحدة | 375–3840px | 9 | 375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840 |
| صورتان | 450–7680px | 9 | 450, 660, 900, 1320, 1800, 2136, 2400, 3600, 7680 |
يُشتغّل السلّم الثاني عندما تملأ خانتي image وimage_2 معاً. فتشغل كل صورة نصف العرض، ومن ثم يطلب Dawn ملفات مصدرية أكبر للحفاظ على نفس الكثافة على الشاشة — فتنتقل الدرجة العليا من 3840px إلى 7680px.
ماذا ترفع. طابِق الدرجة العليا للسلّم الذي ستستخدمه فعلاً: عرض 3840px للبانر ذي الصورة الواحدة، وعرض 7680px للبانر ذي الصورتين. أي شيء أكبر تتخلص منه شبكة توصيل الصور في Shopify. وأي شيء أصغر يجعل أكبر مدخل في srcset يعود بصمت إلى ملفك الأصلي، وهكذا ينتهي الأمر ببانرات باهتة الحدة على الشاشات عالية الكثافة.
القائمة المنسدلة Height فيها 4 خيارات: adapt وsmall وmedium وlarge. ثلاثة منها ارتفاعات دنيا ثابتة محددة في CSS، وهي تختلف بين الهاتف وسطح المكتب (نقطة الفصل هي 750px):
| الإعداد | الهاتف (<750px) | سطح المكتب (≥750px) |
|---|---|---|
| صغير | 28rem = 280px | 42rem = 420px |
| متوسط | 34rem = 340px | 56rem = 560px |
| كبير | 39rem = 390px | 72rem = 720px |
الخيار الرابع، adapt، يُسقط الارتفاع الثابت كلياً ويترك البانر يأخذ نسبة أبعاد صورتك الأولى. وهو الخيار الذي تختاره عندما يحتوي عملك الفني على عنصر لا يجوز قطعه.
قيم البكسل هذه ليست ثابتة. يضبط Dawn حجم خط الجذر في layout/theme.liquid على الشكل calc(var(--font-body-scale) * 62.5%)، و--font-body-scale يأتي مباشرة من إعداد حجم نص المتن الخاص بالقالب، وقيمته الافتراضية 100% ويمكن دفعه إلى 130% بخطوات من 5%.
عند القيمة الافتراضية 100%، يساوي الـ rem الواحد 10px، ومن هنا جاء الجدول أعلاه. ارفع نص المتن إلى 130% وسينمو كل بانر بالنسبة نفسها: فيصبح البانر الكبير بارتفاع 936px بدلاً من 720px على سطح المكتب. يغيّر التجار إعداد حجم النص من أجل سهولة القراءة، ثم يتساءلون لماذا صار الهيرو يأكل الشاشة بأكملها فجأة. هذا هو السبب.
12 إعداداً، تماماً كما تظهر في محرر القوالب:
| المعرّف في الكود | التسمية في المحرر | النوع | الافتراضي | النطاق / الخيارات |
|---|---|---|---|---|
image | Image 1 | image_picker | — | — |
image_2 | Image 2 | image_picker | — | — |
image_overlay_opacity | Overlay opacity | range | 0 | 0–100، بخطوة 10 |
image_height | Height | select | medium | 4 خيارات |
image_behavior | Animation | select | none | 4 خيارات |
desktop_content_position | Position | select | middle-center | 9 خيارات |
desktop_content_alignment | Alignment | select | center | 3 خيارات |
show_text_box | Container | checkbox | true | — |
color_scheme | Color scheme | color_scheme | scheme-1 | — |
stack_images_on_mobile | Stack images | checkbox | true | — |
mobile_content_alignment | Alignment | select | center | 3 خيارات |
show_text_below | Container | checkbox | true | — |
بعض الإعدادات التي تستحق المعرفة:
image_overlay_opacity — شريط تمرير من 0 إلى 100 بخطوات من 10، وقيمته الافتراضية 0. وهو أسرع حل منفرد لنص غير مقروء فوق صورة مزدحمة، ويأتي معطّلاً.
image_behavior — 4 خيارات: none وambient وfixed وzoom-in. الافتراضي none. ثلاثة من الأربعة تتحرك مع التمرير، وهذا يكلّف عملاً على الخيط الرئيسي على العنصر نفسه الذي يكون المتصفح مشغولاً برسمه بالفعل.
desktop_content_position — 9 مواضع، شبكة 3×3 كاملة، والافتراضي middle-center. وهو منفصل عن desktop_content_alignment الذي يتحكم بطريقة اصطفاف النص داخل ذلك الصندوق.
show_text_below و**show_text_box** كلاهما افتراضياً true. الأول ينقل النص إلى أسفل الصورة على الهاتف بدلاً من فوقها؛ والثاني يرسم الحاوية الصلبة خلف النص على سطح المكتب.
يأخذ القسم 3 أنواع من البلوكات، مع ترتيب مسبق واحد:
| النوع | الاسم | الإعدادات |
|---|---|---|
heading | Heading | 2 |
text | Text | 2 |
buttons | Buttons | 8 |
يحمل بلوك buttons ثمانية إعدادات لأنه يضم زرّين كاملين: التسمية والرابط ومربع اختيار للنمط الثانوي لكل منهما. ومربعا النمط كلاهما معطّلان افتراضياً، أي أن كلا الزرّين يُعرض كزرّ أساسي — ولهذا يأتي عدد كبير من بانرات Dawn بدعوتين لاتخاذ إجراء تبدوان متطابقتين.
كل ما هنا يبعد نقرة واحدة. افتح sections/image-banner.liquid وانزل إلى بلوك {% schema %} في الأسفل: فذلك الـ JSON هو قائمة الإعدادات والقيم الافتراضية بكاملها. أما الارتفاعات فتقيم في assets/section-image-banner.css. وسلالم العروض هي عبارات assign widths قرب أعلى القسم، في السطرين 34 و40.
إذا أطلق Shopify إصداراً جديداً من Dawn، فقد تتغير هذه الأرقام. وهذه الصفحة تذكر الإصدار الذي قُرئت منه لهذا السبب بالتحديد.
عرض 3840px للبانر ذي الصورة الواحدة. يبني Dawn سلّم srcset من 9 عروض تبدأ من 375px وتنتهي عند 3840px، لذا فإن أي عرض أكبر يُهمل وأي عرض أصغر يجعل أكبر مدخل يعود إلى ملفك الأصلي. إذا استخدمت كلتا خانتي الصور، فارفع 7680px بدلاً من ذلك — فسلّم الصورتين يتوقف عند هذا الحد.
على سطح المكتب، الخيارات الثابتة الثلاثة هي 420px و560px و720px. ودون نقطة الفصل 750px تصبح 280px و340px و390px. أما الخيار الرابع، التكيّف مع الصورة الأولى، فلا ارتفاع ثابت له ويتبع نسبة أبعاد صورتك.
ارتفاعات البانر معرّفة بوحدة rem، وحجم خط الجذر في Dawn هو calc(var(--font-body-scale) * 62.5%). هذا المتغيّر هو إعداد حجم نص المتن في القالب، وقيمته الافتراضية 100%، وقابل للتعديل حتى 130%. رفع حجم النص يوسّع معه كل ارتفاع قائم على rem، والبانرات ضمنها.
12 إعداداً في القسم نفسه في Dawn v16.0.0، إضافة إلى 3 أنواع من البلوكات (العنوان والنص والأزرار) تحمل بينها 12 إعداداً آخر.
تعمل على تعتيم الصورة الواقعة خلف نصك. وهي شريط تمرير من 0 إلى 100 بخطوات من 10، وتأتي افتراضياً بالقيمة 0، أي معطّلة. وهي أسرع حل عندما يكون العنوان غير مقروء فوق صورة مزدحمة.