Favicon (אייקון מועדפים) הוא תמונה קטנה או לוגו שמופיע ליד שם העמוד בלשונית הדפדפן, בסימניות ובמקומות נוספים. Shopify מתייחסת אליו כנכס מותג קטן שמוסיף זיהוי ומראה מקצועי לחנות.
למרות שה-Favicon קטן, הוא צריך להיבחר כמו כל נכס מותג אחר: קריא בגודל זעיר, פשוט, יציב, ולא תלוי בטקסט ארוך או בפרטים קטנים שלא נראים בלשונית דפדפן.
במדריך הזה
במדריך הזה נעסוק ביצירת Favicon, גודל תמונה מומלץ, הוספה דרך Theme editorTheme editor / עורך התבניתעורך התבנית שבו מנהלים מקטעים, בלוקים, מקורות דינמיים והגדרות עיצוב.פתיחה במילון (עורך התבנית), Alt text (טקסט חלופי), מגבלות תוכנית, תקלות נפוצות ובדיקות לאחר שמירה.
מה Shopify מגדירה כ-Favicon
Favicon (אייקון מועדפים) הוא תמונה קטנה או לוגו שמופיע ליד שם העמוד בלשונית הדפדפן, בסימניות ובמקומות נוספים שבהם הדפדפן מציג את האתר. Shopify מציגה אותו כפריט קטן שמחזק Brand (מותג) ונותן לחנות מראה מלוטש יותר. למרות שהוא קטן, הוא חלק מנכסי המותג ולא קובץ מקרי.
לפי Shopify, גודל אידאלי ל-Favicon הוא 16x16 פיקסלים או 32x32 פיקסלים. אם מעלים תמונה גדולה מדי, Shopify מקטינה אותה ל-32x32 פיקסלים. לכן לוגו עם טקסט ארוך, סמל דק מדי או תמונה מורכבת לא יעבדו טוב. עדיף להשתמש בסימן ברור, ראשי תיבות או אייקון מותג שנשאר קריא בגודל זעיר.
תנאים, תוכנית והוספה דרך Theme editorTheme editor / עורך התבניתעורך התבנית שבו מנהלים מקטעים, בלוקים, מקורות דינמיים והגדרות עיצוב.פתיחה במילון
הוספת Favicon זמינה בחנויות בתוכנית Basic ומעלה, ולא זמינה בתוכנית Starter לפי המקור של Shopify. מוסיפים אותו דרך Online Store > Themes, בחירת התבנית, Edit themeTheme / תבניתתבנית העיצוב והמבנה שמציגה את החנות ללקוחות ומשפיעה על עמודים, מקטעים, ביצועים ועריכה.פתיחה במילון (עריכת תבנית), ThemeTheme / תבניתתבנית העיצוב והמבנה שמציגה את החנות ללקוחות ומשפיעה על עמודים, מקטעים, ביצועים ועריכה.פתיחה במילון settings (הגדרות תבנית), ואז Logo או Favicon לפי גרסת התבנית.
| פעולה | דגש מעשי |
|---|---|
| Select image (בחירת תמונה) | אפשר לבחור קובץ שכבר הועלה או להעלות קובץ מהמחשב |
| Alt text (טקסט חלופי) | בחלק מהתבניות אפשר להוסיף תיאור קצר שמסייע כאשר תמונה לא נטענת ולמשתמשי קוראי מסך |
| Save (שמירה) | אחרי השמירה בודקים בלשונית דפדפן אמיתית, לא רק בתוך העורך |
תמונות בחנות לעומת Favicon
המאמר הזה עוסק בעיקר ב-Favicon, אבל בחנות Shopify נכסי תמונה מופיעים גם במוצרים, קולקציות, עמודים, בלוגים ותבנית. ההבדל הוא שתמונת מוצר צריכה להציג מידע מסחרי ברור, בעוד Favicon צריך להיות מזהה מותג קטן ויציב. לא כדאי להשתמש בתמונת מוצר כ-Favicon, ולא כדאי להשתמש ב-Favicon כתמונה שיווקית.
כאשר מחליפים נכסי מותג, בדקו שכל המקומות שבהם הלוגו מופיע עדיין מתאימים: Header (כותרת עליונה), Footer (כותרת תחתונה), Favicon, תבניות מייל, CheckoutCheckout / תהליך תשלוםשלב התשלום שבו לקוח מזין פרטים, בוחר משלוח ומשלים רכישה.פתיחה במילון (קופה) אם רלוונטי, ועמודי Customer accounts (חשבונות לקוח). Shopify מציינת שמגבלות מסוימות חלות על הצגת Favicon ב-Checkout ובחשבונות לקוח, במיוחד מחוץ ל-Shopify Plus.
פתרון תקלות
אם Favicon לא מופיע בתוצאות Google, Shopify מפנה לבדוק שה-Sitemap (מפת אתר) הוגשה ל-Google, וגם מזכירה שאין התחייבות ש-Google תציג את האייקון בכל מצב. אם האייקון לא מופיע ב-Checkout או Customer Accounts, צריך להבין שזה לא בהכרח באג בתבנית; יש מגבלות תוכנית ואפשרויות כמו Branding APIAPI / ממשק תכנות יישומיםממשק שמאפשר לאפליקציות ולמערכות חיצוניות לקרוא ולעדכן נתונים ב-Shopify.פתיחה במילון או Checkout Blocks במקרים מתקדמים.
בדיקת איכות לפני פרסום
לפני שמעלים שינוי לחנות פעילה, בודקים את אותו נושא בשלושה מקומות: 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, חזרו על הבדיקה לכל גרסה פעילה ולא רק לחנות ברירת המחדל.
שאלות נפוצות
מה הגודל המומלץ ל-Favicon?
Shopify מציינת שגודל אידאלי הוא 16x16 או 32x32 פיקסלים, ושקובץ גדול יותר יוקטן ל-32x32 בעת העלאה.
האם Favicon מופיע תמיד ב-Checkout?
לא בהכרח. Shopify מציינת מגבלות לגבי Customer Accounts ו-Checkout, ובמקרים מתקדמים נדרש Shopify Plus או שימוש בכלים כמו Branding API.