Dale estilo al botón 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 aplica estilos en línea y anula la hoja de estilo predeterminada. su text El valor también tiene prioridad sobre button.text. uso className para su clase de botón adicional.
Campos de estilo admitidos
text, iconUrl, iconHeight, backgroundColor, textColor, width, height, borderRadius, fontSize, fontWeight, padding, border y boxShadow.
Comportamiento del diálogo
El cuadro de diálogo alojado v3 es una hoja anclada en la parte inferior, de hasta 1000 px de ancho y el 95 % de la altura de la ventana gráfica. Con 744 px o menos, es pantalla completa. Vuelva a verificar cualquier anulación de CSS de diálogo existente después de la migración.
Accesibilidad y comportamiento de la página.
- Utilice una etiqueta descriptiva y suficiente contraste para el botón.
- Pruebe el acceso al teclado, la restauración del enfoque, el escape y el comportamiento de desplazamiento.
- Verifique el diseño en teléfonos reales, texto ampliado y pantallas estrechas.
- Mantenga la información del producto y el proceso de pago utilizables si SPREEAI no se puede cargar.
Colocación de Shopify
Utilice la configuración del bloque de aplicaciones en el editor de temas para Shopify. No copie las opciones de estilo de Web SDK en la configuración de la aplicación Shopify. Ver Integración con Shopify.