Shopify ללא ממשק (Headless) עבור מותגים שיש להם צמחתי מחוץ לליקוויד
Hydrogen ו-Oxygen, או Next.js על תשתית בבעלותך, שניהם רצים על גבי ה-Storefront API של Shopify. נבנו על ידי מהנדסי שותפים של Shopify שידעו לומר לך מתי ערכת נושא (theme) היא עדיין הפתרון הנכון.
מאז 2018
נבדק
ארגון
זוכים לאמון של למעלה מ-250 מותגים בארה"ב, בריטניה, איחוד האמירויות ואירופה
איפה בנייה ללא ממשק (Headless) גורמת להפסד כספי, ומה אנחנו עושים בנידון
שמונה בעיות אחראיות לרוב פרויקטי ה-headless שבסופו של דבר עולים יותר מהתבנית שהחליפו. לכל אחת מהן יש פתרון שאנו מיישמים כסטנדרט.
- הדלס נקנה כפתרון מהירותחנות איטית נובעת לרוב מסקריפטים של אפליקציות ומשקל תמונות, לא ממודל הרינדור. "Headless" לא יתקן את מה שביקורת אתרים הייתה מגלה.
- עורך ערכות העיצוב נעלם, ושום דבר לא מחליף אותומרצ'נדייזרים שיכלו לשנות באנר בעצמם נדרשים כעת לפתוח כרטיס. יש לתכנן ולבנות בקרות עריכה, לא להניח שהן קיימות.
- שתי מערכות, צוות אחדמאגר קוד של חזית חנות וממשק ניהול של Shopify, שלכל אחד מהם מחזור עדכונים משלו. עלויות כוח האדם הן אלו שאף אחד לא מתקצב.
- הצ'ק-אאוט נבנה מחדש ללא צורךהצ'ק-אאוט של Shopify הוא החלק ששווה לשמור. בנייה מחדש שלו פירושה להחליף בעיה פתורה בבעיה לא פתורה.
- הגירה ללא מפת הפניההעברות תבנית-אחר-תבנית שמשמיטות כתובות URL בשקט. המשטח האורגני ממופה לפני שכל דבר נשלח.
- אין תקציב ביצועיםHeadless הופך מהירות לאפשרית, לא לאוטומטית. חבילת React ללא השגחה היא איטית יותר מהערכת שהחליפה.
- תצוגה מקדימה שאף אחד לא יכול להשתמש בהתוכן השוכן ב-CMS שהעורכים אינם יכולים לראות בהקשר שלו. פריסות תצוגה מקדימה הן חלק מה-build, ולא שלב מאוחר יותר.
- ערימה שאף אחד אחר לא יכול להריםרינדור מותאם אישית ושכבות מצב הם הדברים שהצוות הבא שלכם יצטרך ללמוד קודם. אנחנו נשארים קרובים לברירות המחדל של הפריימוורק בכוונה תחילה.
שמונה יכולות "חסרות ראש" (headless), ושיקול הדעת להשתמש בהן במשורה
Hydrogen על גבי Oxygen, או Next.js על גבי התשתית שלכם. שניהם מתבססים על ה-Storefront API של Shopify, ושניהם מהווים חלופה ולא שדרוג.
חזיתות חנויות מימן
הפריימוורק של Shopify מבוססת React עם Server Components ורינדור מותאם ל-Edge, פרוסה ב-Oxygen ללא צורך בניהול חוזה אירוח.
Next.js ב-Storefront API
מודל הרינדור עצמו בתשתית שבבעלותך: App Router, רכיבי שרת (Server Components), ISR ואימות מחדש לפי דרישה (on-demand revalidation).
אחסון אוקסיג'ן
סביבת ה-Runtime הגלובלית של Shopify עבור Hydrogen, עם פריסת תצוגה מקדימה לכל ענף (branch), כך שהבדיקה מתבצעת בכתובות URL אמיתיות.
מידול ה-Storefront API
קטלוג, עגלת קניות, חשבונות לקוחות ותהליך התשלום מוגדרים במודל פעם אחת, ולאחר מכן משותפים בכל ממשק קצה שבו אתם משתמשים.
אינטגרציה ל-Headless CMS
Sanity, Contentful או Payload עבור תוכן עריכתי, עם תצוגה מקדימה כך שהצוות שלך יראה את הדף בהקשר לפני שהוא עולה לאוויר.
העברת תהליך התשלום
תהליך התשלום של Shopify, Shop Pay והארנקים הדיגיטליים נשארים כפי שהם. פתרון ה-Headless משנה את חזית החנות, לא את תהליך התשלום.
הגירה מ-Liquid
הגירה תבנית-אחר-תבנית מאחורי מפת הפניות, כך שהנוכחות האורגנית שהשקעת בה שנים תישמר לאחר המעבר.
ריטיינרים ללא ראש
שתי מערכות משמען שני מחזורי הפצה. עבודה על תלויות, זמן ריצה וביצועים נמשכת כחלק מההתקשרות.
איך מתנהלת התקשרות נטולת ממשק (Headless)
Headless הוא טרייד-אוף, לא שדרוג. השלב הראשון קיים כדי לוודא שאתם מבצעים את הטרייד-אוף הזה במודע.
האם headless הוא הפתרון?
אנחנו מבצעים ביקורת על העלות האמיתית של Liquid עבורכם. בערך מחצית מהמותגים שפונים אלינו בבקשה למעבר ל-Headless, עוזבים עם תוכנית לתיקון ה-Theme במקום.
ארכיטקטורה ומודל נתונים
ה-Front end, מערכת ניהול התוכן (CMS), האחסון וממשק ה-Storefront API נקבעים ומתועדים בכתב עוד לפני בניית הרכיב הראשון.
בנה והעבר
תבניות שהועברו מאחורי מפת הפניה (redirect map), בסביבת ה-staging המריצה עותק אמיתי של הקטלוג שלך במקום מוצרים לדוגמה.
מעבר ותפעול
בצעו השקה בהתבסס על תוכנית חזרה לאחור כתובה, ולאחר מכן הקפידו על קצב העדכונים, התלויות והביצועים שנדרש למערך נטול ממשק (headless) כדי להישאר תקין.
מה כוללת התקשרות נטולת ראש (Headless)
יש לכתוב זאת בתוך ה-SOW לפני החתימה, כדי שלא יהיה ויכוח בהמשך על מה שהיה משתמע.
במסגרת התוכנית
- Hydrogen על גבי Oxygen, או Next.js על גבי תשתית בבעלותך
- מידול API לחזית חנות עבור קטלוג, עגלת קניות וחשבונות לקוחות
- הגדרה של Headless CMS עם תצוגה מקדימה עריכתית לכל ענף (branch)
- העברת תהליך התשלום (Checkout) ל-Shopify עם Shop Pay וארנקים דיגיטליים פעילים
- תקציב ביצועים לכל תבנית, מאומת על סמך נתוני שטח
- מפת הפניה המכסה את הנכס האורגני הקיים שלך
מטופל בנפרד
- מנויי אירוח, מערכות ניהול תוכן ושירותי צד ג'
- עבודת מיתוג וזהות חזותית, שהוגדרה כהתקשרות נפרדת
- הדרכה מחדש של צוות המרצ'נדייזינג על תהליך העריכה החדש
אין החרגות עקרוניות. כל אחד מאלו יכול להיות מוגדר כהתקשרות נפרדת, שיתומחר בנפרד.
שלוש דרכים לעקוף את מגבלות ערכת הנושא, ומה המחיר של כל אחת מהן
"Headless" היא התשובה היקרה. כדאי להיות כנים לגבי התשובה הזולה יותר קודם לכן.
תקן את הערכת העיצוב שברשותך
הבעיה שלך היא נפח אפליקציה מוגזם, משקל תמונה או מקטע נעול, ולא מודל הרינדור עצמו.
ישנה תקרה. אם תגיע אליה בכל רבעון, בסופו של דבר תשלם על העבודה פעמיים.
מימן על חמצן
אתם רוצים את מודל הרינדור ללא ראש (headless) מבלי לקחת על עצמכם את האירוח, את תשתיות הבנייה ואת התורנות בכוננות.
אתה נמצא בתוך התשתית וסביבת ההרצה של Shopify. זהו המחיר שמשלמים עבור אי-בעלות על התפעול.
Next.js על גבי תשתית עצמאית
אתם מנהלים מותגים מרובים, אזורים מרובים או חוויות עתירות תוכן שזקוקות לטכנולוגיה שאתם שולטים בה.
שתי מערכות, שני מחזורי הפצה, וצוות המרצ'נדייזינג שלך מאבד את עורך התבניות לתמיד.
במה אנחנו בונים Shopify headless?
הסטאק ה-headless של Shopify היכן שהוא מתאים, ומסגרת עבודה שאתה מארח בעצמך כאשר ה-build באמת זקוק לכזו.
חזית חנות
- Hydrogen
- React
- Next.js
- Remix
- TypeScript
- Server Components
ממשקי API של Shopify
- API של חזית חנות
- API של חשבון לקוח
- API של עגלת קניות
- GraphQL
- API של ניהול
- Webhooks
תוכן
- Sanity
- Contentful
- Payload
- Metaobjects
- תצוגה מקדימה
- פריסות
ענן ותפעול
- Oxygen
- Vercel
- Cloudflare
- מטמון קצה (Edge caching)
- מדדי ליבה של חוויית משתמש (Core Web Vitals)
תוצאות ממיזמי Shopify שהשקנו
תמחור שקוף. בחרו את המודל שמתאים לשלב שלכם.
פרויקטים בעלי היקף מוגדר, ריטיינרים מתמשכים או צוותים ייעודיים במשרה מלאה. ללא קשר לאופן ההתקשרות, תדע את המחיר לפני החתימה: ללא זליגת שעות, ללא שינויי מחיר בלתי צפויים.
בנייה בהיקף קבוע
- היקף עבודה (SOW) קבוע ותוצרים כתובים
- תמיכה אינטנסיבית (Hypercare) למשך 14–60 יום כלולה
- קוד נקי ומסירת תיעוד
- יציאה נוחה, ללא התחייבות ארוכת טווח
שותפות חודשית
- מנהל מוצר ייעודי + מהנדס בכיר
- קצב ספרינט עם הדגמות שבועיות
- 2–8 בדיקות A/B בחודש
- 50% מהשעות שלא נוצלו מועברות לחודש הבא
פוד במשרה מלאה
- מהנדסים בכירים במשרה מלאה בצוות שלך
- גישה ישירה ב-Slack ופגישות עבודה יומיות (Daily standups)
- כפיפות ל-CTO/ראש צוות הפיתוח שלכם
- הסכם רמת שירות (SLA) חתום ותהליכים תואמי SOC2
לא בטוח מה מתאים?קבע שיחת אסטרטגיה חינם ל-30 דקות ←
שישה נימוקים לכך שמותגים נשארים איתנו לאורך זמן
רוב העבודה שלנו ב-Shopify מגיעה מלקוחות חוזרים או מהפניות. אלו הסיבות שלקוחות מציינים כשאנחנו שואלים אותם מדוע.
- שותף של Shopify מאז 2018מאושר, עם ערוצי תמיכה ישירים של שותפים כאשר גרסה זקוקה להם.
- מעל 250 חנויות הושקו מאז 2019שבע שנים של זיהוי תבניות ספציפיות ל-Shopify, לא עבודה כללית על אתרים.
- מנהל פרויקט ייעודי לכל גרסהבעל תפקיד אחד אחראי, עדכונים שבועיים בכתב, ללא משחקי "טלפון שבור" עם מנהלי חשבונות.
- קודם המרה, לא קודם פיקסלהחלטות עיצוביות מנומקות לפי השפעתן על הכנסות, ונמדדות לאחר ההשקה.
- תמחור שקוף בעל היקף קבועהיקף עבודה כתוב ומחיר קבוע לפני תחילת העבודה. ללא סעיפים מפתיעים.
- הקוד בבעלותך, תמידהעברה מסודרת, מתועדת, במאגרים שלכם. עזיבה לעולם לא תשמש נגדכם.
שאלות שאנחנו שומעים לפני כל התקשרות ב-Shopify
תשובות כנות, כולל אלו שרוב הסוכנויות מתחמקות מהן.
האם כדאי לי לעבור לארכיטקטורת Headless?
בדרך כלל עוד לא. Headless פותר בעיות רינדור וקומפוזיציה, לא עומס באפליקציה או ערכת נושא לא מותאמת. אנחנו בודקים תחילה כמה Liquid באמת עולה לכם, ובערך מחצית מהמותגים שפונים אלינו עוזבים עם תוכנית לתיקון ערכת הנושא.
מה ההבדל בין Hydrogen לבין Next.js בהקשר הזה?
Hydrogen הוא ה-React framework של Shopify, אשר מופעל על גבי Oxygen עם אירוח כלול. Next.js מציעה את אותו מודל רינדור על תשתית שבבעלותך ועבורה את/ה משלם/ת. הבחירה נוגעת בעיקר לשאלה מי מנהל את התפעול.
האם אני מאבד את הצ'ק-אאוט של Shopify?
לא, ואתם גם לא צריכים לרצות בכך. תהליך התשלום נשאר מאוחסן ב-Shopify עם Shop Pay והארנקים הדיגיטליים כפי שהם. Headless משנה את חזית החנות שלפני שלב התשלום, לא את תהליך התשלום שמאחוריו.
מה יקרה ל-SEO שלי?
כל תבנית מועברת מאחורי מפת הפניות המכסה את השטח האורגני הקיים שלכם, ונתונים מובנים נבנים מחדש עבור כל תבנית. שום דבר לא עולה לאוויר עד שנבדקה התאמה מלאה של כתובות ה-URL.
האם הצוות שלי עדיין יכול לערוך את האתר?
לא בעורך התבניות, וזהו המחיר האמיתי של headless. תוכן עריכתי עובר למערכת ניהול תוכן (CMS) מסוג headless עם אפשרות תצוגה מקדימה, ואת בקרות המרצ'נדייזינג יש לתכנן ולבנות במקום לקבל אותן בירושה.
מה העלות של בניית headless?
זה תלוי במספר התבניות, בהיקף ה-CMS ובשאלה האם אתם מארחים אותו בעצמכם. אנו מגדירים זאת בכתב עם מספר קבוע לפני תחילת העבודה — מודלי ההתקשרות לעיל מציגים את המתכונת שבה אנו עובדים.