Style et placement | SDK 2.0

Stylisez le bouton 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 applique des styles en ligne et remplace la feuille de style par défaut. C'est text la valeur prime également sur button.text. Utiliser className pour votre classe de bouton supplémentaire.

Champs de style pris en charge

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

Comportement du dialogue

La boîte de dialogue hébergée v3 est une feuille ancrée en bas, jusqu'à 1 000 px de large et 95 % de la hauteur de la fenêtre d'affichage. À 744 px ou moins, il est en plein écran. Revérifiez tous les remplacements CSS de boîte de dialogue existants après la migration.

Accessibilité et comportement des pages

Utilisez une étiquette descriptive et un contraste suffisant pour le bouton.
Testez l'accès au clavier, la restauration du focus, le comportement d'échappement et de défilement.
Vérifiez la mise en page sur de vrais téléphones, le texte zoomé et les écrans étroits.
Conservez les informations sur le produit et le paiement utilisables si SPREEAI ne peut pas se charger.

Emplacement Shopify

Utilisez les paramètres de blocage d'application dans l'éditeur de thème pour Shopify. Ne copiez pas les options de style Web SDK dans la configuration de l'application Shopify. Voir Intégration Shopify.

Références sources