स्टाइलिंग और प्लेसमेंट

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 होस्टेड डायलॉग एक बॉटम-एंकर्ड शीट है, जिसकी चौड़ाई 1000px तक और व्यूपोर्ट की ऊंचाई 95% है। 744px या उससे कम पर, यह पूर्ण स्क्रीन है। माइग्रेट करने के बाद किसी भी मौजूदा डायलॉग सीएसएस ओवरराइड को दोबारा जांचें।

अभिगम्यता और पृष्ठ व्यवहार

• बटन के लिए एक वर्णनात्मक लेबल और पर्याप्त कंट्रास्ट का उपयोग करें।
• कीबोर्ड एक्सेस, फोकस बहाली, एस्केप और स्क्रॉल व्यवहार का परीक्षण करें।
• वास्तविक फ़ोन, ज़ूम किए गए टेक्स्ट और संकीर्ण स्क्रीन पर लेआउट जांचें।
• यदि SPREEAI लोड नहीं हो पाता है तो उत्पाद जानकारी और चेकआउट को उपयोग योग्य रखें।

Shopify प्लेसमेंट

Shopify के लिए थीम एडिटर में ऐप ब्लॉक सेटिंग्स का उपयोग करें। Web SDK स्टाइलिंग विकल्पों को Shopify ऐप कॉन्फ़िगरेशन में कॉपी न करें। देखिये Shopify एकीकरण.