עזרה
התחברות

הוספת CSS מותאם אישית לערכת הנושא

גיליונות סגנון מדורגים (CSS) משנים את אופן ההצגה של אלמנטים בערכת הנושא שלך, ויכולים לשלוט במראה של מספר דפים במקביל. ניתן להתאים אישית את ערכת הנושא מעבר להגדרות המובנות בה באמצעות שימוש בתכונת ה-CSS המותאם אישית. לדוגמה, ניתן להשתמש ב-CSS להגדרת מעברי צבע בהגדרות הצבע של ערכת הנושא. אפשר להוסיף CSS מותאם אישית לערכת הנושא כולה, או למקטע ספציפי של תבנית בערכת הנושא. CSS מותאם אישית אינו נתמך בדף התשלום בקופה.

התאמה אישית של ה-CSS דורשת היכרות מסוימת עם CSS ו-HTML. לפני התאמה אישית של ערכת הנושא, יש לוודא שהבנת איזו רמת תמיכה זמינה עבורך.

בדף זה

שיקולים לשימוש ב-CSS מותאם אישית

לפני הוספת CSS מותאם אישית לערכת הנושא שלך, כדאי לעבור על השיקולים הבאים:

  • הבוררים (selectors) והמאפיינים הבאים של CSS אינם נתמכים ב-CSS מותאם אישית:
    • לא ניתן להשתמש בכללי At-rules מסוג @import, @charset, ו-@namespace
    • עבור CSS ברמת המקטע, מותרים רק כללי At-rules מסוג @media, @container, @layer ו-@supports
    • עבור CSS ברמת המקטע, לא ניתן לכוון (target) את המזהה (ID) או המחלקות של אלמנט העטיפה Shopify Section שערכת הנושא מרנדרת עם המחלקה shopify-section
    • המאפיין content אינו זמין ב-CSS מותאם אישית
  • אם כלל CSS מותאם אישית מוצהר עם התג שעוטף את אלמנט מקטע האב, הוא נחשב לתג צאצא (descendent tag), וכלל העיצוב יוחל על אותו מקטע. שים לב שכברירת מחדל, מקטע האב עטוף בתג <div>, אך מפתחי ערכות נושא יכולים לשנות זאת לכל אחד מהערכים המותרים בסכימת המקטע.
  • נכון לעכשיו, רק הדומיין https://cdn.shopify.com מותר לשימוש בכתובות URL בתוך CSS מותאם אישית.
  • גופנים מותאמים אישית אינם מוגבלים. עם זאת, גופנים מותאמים אישית הם משאב נפרד שמורד על ידי דפדפנים לפני רינדור הטקסט, דבר שעשוי להשפיע על הביצועים הכלליים של החנות. באחריותך לוודא שחזית החנות שלך אינה מושפעת לרעה מגופנים מותאמים אישית. למידע נוסף על שימוש בגופנים מותאמים אישית בערכת הנושא שלך.
  • כללי CSS שמשפיעים על ערכת הנושא כולה מוגבלים ל-1,500 תווים.
  • כללי CSS שמשפיעים על מקטע ספציפי מוגבלים ל-500 תווים.
  • בהתאם לבוררים (selectors) או למחלקות ה-CSS שבהם אתה משתמש, עדכון ערכת הנושא שלך עשוי לגרום ל-CSS המותאם אישית להפסיק לפעול.

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

הוספת CSS מותאם אישית

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

שלבים:

  1. במנהל של Shopify, עבור אל חנות מקוונת > ערכות נושא.

  2. לחץ על ערוך ערכת נושא.

  3. לחץ על הגדרות ערכת נושא.

  4. לחץ על CSS מותאם אישית.

  5. הוסף את הקוד שלך.

  6. לחץ על שמירה.

מיקום התיבה של CSS מותאם אישית בהגדרות ערכת הנושא

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

שלבים:

  1. במנהל של Shopify, עבור אל חנות מקוונת > ערכות נושא.

  2. לחץ על ערוך ערכת נושא.

  3. לחץ על המקטע שאליו תרצה להוסיף CSS.

  4. בתחתית הלוח של מאפייני המקטע, לחץ על CSS מותאם אישית.

  5. הוסף את הקוד שלך.

  6. לחץ על שמירה.

מיקום התיבה של CSS מותאם אישית בהגדרות המקטע

משאבים נוספים בנושא CSS

התאמה אישית של ה-CSS דורשת היכרות מסוימת עם CSS ו-HTML. לפני התאמה אישית של ערכת הנושא, יש לוודא שהבנת איזו רמת תמיכה זמינה עבורך.

אם אתה מעוניין ללמוד עוד על CSS, תוכל לעיין במשאבים הבאים: