סטיילינג ומיקום

סגנון את כפתור Web SDK

import type { RenderTryOnButtonOptions } from "@spreeai/web-sdk";

export const brandedButton: RenderTryOnButtonOptions = {
  elementId: "spreeai-try-on",
  garments: [{ garmentId: "YOUR_READY_GARMENT_ID" }],
  className: "product-try-on",
  features: {
    tryOnButton: {
      text: "Try it on you",
      backgroundColor: "#171717",
      textColor: "#ffffff",
      borderRadius: "6px",
      padding: "14px 24px",
      fontSize: "16px",
      width: "100%",
    },
  },
};

features.tryOnButton מחיל סגנונות מוטבעים ומחליף את גיליון הסגנונות המוגדר כברירת מחדל. שלה text הערך גם הוא עדיפות button.text. השתמש className עבור כיתת הכפתורים הנוספת שלך.

שדות סגנון נתמכים

text, iconUrl, iconHeight, backgroundColor, textColor, width, height, borderRadius, fontSize, fontWeight, padding, border ו boxShadow.

התנהגות דיאלוג

תיבת הדו-שיח המתארחת v3 היא גיליון מעוגן תחתון, ברוחב של עד 1000 פיקסלים ו-95% מגובה יציאת התצוגה. ב-744px או יותר, זה מסך מלא. בדוק שוב כל ביטול CSS של דו-שיח קיים לאחר ההעברה.

נגישות והתנהגות דפים

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

מיקום Shopify

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