اسٹائلنگ اور پلیسمنٹ

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 یا اس سے زیادہ تنگ، یہ پوری اسکرین ہے۔ منتقلی کے بعد کسی بھی موجودہ ڈائیلاگ CSS اوور رائیڈز کو دوبارہ چیک کریں۔

رسائی اور صفحہ کا برتاؤ

• بٹن کے لیے وضاحتی لیبل اور کافی کنٹراسٹ استعمال کریں۔
• کی بورڈ تک رسائی، توجہ کی بحالی، فرار اور اسکرول رویے کی جانچ کریں۔
• اصلی فونز، زوم شدہ ٹیکسٹ اور تنگ اسکرینوں پر لے آؤٹ چیک کریں۔
• اگر SPREEAI لوڈ نہیں ہو سکتا تو پروڈکٹ کی معلومات اور چیک آؤٹ کو قابل استعمال رکھیں۔

Shopify جگہ کا تعین

Shopify کے لیے تھیم ایڈیٹر میں ایپ بلاک کی ترتیبات استعمال کریں۔ Web SDK اسٹائلنگ کے اختیارات کو Shopify ایپ کنفیگریشن میں کاپی نہ کریں۔ دیکھیں Shopify انضمام.