איך להוסיף RTL ל-Shopify (ולמה זה לא רק יישור לימין)
חולצת פשתן — לבן קלאסי
₪189 ₪269
היום 👆
“נשנה את היישור לימין וזהו” — זו הטעות הנפוצה ביותר של חנויות עבריות
ב-Shopify. RTL אמיתי הוא הרבה יותר מ-text-align: right. במדריך הזה
נסביר מה RTL באמת דורש, ואיך עושים את זה בשלוש דרכים.
מה RTL באמת כולל
כשדף עובר לימין-לשמאל, כל אלה צריכים להתהפך יחד:
- כיוון המסמך —
dir="rtl"על ה-HTML, שמהפך את זרימת הטקסט והרכיבים. - פריסות (Layout) — עמודות, גריד ותפריטים צריכים להיבנות מימין.
- אייקונים וחצים — חץ “המשך” שמצביע ימינה באנגלית צריך להצביע שמאלה בעברית. אייקון סל בצד שמאל של כפתור צריך לעבור ימינה.
- קרוסלות וגלילה — סליידר מוצרים אמור להתחיל מימין ולהיגלל שמאלה.
- ריווחים ומרג’ינים — כל
margin-leftשנכתב בקוד צריך להפוך ל-margin-right(או נכון יותר: ל-margin-inline-start). - טקסט דו-כיווני (BiDi) — מחירים, מספרי טלפון ושמות מותג לועזיים בתוך משפט עברי דורשים טיפול כדי לא “להתפרק”.
מי שמדלג על אחד מאלה מקבל את מה שתיארנו בבעיות העיצוב הנפוצות — חנות שנראית כמעט נכון, וזה ה“כמעט” שהלקוחות מרגישים.
דרך 1: CSS ידני
פותחים את קוד התבנית ומתקנים: dir="rtl" ב-layout, החלפת כל המאפיינים
הכיווניים ל-Logical Properties (inline-start/inline-end), היפוך
אייקונים עם transform: scaleX(-1) איפה שצריך, והגדרת כיוון לקרוסלות.
מתאים אם: יש לכם מפתח/ת שמכיר Liquid ו-CSS, והתבנית פשוטה.
החסרונות: כל עדכון של התבנית דורס את התיקונים; כל תוספת (סקשן חדש, אפליקציה חדשה) דורשת סבב תיקונים נוסף; וקל לפספס פינות — במיוחד בקופה ובאימיילים.
דרך 2: תבנית שכבר תומכת RTL
יש תבניות (בעיקר בתשלום) שמגיעות עם תמיכת RTL מובנית. זו נקודת פתיחה טובה לחנות חדשה.
החסרונות: הבחירה מצומצמת מאוד לעומת שוק התבניות המלא; “תמיכת RTL” מוצהרת היא לא תמיד מלאה; ואם אתם כבר על תבנית שאתם אוהבים — החלפה היא פרויקט שלם של עיצוב מחדש.
דרך 3: אפליקציה שמיישרת את התבנית הקיימת
אפליקציית RTL עושה את ההיפוך אוטומטית על כל תבנית: מזהה את הרכיבים, מחילה את הכיוון, מטפלת באייקונים ובקרוסלות, ושורדת עדכוני תבנית כי היא לא נוגעת בקוד המקור.
מתאים אם: אתם רוצים להישאר עם התבנית שלכם, בלי מפתח, ושהתוצאה תחזיק לאורך זמן.
זו הדרך שאנחנו בנינו: האפליקציה העברית של Rtlize נותנת RTL מלא על התבנית הקיימת — כולל עברות טקסטים והתאמות עיצוב ישראליות — בהפעלה אחת מעורך התבנית. איך זה עובד בפועל — במדריך ההתחלה שלנו.
איך בודקים שה-RTL באמת מלא
עברו על הצ’ק-ליסט הזה אחרי כל פתרון שתבחרו:
- עמוד הבית — כל הסקשנים זורמים מימין?
- עמוד מוצר — מחיר, כפתורים ואייקונים בצד הנכון?
- קרוסלות — מתחילות מימין ונגללות נכון?
- תפריט מובייל — נפתח מהצד הנכון?
- קופה — שדות, כפתורי המשך והודעות שגיאה?
- אימיילים אוטומטיים — אישור הזמנה ומשלוח?
אם משהו מהרשימה לא מסתדר — דברו איתנו, זה בדיוק התחום שלנו.