Şekillendirme ve yerleştirme | SDK 2.0

Web SDK düğmesine stil verin

TypeScript

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 satır içi stilleri uygular ve varsayılan stil sayfasını geçersiz kılar. onun text değer de önceliklidir button.text. Kullanım className ek düğme sınıfınız için.

Desteklenen stil alanları

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

Diyalog davranışı

V3'te barındırılan iletişim kutusu, 1000 piksele kadar genişliğe ve görünüm yüksekliğinin %95'ine kadar, alttan bağlantılı bir sayfadır. 744px veya daha dar bir çözünürlükte tam ekrandır. Taşıma işleminden sonra mevcut iletişim kutusu CSS geçersiz kılmalarını yeniden kontrol edin.

Erişilebilirlik ve sayfa davranışı

Düğme için açıklayıcı bir etiket ve yeterli kontrast kullanın.
Klavye erişimini, odak restorasyonunu, Kaçış ve kaydırma davranışını test edin.
Gerçek telefonlarda, yakınlaştırılmış metinlerde ve dar ekranlarda düzeni kontrol edin.
SPREEAI yüklenemezse ürün bilgilerini ve ödemeyi kullanılabilir durumda tutun.

Shopify yerleştirme

Shopify için tema düzenleyicisindeki uygulama bloğu ayarlarını kullanın. Web SDK stil seçeneklerini Shopify uygulama yapılandırmasına kopyalamayın. Bkz. Shopify entegrasyonu.

Kaynak referansları