Stile e posizionamento | SDK 2.0

Dai uno stile al pulsante Web SDK

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 applica gli stili in linea e sovrascrive il foglio di stile predefinito. Suo text anche il valore ha la precedenza button.text. Utilizzare className per la tua classe di pulsanti aggiuntiva.

Campi di stile supportati

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

Comportamento del dialogo

La finestra di dialogo ospitata v3 è un foglio ancorato in basso, largo fino a 1000 px e alto il 95% del viewport. A 744px o meno, è a schermo intero. Ricontrolla eventuali sostituzioni CSS di dialogo esistenti dopo la migrazione.

Accessibilità e comportamento della pagina

Utilizza un'etichetta descrittiva e un contrasto sufficiente per il pulsante.
Testare l'accesso alla tastiera, il ripristino della messa a fuoco, l'Escape e il comportamento di scorrimento.
Controlla il layout su telefoni reali, testo ingrandito e schermi stretti.
Mantieni utilizzabili le informazioni sul prodotto e il checkout se SPREEAI non può essere caricato.

Posizionamento Shopify

Utilizza le impostazioni del blocco app nell'editor del tema per Shopify. Non copiare le opzioni di stile Web SDK nella configurazione dell'app Shopify. Vedi Integrazione con Shopify.

Riferimenti alla fonte