Sections (מקטעים) ו-Blocks (בלוקים) הם אבני הבנייה של תבניות Shopify מודרניות. SectionSection / מקטעמקטע בתבנית Shopify שמכיל תוכן או רכיבים וניתן לעריכה בעורך התבנית.פתיחה במילון הוא אזור תוכן גדול כמו Hero, מוצר מומלץ, קולקציה, טקסט או Footer. BlockBlock / בלוקרכיב קטן בתוך מקטע או בתוך ממשק Shopify, שאפשר להוסיף, להזיז או להגדיר בנפרד.פתיחה במילון הוא רכיב קטן יותר בתוך מקטע, כמו כפתור, שורת טקסט, תמונה או App blockBlock / בלוקרכיב קטן בתוך מקטע או בתוך ממשק Shopify, שאפשר להוסיף, להזיז או להגדיר בנפרד.פתיחה במילון.
Shopify משתמשת במבנה הזה כדי לאפשר עריכה ויזואלית דרך Theme editorTheme editor / עורך התבניתעורך התבנית שבו מנהלים מקטעים, בלוקים, מקורות דינמיים והגדרות עיצוב.פתיחה במילון (עורך התבנית). בעלי חנות יכולים להוסיף, להסיר, להסתיר, לגרור ולערוך רכיבים בלי לגעת בקוד, בכפוף למה שהתבנית מאפשרת.
במדריך הזה
המדריך מסביר מה הם Sections ו-Blocks, מה ההבדל בין Template sections לבין Static sections, איך משתמשים בהם בתבנית, איך App blocksBlocks / בלוקיםרכיבי תוכן או פעולה שניתן להוסיף לתבנית, לעמוד או לעיתים גם לעמודי אדמין.פתיחה במילון נכנסים למבנה, ומה הסיכונים בשינוי מבנה בחנות פעילה.
Sections (מקטעים)
SectionSection / מקטעמקטע בתבנית Shopify שמכיל תוכן או רכיבים וניתן לעריכה בעורך התבנית.פתיחה במילון יכול להופיע בתבנית עמוד מסוימת או באזור קבוע. מקטעים בעמוד בית או עמוד מוצר יכולים להיות שונים לפי התבנית שנבחרה. שינוי מקטע בתבנית מוצר אחת יכול להשפיע על כל המוצרים שמשתמשים בה.
BlocksBlocks / בלוקיםרכיבי תוכן או פעולה שניתן להוסיף לתבנית, לעמוד או לעיתים גם לעמודי אדמין.פתיחה במילון (בלוקים)
BlocksBlocks / בלוקיםרכיבי תוכן או פעולה שניתן להוסיף לתבנית, לעמוד או לעיתים גם לעמודי אדמין.פתיחה במילון הם רכיבים פנימיים של מקטע. לדוגמה, במקטע מוצר יכולים להיות בלוקים לכותרת, מחיר, בורר וריאנטים, כפתורי קנייה, תיאור, משלוח או אפליקציה. לא כל מקטע תומך בכל סוג בלוק.
Static sections ו-Template sections
Static sections (מקטעים קבועים) מופיעים באזורים קבועים כמו Header או Footer. Template sections (מקטעי תבנית) שייכים לתבנית עמוד מסוימת וניתנים לסידור בתוך אותה תבנית.
App blocksBlocks / בלוקיםרכיבי תוכן או פעולה שניתן להוסיף לתבנית, לעמוד או לעיתים גם לעמודי אדמין.פתיחה במילון ומקורות דינמיים
App blocksBlocks / בלוקיםרכיבי תוכן או פעולה שניתן להוסיף לתבנית, לעמוד או לעיתים גם לעמודי אדמין.פתיחה במילון (בלוקי אפליקציה) מאפשרים לאפליקציות להוסיף רכיבים בתוך מקטעים נתמכים. Dynamic sourcesDynamic sources / מקורות דינמייםמקורות דינמיים שמאפשרים לחבר תבנית לערכים כמו מטא-שדות במקום להזין תוכן קבוע.פתיחה במילון (מקורות דינמיים) מחברים בלוקים לשדות כמו MetafieldsMetafields / שדות מטאשדות מותאמים שמרחיבים את מודל הנתונים של Shopify מעבר לשדות המובנים.פתיחה במילון או Metaobjects כדי להציג מידע שונה בכל מוצר או עמוד.
בדיקות לפני שינוי מבנה
לפני מחיקה או הזזה של מקטע, בדקו באילו תבניות הוא מופיע, האם הוא מכיל App blocksBlocks / בלוקיםרכיבי תוכן או פעולה שניתן להוסיף לתבנית, לעמוד או לעיתים גם לעמודי אדמין.פתיחה במילון, האם הוא מחובר למקורות דינמיים, והאם הוא קריטי להמרה כמו כפתור קנייה, מחיר, וריאנטים או מידע משלוח.
אחרי שינוי, בדקו עמוד בית, מוצר, קולקציה, עמוד תוכן, מובייל ודסקטופ. שינוי קטן במקטע יכול להיראות תקין בעמוד אחד ולשבור עמוד אחר שמשתמש באותה תבנית.
מה Sections ו-Blocks מאפשרים
Shopify מסבירה ש-Sections (מקטעים) יוצרים את Layout (פריסת) החנות, ושהם מורכבים מ-Blocks (בלוקים) עם תפקידים כמו Text (טקסט), Buttons (כפתורים), Single image (תמונה יחידה), Collage (קולאז׳) או Links (קישורים). המבנה הזה מאפשר לשלוט בסגנון ובתוכן בלי לערוך קוד.
אפשר לסדר מחדש Sections בתבניות ולסדר BlocksBlocks / בלוקיםרכיבי תוכן או פעולה שניתן להוסיף לתבנית, לעמוד או לעיתים גם לעמודי אדמין.פתיחה במילון בתוך Sections. לכל מקטע או בלוק יכולות להיות הגדרות ייחודיות. בנוסף, Shopify מאפשרת לחבר מקטעים ובלוקים תואמים ל-Dynamic sources (מקורות דינמיים) כמו MetafieldsMetafields / שדות מטאשדות מותאמים שמרחיבים את מודל הנתונים של Shopify מעבר לשדות המובנים.פתיחה במילון (שדות מטאMetafields / שדות מטאשדות מותאמים שמרחיבים את מודל הנתונים של Shopify מעבר לשדות המובנים.פתיחה במילון) ו-Metaobjects (אובייקטי מטא).
מגבלות ו-Block sources
| נושא | מגבלה או התנהגות |
|---|---|
| Sections per template | עד 25 מקטעים לכל Template |
| Blocks per template | עד 1250 בלוקים בכל המקטעים יחד, בכפוף לתבנית |
| Nested blocks | בלוקים שתומכים בקינון יכולים להגיע עד שמונה רמות |
| App blocks | זמינות תלויה באפליקציה וביכולת של המקטע לקבל App blocks |
| Theme blocks ו-Section blocks | מקטע יכול לקבל סוגי בלוקים לפי מבנה התבנית, ולא תמיד שילוב של כולם |
עבודה עם Template selector
כאשר פותחים את Theme editorTheme editor / עורך התבניתעורך התבנית שבו מנהלים מקטעים, בלוקים, מקורות דינמיים והגדרות עיצוב.פתיחה במילון, Shopify טוענת כברירת מחדל את Home page. דרך התפריט אפשר לבחור Templates כמו Products, CollectionsCollections / קולקציותקבוצות מוצרים ידניות או חכמות שמשמשות לניווט, סינון, קידום וארגון קטלוג.פתיחה במילון, Pages או Blogs, או להשתמש בחיפוש בתוך התפריט. חשוב להבין שכל שינוי בתבנית נצפה בעורך מיד, אבל ההשפעה האמיתית תלויה באילו עמודים משתמשים באותה תבנית.
אם המסך רחב מאוד, Shopify מציינת שאפשרויות העריכה יכולות להופיע בצד ימין; במסכים קטנים יותר הן מופיעות בצד שמאל. לכן מדריך פנימי לצוות צריך לתאר את הפעולה ולא רק את מיקום הפאנל במסך.
פעולות נפוצות
אפשר Add sectionSection / מקטעמקטע בתבנית Shopify שמכיל תוכן או רכיבים וניתן לעריכה בעורך התבנית.פתיחה במילון (להוסיף מקטע), Edit sectionSection / מקטעמקטע בתבנית Shopify שמכיל תוכן או רכיבים וניתן לעריכה בעורך התבנית.פתיחה במילון (לערוך מקטע), Rearrange (לסדר מחדש), Duplicate (לשכפל), Copy and paste blocksBlocks / בלוקיםרכיבי תוכן או פעולה שניתן להוסיף לתבנית, לעמוד או לעיתים גם לעמודי אדמין.פתיחה במילון (להעתיק ולהדביק בלוקים), Hide or delete (להסתיר או למחוק), Rename (לשנות שם), ולהוסיף BlocksBlocks / בלוקיםרכיבי תוכן או פעולה שניתן להוסיף לתבנית, לעמוד או לעיתים גם לעמודי אדמין.פתיחה במילון. כאשר מנסים להעביר בלוק למקטע לא תואם או למקטע שהגיע למגבלה, Shopify מחזירה אותו למיקום המקורי.
חלק מהבלוקים Required (נדרשים), חלק מופיעים אוטומטית בתנאים מסוימים, וחלק מוגבלים למקטע מסוים. לדוגמה, בלוק Slide יכול להיות זמין רק בתוך Slideshow sectionSection / מקטעמקטע בתבנית Shopify שמכיל תוכן או רכיבים וניתן לעריכה בעורך התבנית.פתיחה במילון. לכן לפני שמאשימים את העורך בתקלה, בודקים את מגבלות התבנית.
Dynamic sourcesDynamic sources / מקורות דינמייםמקורות דינמיים שמאפשרים לחבר תבנית לערכים כמו מטא-שדות במקום להזין תוכן קבוע.פתיחה במילון
Shopify מאפשרת להשתמש ב-Metafields ו-Metaobjects להצגת מידע דינמי. לדוגמה, אפשר ליצור Product metafield בשם Burn time (זמן בעירה) ולחבר אותו לבלוק טקסט בתבנית מוצר. כך כל מוצר מציג ערך משלו באותו מבנה עיצובי.
לא כל מקטע או בלוק תומכים במקורות דינמיים. צריך לבדוק את גרסת ארכיטקטורת התבנית ואת האפשרויות בעורך. אם התבנית לא תומכת בסוג מידע מסוים, ייתכן שצריך לערוך קוד או להיעזר במפתח תבנית.
בדיקת איכות לפני פרסום
לפני שמעלים שינוי לחנות פעילה, בודקים את אותו נושא בשלושה מקומות: Shopify admin (ממשק הניהול), ThemeTheme / תבניתתבנית העיצוב והמבנה שמציגה את החנות ללקוחות ומשפיעה על עמודים, מקטעים, ביצועים ועריכה.פתיחה במילון preview (תצוגה מקדימה של התבנית), והעמוד הציבורי במובייל ובדסקטופ. הבדיקה הזאת חשובה במיוחד בתוכן שמופיע בכמה עמודים, כמו תפריטים, בלוקים, קולקציות, וריאנטים או כפתורי קנייה.
כדאי לעבוד עם רשימת בדיקה קבועה: האם השינוי נשמר, האם הוא מופיע במקום הנכון, האם קישורים מובילים ליעד הנכון, האם טקסטים לא נחתכים במובייל, האם תמונות נטענות, האם לקוח יכול להשלים פעולה, והאם לא נוצרה תלות באפליקציה או בהגדרה שאינה זמינה בכל MarketMarket / שוקמונח Shopify שמשמעותו בעברית: שוק. ההקשר המדויק תלוי בעמוד או בתהליך שבו המונח מופיע.פתיחה במילון (שוק).
תיעוד, בעלות ובדיקת מובייל
בכל שינוי תוכן או תבנית כדאי לתעד Owner (בעלים), סיבת שינוי, עמודים מושפעים ותאריך בדיקה הבא. Shopify מאפשרת לבצע הרבה פעולות מתוך ממשק הניהול, אבל קל לשכוח ששינוי קטן יכול להשפיע על מסלול קנייה שלם: תפריט מוביל לקולקציה, קולקציה מובילה למוצר, מוצר מוביל לקופה, ואפליקציה או בלוק יכולים לשנות מה הלקוח רואה בדרך. לכן תיעוד קצר מונע מצב שבו צוות שיווק משנה תוכן, צוות תפעול משנה מלאי, וצוות שירות מגלה רק אחרי פניות לקוחות שהחנות מציגה מידע לא עקבי.
בדיקת Mobile (מובייל) אינה רק הקטנת חלון בדפדפן. פותחים את העמוד במכשיר או בתצוגת מובייל אמינה, בודקים גלילה, פתיחת תפריט, בחירת וריאנט, טעינת תמונות, חיפוש, לחיצה על כפתורים, קריאות טבלאות, ושדות שבהם טקסט עברי ואנגלי מופיעים יחד. אם התוכן כולל טבלה או רשימת צעדים, בודקים שהעמודות לא נחתכות ושכותרות המשנה עוזרות לסריקה מהירה. בחנות פעילה, בעיה קטנה במובייל יכולה להשפיע על רוב התנועה.
סימני אזהרה אחרי שינוי
| סימן | מה לבדוק מיד |
|---|---|
| לקוחות לא מוצאים פריט | חיפוש, תפריט, קולקציה, שם מוצר, תגיות ומילים נרדפות |
| כפתור קנייה לא מופיע | מלאי, וריאנט נבחר, תבנית מוצר, App block או הגדרת checkout |
| עמוד נראה שונה בין מוצרים | Template משויך, Dynamic sources, Metafields ובלוקים מוסתרים |
| קישור מוביל ל-404 | Menu item, URL handle, Redirect והאם היעד נמחק או הוסתר |
| אפליקציה נעלמה אחרי החלפת תבנית | App embeds, App blocks, תאימות התבנית והאם צריך להפעיל מחדש |
כאשר אחד מסימני האזהרה מופיע, לא מסתפקים בתיקון נקודתי. בודקים אם אותה בעיה קיימת בעמודים דומים: כל מוצר שמשתמש באותה תבנית, כל קולקציה שמסתמכת על אותו תנאי, כל תפריט עם אותו יעד, וכל MarketMarket / שוקמונח Shopify שמשמעותו בעברית: שוק. ההקשר המדויק תלוי בעמוד או בתהליך שבו המונח מופיע.פתיחה במילון שמקבל הגדרות שונות. כך השינוי נשאר מקור-נאמן לתיעוד של Shopify וגם מתאים להפעלה יומיומית בחנות אמיתית.
בסיום, שמרו צילום מסך או תיאור קצר של מצב תקין, במיוחד כאשר השינוי קשור לקופה, חיפוש, תפריט ראשי או תבנית מוצר. בפעם הבאה שמדווחת תקלה, יהיה ברור מה השתנה ומה אמור להיראות ללקוח.
אם יש כמה שפות או Markets, חזרו על הבדיקה לכל גרסה פעילה ולא רק לחנות ברירת המחדל.
שאלות נפוצות
מה ההבדל בין Section לבין Block?
Section הוא אזור תוכן גדול בתבנית. Block הוא רכיב בתוך אותו אזור, כמו טקסט, כפתור, תמונה או בלוק אפליקציה.
למה שינוי בתבנית יכול להשפיע על הרבה עמודים?
כי מוצרים, קולקציות או עמודים רבים יכולים להשתמש באותה Template, ולכן שינוי במקטע שלה מופיע אצל כולם.