التصميم والتنسيب

صمم الزر 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% من ارتفاع إطار العرض. بحجم 744 بكسل أو أقل، يتم عرضه بملء الشاشة. أعد التحقق من أي تجاوزات موجودة لمربع حوار CSS بعد الترحيل.

إمكانية الوصول وسلوك الصفحة

• استخدم تسمية وصفية وتباينًا كافيًا للزر.
• اختبار الوصول إلى لوحة المفاتيح، واستعادة التركيز، وسلوك الهروب والتمرير.
• تحقق من التخطيط على الهواتف الحقيقية والنص المكبر والشاشات الضيقة.
• احتفظ بمعلومات المنتج والخروج قابلة للاستخدام إذا تعذر تحميل SPREEAI.

موضع Shopify

استخدم إعدادات كتلة التطبيق في محرر السمات لـ Shopify. لا تقم بنسخ خيارات التصميم Web SDK إلى تكوين تطبيق Shopify. انظر تكامل Shopify.