Branding editor ב-Checkout Blocks#

Branding editor (עורך מיתוג) ב-Checkout Blocks?Blocks / בלוקיםרכיבי תוכן או פעולה שניתן להוסיף לתבנית, לעמוד או לעיתים גם לעמודי אדמין.פתיחה במילון הוא כלי של Shopify Plus שמאפשר לערוך את האסתטיקה של Checkout?Checkout / תהליך תשלוםשלב התשלום שבו לקוח מזין פרטים, בוחר משלוח ומשלים רכישה.פתיחה במילון (קופה) ועמודי Accounts (חשבונות) בלי קוד. הכלי נשען על Checkout Branding API?API / ממשק תכנות יישומיםממשק שמאפשר לאפליקציות ולמערכות חיצוניות לקרוא ולעדכן נתונים ב-Shopify.פתיחה במילון, אבל העבודה היומיומית נעשית מתוך אפליקציית Checkout Blocks.

השינוי לא מוגבל רק למסך התשלום. עיצוב שמוגדר דרך Branding editor יכול להשפיע על כל עמודי ה-Checkout, כולל Thank you page (עמוד תודה), Order status page (עמוד סטטוס הזמנה) ועמודי Customer accounts (חשבונות לקוח חדשים).

במדריך הזה#

• זמינות ותפקיד הכלי
• צבעים וסכמות עיצוב
• אלמנטים שאפשר להתאים
• תצורות, Preview וייבוא JSON
• בדיקות לחנות בעברית

זמינות ותפקיד הכלי#

Branding editor זמין רק לחנויות Shopify Plus. מפעילים אותו דרך Apps > Checkout Blocks > Branding editor. כברירת מחדל, כשפותחים את הכלי עורכים את Checkout?Checkout / תהליך תשלוםשלב התשלום שבו לקוח מזין פרטים, בוחר משלוח ומשלים רכישה.פתיחה במילון configuration (תצורת קופה) הפעילה, אבל אפשר לעבור לתצורה אחרת או ליצור תצורת טיוטה דרך אזור התצורות.

העיקרון החשוב: זהו כלי מיתוג, לא כלי להעמסת תוכן שיווקי. המטרה היא לשמור על Checkout?Checkout / תהליך תשלוםשלב התשלום שבו לקוח מזין פרטים, בוחר משלוח ומשלים רכישה.פתיחה במילון אמין, קריא ועקבי עם המותג, בלי להסתיר פעולות, להחליש ניגודיות או לגרום ללקוח לחשוב שרכיב תשלום הוא פרסומת.

צבעים וסכמות עיצוב#

באזור Colors (צבעים) אפשר לערוך Global colors (צבעים גלובליים) וגם עד ארבע Color?Color / צבעערך צבע מובנה, שיכול לשמש לתצוגה, וריאנטים, דוגמיות צבע או מטא-שדות.פתיחה במילון schemes (סכמות צבע) שמוחלות על אזורים שונים. Shopify מפרידה בין Accent colors (צבעי הדגשה לרכיבים אינטראקטיביים כמו קישורים) לבין Brand colors (צבעי מותג, למשל לכפתורים ראשיים ומשניים).

אפשר לבחור צבע דרך Color?Color / צבעערך צבע מובנה, שיכול לשמש לתצוגה, וריאנטים, דוגמיות צבע או מטא-שדות.פתיחה במילון picker (בורר צבע) או להזין HEX code (קוד צבע). בחנות עם ספר מותג, שמרו ליד כל שינוי את קוד הצבע המדויק ולא רק צילום מסך.

אלמנטים שאפשר להתאים#

באזור Customizations (התאמות) Shopify מאפשרת לערוך אלמנטים כמו Favicon (אייקון לשונית דפדפן), Global corner radius (רדיוס פינות גלובלי), Header & logo (כותרת ולוגו), Main (אזור תוכן מרכזי), Order summary (סיכום הזמנה), Footer (פוטר), Typography (טיפוגרפיה), Buttons (כפתורים), Forms (טפסים) ו-Product thumbnails (תמונות מוצר קטנות).

תצורות, Preview וייבוא JSON#

אפשר להחליף Checkout?Checkout / תהליך תשלוםשלב התשלום שבו לקוח מזין פרטים, בוחר משלוח ומשלים רכישה.פתיחה במילון configuration מתוך ה-Branding editor כדי לערוך Live configuration (תצורה חיה) או Draft configuration (טיוטה). השתמשו ב-Preview כדי לפתוח את checkout and accounts editor (עורך קופה וחשבונות) עם השינויים ולראות איך הם נראים לפני פרסום.

Shopify מאפשרת גם Export configuration (ייצוא תצורה) ו-Import configuration (ייבוא תצורה) כקובצי JSON. זה שימושי כאשר רוצים לשמור גיבוי, להעביר פרופיל מיתוג בין תצורות או לבדוק שינוי גדול בלי לאבד נקודת חזרה.

``json { "owner": "design/commerce", "checkoutConfiguration": "Draft checkout - Hebrew market", "changedAreas": ["colors", "buttons", "forms"], "mustTest": ["mobile", "desktop", "thank-you", "order-status"] } ``

בדיקות לחנות בעברית#

בחנות RTL (ימין לשמאל), בדקו שהלוגו, הכפתורים, שדות הטופס, סיכום ההזמנה וקישורי המדיניות לא נראים כאילו נבנו רק ל-LTR (שמאל לימין). שילוב אנגלית בתוך עברית, למשל Shipping method (שיטת משלוח) או Billing address (כתובת חיוב), צריך להישאר קריא ולא לשבור שורות בצורה מוזרה.

לפני פרסום, עברו על מסלול מלא: מוצר, Cart (עגלה), Checkout?Checkout / תהליך תשלוםשלב התשלום שבו לקוח מזין פרטים, בוחר משלוח ומשלים רכישה.פתיחה במילון, תשלום נכשל, תשלום מוצלח, Thank you page, Order status page וחשבון לקוח. אם המיתוג נראה טוב ב-Checkout אבל פוגע בעמוד תודה או סטטוס הזמנה, השינוי עדיין לא מוכן.

צבעים אינטראקטיביים ומצבי פעולה#

כאשר עורכים כפתורים ושדות, בדקו לא רק את צבע ברירת המחדל אלא גם Hover (ריחוף), On select (בחירה), Disabled (לא פעיל) ושגיאה. ב-Checkout, מצב שגיאה צריך להיות ברור יותר מהמותג: אם צבע המותג דומה לצבע שגיאה או לצבע קישור, הלקוח לא יבין מה צריך לתקן.

Primary button (כפתור ראשי) צריך להיות האלמנט הכי ברור במסך, במיוחד במובייל. Secondary button (כפתור משני) לא אמור להתחרות בו. אם שני הכפתורים נראים באותה עוצמה, הלקוח יכול להתלבט בשלב התשלום במקום להתקדם.

טיפוגרפיה, פוטר ומדיניות#

Typography (טיפוגרפיה) משפיעה על קריאות שדות, כותרות, הודעות שגיאה וסיכום הזמנה. Shopify מאפשרת לערוך משפחת פונט, גודל, משקל, Kerning (ריווח אותיות) ו-Letter case (שימוש באותיות גדולות/קטנות) לרמות כותרת. בחנות עברית, בדקו שהפונט תומך עברית מלאה ולא יוצר החלפת פונט בין עברית לאנגלית.

Footer (פוטר) יכול לכלול Store policies (מדיניות חנות). אם אתם מסתירים או משנים את הפוטר, ודאו שקישורי החזרות, פרטיות, תנאי שירות ומשלוח עדיין זמינים. בקופה, קישור מדיניות קטן יכול למנוע פנייה לשירות או נטישה.

רקעים ותמונות#

Branding editor מאפשר להתאים אזורים כמו Main ו-Order summary גם עם Background images (תמונות רקע) ו-Border widths (עובי גבולות). השתמשו בזה בזהירות. תמונה יפה שלא נטענת מהר, או רקע שמוריד ניגודיות, פוגע ישירות בהשלמת רכישה.

אם מוסיפים תמונת רקע, בדקו רוחב מובייל, דחיסת קובץ, ניגודיות מול טקסט, ותצוגה בעמוד תודה ועמוד סטטוס הזמנה. אל תניחו שתמונה שעובדת במסך Checkout?Checkout / תהליך תשלוםשלב התשלום שבו לקוח מזין פרטים, בוחר משלוח ומשלים רכישה.פתיחה במילון הראשי תעבוד גם בסיכום ההזמנה או בחשבון לקוח.

Reset to default ותוכנית חזרה#

Shopify מאפשרת לאפס ערך ספציפי לברירת המחדל באמצעות Reset ליד הצבע או האלמנט ששונה, ואפשר גם לאפס את כל תצורת המיתוג לברירת המחדל. איפוס מלא מנקה את כל ההתאמות בתצורה, ולכן זו פעולה שצריך להבין לפני שמבצעים.

לפני שינוי גדול, ייצאו JSON של התצורה הקיימת ושמרו תיעוד של האלמנטים ששונו. כך אפשר להבחין בין חזרה נקודתית לצבע קודם לבין איפוס מלא שמוחק עבודת עיצוב רחבה יותר.

רשימת בדיקות לפרסום#

• צבע כפתור ראשי ברור במובייל ובדסקטופ.
• קישורים נראים כקישורים ולא כטקסט רגיל.
• שדות טופס ושגיאות קריאים בעברית.
• לוגו לא דוחף את התוכן או מסתיר ניווט.
• סיכום הזמנה נשאר ברור גם עם קופון, משלוח ומסים.
• עמוד תודה ועמוד סטטוס הזמנה נבדקו אחרי שינוי המיתוג.
• קובץ JSON נשמר לפני שינוי משמעותי.

טעויות נפוצות#

טעות נפוצה היא לערוך רק צבע כפתור ולהתעלם משדות, הודעות שגיאה וסיכום הזמנה. הלקוח לא חווה את הקופה ככפתור אחד; הוא חווה רצף של קריאה, הזנת מידע, בדיקת סכום ותשלום. לכן שינוי צבע חייב להיבדק יחד עם טפסים, פוטר וקישורי מדיניות.

טעות נוספת היא להשתמש במיתוג כהה או צבעוני מדי באזור Order summary. סיכום ההזמנה הוא המקום שבו הלקוח מאשר פריטים, הנחות, משלוח, מסים וסך לתשלום. אם המיתוג מקשה על סריקה של הסכום, הוא פוגע באמון גם אם הוא נראה יפה.

תהליך עבודה מומלץ לצוות#

הגדירו בעלים אחד לשינוי המיתוג ובעלים נוסף לבדיקת Checkout?Checkout / תהליך תשלוםשלב התשלום שבו לקוח מזין פרטים, בוחר משלוח ומשלים רכישה.פתיחה במילון. מי שמעצב לא תמיד יזהה בעיות תפעוליות, ומי שמפעיל את הקופה לא תמיד יזהה בעיות נגישות. הפרדה פשוטה בין "יוצר" ו"מאשר" מפחיתה טעויות לפני פרסום.

בחנויות עם כמה Markets, אל תפרסמו שינוי גלובלי לפני בדיקת השוק המרכזי והשוק הרגיש ביותר. אם ישראל היא השוק המרכזי, בדקו עברית, RTL ומטבע שקל. אם יש גם ארצות הברית או אירופה, בדקו אנגלית, מטבע וקישורי מדיניות רלוונטיים.

תיעוד לפני ואחרי#

לפני שינוי, שמרו צילום מסך של Checkout?Checkout / תהליך תשלוםשלב התשלום שבו לקוח מזין פרטים, בוחר משלוח ומשלים רכישה.פתיחה במילון, Thank you page ו-Order status page. אחרי שינוי, שמרו צילום נוסף עם אותו מוצר ואותו תרחיש. כך אפשר להשוות ולא להסתמך על זיכרון. אם מתגלה ירידה בהמרות, ההשוואה עוזרת להבין האם מדובר בצבע, מבנה, שדה, כפתור או שינוי אחר.

תיעוד מינימלי צריך לכלול תאריך, תצורה, אזורים ששונו, קובץ JSON אם יוצא, מי אישר, ומה תוצאות הבדיקה. זה מספיק כדי לחזור אחורה גם אם מי שביצע את השינוי לא זמין.

בדיקת נגישות בסיסית#

לפני פרסום, בדקו את הקופה בתאורה רגילה ובבהירות מסך נמוכה. אם צריך להתאמץ כדי לקרוא מחיר, הודעת שגיאה או כפתור, המיתוג חזק מדי. התאמת מותג טובה נראית שייכת לחנות אבל עדיין נותנת עדיפות להבנת הפעולה.

בדקו גם ניווט מקלדת ופוקוס ויזואלי. לקוח שמשתמש במקלדת צריך לראות איפה הוא נמצא בטופס. אם צבע הפוקוס נבלע ברקע או דומה מדי לצבע גבול רגיל, קשה להשלים Checkout?Checkout / תהליך תשלוםשלב התשלום שבו לקוח מזין פרטים, בוחר משלוח ומשלים רכישה.פתיחה במילון בלי עכבר.

קישורים פנימיים להמשך#

• Checkout Blocks ב-Shopify
• Using blocks in Checkout Blocks
• פתרון בעיות Checkout Blocks