סיקור ומחקר על Shopify ומסחר אלקטרוני
ל-Hero של Horizon יש 36 הגדרות סקשן ו-8 סוגי בלוקים שנושאים עוד 104, והתפריט Height שלו עובר מ-rem ל-svh כשהמסך גדל. נקרא מקוד המקור של התמה בקומיט 8b42ace.
Horizon היא התמה ש-Shopify מספקת לחנויות חדשות, וסקשן ה-Hero שלה הוא הדבר הראשון שרוב הסוחרים נוגעים בו. עורך התמה מציג לכם תפריט Height עם שש אפשרויות וסלוט לתמונה. הוא לא מספר לכם ששלוש מהאפשרויות האלה משנות את יחידת המידה שלהן בהתאם לרוחב המסך, או ש”Large” כאן אומר משהו לגמרי אחר מ”Large” ב-Dawn.
איך הגענו למספרים האלה. ב-1 בספטמבר 2026 קראנו את הריפוזיטורי הציבורי Shopify/horizon בקומיט 8b42ace (2026-08-31) — Horizon לא מפרסמת releases ולא tags, ולכן הקומיט הוא הגרסה. לקחנו את סכמת ההגדרות ואת סולמות ה-srcset מתוך sections/hero.liquid, 1496 שורות; את משתני הגובה מתוך snippets/theme-styles-variables.liquid; ואת כללי הסקשן מתוך assets/base.css. תיאורי הבלוקים נפתרו מתוך ספריית ה-blocks/ המשותפת של התמה, כי סכמת ה-Hero רק מציינת אותם בשמם. כל נתון חולץ מהקבצים האלה באמצעות סקריפט.
זה החלק שמפתיע אנשים. ל-Horizon אין גובה אחד לכל אפשרות — יש לה שלושה, לרוחב שני breakpoints, והיחידה מתחלפת:
| הגדרה | מובייל | ≥40em | ≥60em |
|---|---|---|---|
| Small | 15rem = 240px | 40svh | 50svh |
| Medium | 25rem = 400px | 55svh | 65svh |
| Large | 35rem = 560px | 70svh | 80svh |
מתחת ל-40em הגבהים קבועים ב-rem. מעליו הם הופכים ל-svh, יחידת ה-small viewport height — אחוז מהמסך הנראה. כך שבטלפון Hero בגובה Large הוא 560px קבועים, ובדסקטופ רחב הוא 80% ממה שגודל חלון המבקר במקרה יהיה.
שני גבהים נוספים עוקפים את הטבלה לגמרי. full-screen מגדיר 100svh. custom חושף סליידר, section_height_custom, שרץ מ-0 עד 100% עם ברירת מחדל של 50 — והערך הזה גם נכתב ישר כ-svh, לא כפיקסלים.
שתי התמות מציעות Hero בגובה Large. הן לא ניתנות להשוואה, משתי סיבות נפרדות.
בסיס ה-rem שונה. חיפשנו בכל אחד מקבצי התמה: Horizon לא דורסת אף פעם את גודל הפונט של ה-root, ולכן 1rem הוא ברירת המחדל של הדפדפן, 16px. Dawn מגדירה font-size: calc(var(--font-body-scale) * 62.5%), מה שהופך את 1rem ל-10px. אותם 35rem היו אומרים 560px ב-Horizon ו-350px ב-Dawn.
היחידה שונה מעל ה-breakpoint. ה-Large של Dawn הוא 720px קבועים בדסקטופ, זהה בכל מסך. ה-Large של Horizon הוא 80svh, ולכן הוא גדל עם התצוגה: בערך 720px בחלון בגובה 900px ובערך 1152px בחלון בגובה 1440px.
אם אתם מעבירים עיצוב בין שתי התמות, זו ההגדרה הבודדת שהסיכוי הגבוה ביותר שתשבור אותו.
Horizon בונה srcset משני סולמות מקודדים בקוד, בשורות 103 ו-105 של הסקשן:
| סולם | טווח | שלבים | רוחבים שנדרשים |
|---|---|---|---|
| מדיה ברוחב מלא | 832–3840px | 6 | 832, 1200, 1600, 1920, 2560, 3840 |
| מדיה מפוצלת | 416–1600px | 5 | 416, 600, 800, 1200, 1600 |
העלו תמונה ברוחב 3840px ל-Hero שפרוס על כל העמוד. הסולם הצר יותר נעצר ב-1600px כי שם כל תמונה תופסת רק חלק מהרוחב.
שימו לב לשלב התחתון: Horizon מתחילה ב-832px שם ש-Dawn מתחילה ב-375px. Horizon פשוט לא מגישה גרסה בגודל טלפון של תמונת Hero ברוחב מלא, וכדאי לדעת את זה אם התנועה שלכם היא בעיקר מובייל ובחיבורים איטיים.
Dawn מתארת את הבלוקים שלה בתוך סכמת הסקשן. Horizon מציינת אותם בשמם ושומרת את התיאורים בספרייה משותפת, ולכן קריאה של sections/hero.liquid לבדו לא מספרת לכם שום דבר על מה שבלוק יכול לעשות. לאחר פתירה, 8 הסוגים נושאים ביניהם 104 הגדרות:
| סוג | שם | הגדרות | מוגדר ב |
|---|---|---|---|
@theme | — | 0 | wildcard |
text | Text | 19 | blocks/text.liquid |
button | Button | 12 | blocks/button.liquid |
logo | Logo | 15 | blocks/logo.liquid |
jumbo-text | Jumbo text | 9 | blocks/jumbo-text.liquid |
spacer | Spacer | 7 | blocks/spacer.liquid |
group | Group | 36 | blocks/group.liquid |
_marquee | Marquee | 6 | blocks/_marquee.liquid |
@theme הוא wildcard: הוא מקבל כל בלוק תמה, ולכן אין לו הגדרות משל עצמו. group הוא הכבד שבהם עם 36 הגדרות, כי הוא מכולת layout שמשחזרת רמה אחת למטה את רוב בקרות היישור והריווח של הסקשן עצמו.
לשם פרופורציה: באנר התמונה של Dawn מציע 3 סוגי בלוקים שנושאים 12 הגדרות בסך הכול. ה-Hero של Horizon מציע 8 שנושאים 104. זה ההבדל האמיתי בין שתי התמות, והוא לא נראה בשום מקום בעורך התמה.
36 הגדרות, כפי שהן מופיעות בעורך:
| ID בקוד | תווית בעורך | סוג | ברירת מחדל | טווח / אפשרויות |
|---|---|---|---|---|
media_type_1 | Type | select | image | 2 אפשרויות |
image_1 | Image | image_picker | — | — |
video_1 | Video | video | — | — |
media_type_2 | Type | select | image | 2 אפשרויות |
image_2 | Image | image_picker | — | — |
video_2 | Video | video | — | — |
stack_media_on_mobile | Stack media | checkbox | false | — |
custom_mobile_media | Show different media on mobile | checkbox | false | — |
media_type_1_mobile | Type | select | image | 2 אפשרויות |
image_1_mobile | Image | image_picker | — | — |
video_1_mobile | Video | video | — | — |
media_type_2_mobile | Type | select | image | 2 אפשרויות |
image_2_mobile | Image | image_picker | — | — |
video_2_mobile | Video | video | — | — |
link | Link | url | — | — |
open_in_new_tab | Open link in new tab | checkbox | false | — |
content_direction | Direction | select | column | 2 אפשרויות |
vertical_on_mobile | Vertical on mobile | checkbox | true | — |
horizontal_alignment | Alignment | select | flex-start | 4 אפשרויות |
vertical_alignment | Position | select | center | 3 אפשרויות |
align_baseline | Align text baseline | checkbox | false | — |
horizontal_alignment_flex_direction_column | Alignment | select | flex-start | 3 אפשרויות |
vertical_alignment_flex_direction_column | Position | select | center | 4 אפשרויות |
gap | Gap | range | 12 | 0–100px, צעד 1 |
section_width | Width | select | page-width | 2 אפשרויות |
section_height | Height | select | medium | 6 אפשרויות |
section_height_custom | Custom height | range | 50 | 0–100%, צעד 1 |
background_color | Background color | color | — | — |
toggle_overlay | Media overlay | checkbox | — | — |
overlay_color | Overlay color | color | #00000026 | — |
overlay_style | Overlay style | select | solid | 2 אפשרויות |
gradient_direction | Gradient direction | select | to top | 2 אפשרויות |
blurred_reflection | Blurred reflection | checkbox | false | — |
reflection_opacity | Reflection opacity | range | 75 | 0–100%, צעד 1 |
padding-block-start | Top | range | 0 | 0–100px, צעד 1 |
padding-block-end | Bottom | range | 0 | 0–100px, צעד 1 |
כדאי לציין:
ארבע הגדרות יישור נפרדות. 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 אין releases, ולכן אין מספר גרסה לצטט. העמוד הזה מציין במקום זה את הקומיט שממנו הוא נקרא; אם התמה משתנה, הנתונים האלה נעים איתה.
3840px רוחב ל-Hero ברוחב מלא. Horizon מבקשת 6 רוחבים מ-832px עד 3840px. עבור מדיה מפוצלת היא משתמשת בסולם שני של 5 רוחבים שמגיע עד 1600px, כך ש-1600px מספיקים שם.
במובייל האפשרויות הקבועות הן 240px, 400px ו-560px. מעל 40em הן הופכות ל-40svh, 55svh ו-70svh, ומעל 60em ל-50svh, 65svh ו-80svh. Full-screen הוא 100svh ו-Custom הוא סליידר שנקרא ישירות כ-svh.
שתי סיבות. Horizon לא דורסת את גודל הפונט של ה-root, ולכן 1rem הוא ברירת המחדל של הדפדפן, 16px, בזמן ש-Dawn מגדירה 62.5% ומקבלת 10px. ומעל ה-breakpoint, Horizon מודדת ב-svh, אחוז מחלון הדפדפן, בזמן ש-Dawn נשארת על ערך קבוע.
36 על הסקשן עצמו, בתוספת 8 סוגי בלוקים שנושאים ביניהם 104 הגדרות. הגדרות הבלוקים לא נמצאות בקובץ הסקשן — Horizon שומרת אותן בספריית blocks/ משותפת.
בקובץ אחד לכל סוג בלוק תחת blocks/ בתמה. סכמת ה-Hero מציגה רק את שמות הסוגים, ולכן קריאה של הסקשן לבדו מראה בלוקים בלי אף הגדרה. הערך @theme הוא wildcard שמקבל כל בלוק תמה.