שימוש ב-Rich text editor ב-Shopify#

Rich text editor (עורך טקסט עשיר) של Shopify משמש לעיצוב תוכן שמוצג בחנות אונליין, כמו Product descriptions (תיאורי מוצרים), Collection?Collection / קולקציהמונח Shopify שמשמעותו בעברית: קולקציה. ההקשר המדויק תלוי בעמוד או בתהליך שבו המונח מופיע.פתיחה במילון descriptions (תיאורי קולקציות), Blog posts (פוסטים), Pages (עמודים) ו-Store policies (מדיניות חנות).

כדי ליצור פסקה חדשה, לוחצים enter או return. כדי להוסיף Line break (שבירת שורה) בלי פסקה חדשה, מחזיקים shift ולוחצים enter או return.

במדריך הזה#

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

איפה משתמשים בעורך#

אפשר לערוך תוכן בכמה אזורים: Product descriptions, Collection?Collection / קולקציהמונח Shopify שמשמעותו בעברית: קולקציה. ההקשר המדויק תלוי בעמוד או בתהליך שבו המונח מופיע.פתיחה במילון descriptions, Blog posts, Pages ו-Store Policies. אם משתמשים בתבנית שתומכת בכך, אפשר גם להוסיף Rich text sections (מקטעי טקסט עשיר) לעמודים או Templates (תבניות) דרך Theme editor?Theme editor / עורך התבניתעורך התבנית שבו מנהלים מקטעים, בלוקים, מקורות דינמיים והגדרות עיצוב.פתיחה במילון.

HTML ותוכן מוטמע#

אפשר להזין HTML בעורך עבור פוסטים, עמודים, תיאורי מוצרים ותיאורי קולקציות. לחצו על Show HTML או Edit code כדי לראות את הקוד. ב-HTML view אפשר להוסיף תמונות, סרטונים או טבלאות ולתקן פריסה.

כדי להטמיע Video widget (ווידג׳ט וידאו) או Music widget (ווידג׳ט מוזיקה), מארחים את המדיה בשירות כמו YouTube, Vimeo או SoundCloud, מעתיקים את Embed code (קוד הטמעה), פותחים HTML בעורך, מדביקים ושומרים.

עיצוב טקסט וטבלאות#

כפתור Formatting (עיצוב) מאפשר לבחור Paragraph (פסקה), Heading (כותרת 1-6) או Blockquote (ציטוט). כותרות נכונות עוזרות לקוראים ולמנועי חיפוש להבין את מבנה התוכן.

אפשר להחיל Bold (מודגש), Italic (נטוי), Underline (קו תחתון), Bulleted list (רשימת נקודות), Numbered list (רשימה ממוספרת), Indent (הזחה), Alignment (יישור), Text color?Color / צבעערך צבע מובנה, שיכול לשמש לתצוגה, וריאנטים, דוגמיות צבע או מטא-שדות.פתיחה במילון (צבע טקסט) ו-Background color?Color / צבעערך צבע מובנה, שיכול לשמש לתצוגה, וריאנטים, דוגמיות צבע או מטא-שדות.פתיחה במילון (צבע רקע). כדי לנקות עיצוב, מסמנים תוכן ולוחצים Clear formatting.

כדי להוסיף Table (טבלה), לוחצים Insert table. אחרי יצירת הטבלה אפשר להוסיף שורות ועמודות, למחוק שורה או עמודה, או למחוק את כל הטבלה.

קישורים וקבצים#

אפשר להוסיף Hyperlinks (קישורים) לעמודים בחנות, לאתרים חיצוניים, לכתובות אימייל או למספרי טלפון. סמנו טקסט או תמונה, לחצו Insert link, הזינו יעד, הוסיפו Link title (כותרת קישור), בחרו אם לפתוח באותו חלון או בחלון חדש, ולחצו Insert link.

Internal links (קישורים פנימיים) משתמשים ב-short URL?URL / כתובת קישורכתובת קישור תקינה שנשמרת כשדה מובנה או כמטא-שדה.פתיחה במילון (כתובת קצרה), למשל /collections. External links (קישורים חיצוניים) צריכים להתחיל ב-http:// או https://.

כדי לקשר לקובץ, מעלים אותו ב-Content > Files, מעתיקים את URL?URL / כתובת קישורכתובת קישור תקינה שנשמרת כשדה מובנה או כמטא-שדה.פתיחה במילון (כתובת הקובץ), ואז מוסיפים אותו כקישור בעורך. Shopify מציינת שכתובת הקובץ צריכה להתחיל ב-http://cdn.shopify.com/.

תמונות, וידאו ואודיו#

להוספת תמונה אפשר להעלות קובץ, לבחור Product image (תמונת מוצר), או להשתמש ב-Image URL?URL / כתובת קישורכתובת קישור תקינה שנשמרת כשדה מובנה או כמטא-שדה.פתיחה במילון (כתובת תמונה ציבורית). לכל מוצר יכולות להיות עד 250 תמונות משויכות, כולל וריאנטים, אבל אין מגבלה למספר התמונות שאפשר להשתמש בהן באזורים אחרים בחנות.

אפשר להזיז תמונה בתוך תוכן, לשנות גודל באמצעות גרירה מפינה, לערוך גודל ויישור, להוסיף Alt text (טקסט חלופי), להגדיר spacing (מרווחים), ולהפעיל Wrap text around image (גלישת טקסט סביב תמונה).

להטמעת וידאו, Shopify ממליצה להעלות את הסרטון לשירות Streaming (הזרמה) כמו YouTube או Vimeo, ליצור Embed code, ולהדביק אותו דרך Insert video. להטמעת אודיו, מעלים את קובץ האודיו ל-Files ומטמיעים תגית <audio> עם כתובת הקובץ.

תגובות פנימיות והבנת העורך#

אפשר להשתמש ב-comment tags (תגיות תגובה) מסוג <!-- ו---> לטקסט שלא רוצים לפרסם בחנות. כדי להוסיף, פותחים Show HTML, עוטפים את הטקסט בתגיות, ושומרים. תגיות HTML שבתוך תגובה נשמרות כטקסט פנימי; כדי שהן יעבדו, צריך להסיר את תגיות התגובה.

העורך מבוסס TinyMCE CDN (רשת אספקת תוכן). יש לו מגבלת Content limit (מגבלת תוכן) של 64KB לעמודים, פוסטים ו-Additional scripts, והוא מבצע HTML sanitization (ניקוי HTML) שמתקן קוד אוטומטית כדי למנוע תקלות תצוגה וסיכוני אבטחה.

פתרון בעיות#

• אם עיצוב שהועתק מ-Word או מאתר אחר גורם לתצוגה שונה, בדקו עותק של העמוד עם Clear formatting או HTML stripper.
• אם תמונה וטקסט לא מיושרים, Shopify ממליצה להעביר את תגית <img> לתחילת הפסקה מחוץ לתגית <p> ולהסיר תגיות <span> מיותרות.
• אם mailto: לא עובד, ודאו שהקישור במבנה mailto:email@example.com.
• אם גודל תמונה חוזר לגודל המקורי, בדקו ש-src ו-data-mce-src תואמים.
• אם Shopify משנה HTML אוטומטית, זה בדרך כלל חלק ממנגנון sanitization. Shopify ממליצה לעבוד עם התיקונים האוטומטיים ולא להחזיר ידנית קוד מסוכן.
• אם קישורים מוציאים לקוחות מה-Market (שוק) שלהם, השתמשו בקישורים פנימיים שמתחילים ב-/ במקום כתובות מלאות עם דומיין.