סיקור ומחקר על Shopify ומסחר אלקטרוני
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 לבאנר עם שתי תמונות. כל מה שגדול מזה נזרק על ידי ה-CDN של התמונות של Shopify. כל מה שקטן מזה — והערך הגדול ביותר ב-srcset נופל בשקט חזרה לקובץ המקורי שלכם, וכך באנרים מגיעים למצב מרוח בתצוגות בצפיפות גבוהה.
לתפריט Height יש 4 אפשרויות: adapt, small, medium, large. שלוש מהן הן גבהי מינימום קבועים שמוגדרים ב-CSS, והן שונות בין מובייל לדסקטופ (נקודת השבירה היא 750px):
| הגדרה | מובייל (<750px) | דסקטופ (≥750px) |
|---|---|---|
| Small | 28rem = 280px | 42rem = 420px |
| Medium | 34rem = 340px | 56rem = 560px |
| Large | 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% וכל באנר יגדל באותו יחס: באנר Large עולה מ-720px ל-936px גובה בדסקטופ. סוחרים משנים את הגדרת גודל הטקסט לצורך קריאות ואז תוהים למה ההירו פתאום תופס את כל המסך. זו הסיבה.
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. שלוש מהארבע מונפשות בגלילה, מה שגובה עבודה מה-main thread בדיוק על האלמנט שהדפדפן כבר עסוק בציור שלו.
desktop_content_position — 9 מיקומים, גריד מלא של 3×3, ברירת מחדל middle-center. נפרד מ-desktop_content_alignment, ששולט באופן שבו הטקסט מיושר בתוך התיבה הזאת.
show_text_below ו-show_text_box שניהם בברירת מחדל true. הראשון מעביר את הטקסט מתחת לתמונה במובייל במקום מעליה; השני מצייר את המכל האטום מאחורי הטקסט בדסקטופ.
הסקשן מקבל 3 סוגי בלוקים, עם סידור preset אחד:
| סוג | שם | הגדרות |
|---|---|---|
heading | Heading | 2 |
text | Text | 2 |
buttons | Buttons | 8 |
הבלוק buttons נושא 8 הגדרות כי הוא מכיל שני כפתורים שלמים: תווית, קישור ותיבת סימון לסגנון משני לכל אחד. שתי תיבות הסימון של הסגנון מוגדרות כברירת מחדל לכבוי, כלומר שני הכפתורים מוצגים כראשיים — ולכן כל כך הרבה באנרים של 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. האפשרות הרביעית, Adapt to first image, ללא גובה קבוע ועוקבת אחרי יחס הממדים של התמונה שלכם.
גבהי הבאנר מוגדרים ב-rem, וגודל הפונט של השורש ב-Dawn הוא calc(var(--font-body-scale) * 62.5%). המשתנה הזה הוא הגדרת גודל טקסט הגוף של התבנית, ברירת מחדל 100%, ניתן להתאמה עד 130%. העלאת גודל הטקסט מגדילה איתה כל גובה שמבוסס rem, כולל באנרים.
12 הגדרות בסקשן עצמו ב-Dawn v16.0.0, בתוספת 3 סוגי בלוקים (heading, text ו-buttons) שנושאים ביניהם 12 הגדרות נוספות.
זה מכהה את התמונה שמאחורי הטקסט שלכם. זה סליידר מ-0 עד 100 בצעדים של 10, והוא מגיע ב-0, כלומר כבוי. זה התיקון המהיר ביותר כשכותרת לא קריאה מעל תמונה עמוסה.