Styling & plaatsing | SDK 2.0

Stijl de Web SDK-knop

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 past inline stijlen toe en overschrijft het standaard stylesheet. Het is text waarde heeft ook voorrang button.text. Gebruik className voor uw extra knopklasse.

Ondersteunde stijlvelden

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

Dialooggedrag

Het door v3 gehoste dialoogvenster is een aan de onderkant verankerd blad, tot 1000 px breed en 95% van de viewport-hoogte. Bij 744px of smaller is het een volledig scherm. Controleer eventuele bestaande CSS-overschrijvingen voor dialoogvensters opnieuw na de migratie.

Toegankelijkheid en paginagedrag

Gebruik een beschrijvend label en voldoende contrast voor de knop.
Test toetsenbordtoegang, focusherstel, Escape- en scrollgedrag.
Controleer de lay-out op echte telefoons, ingezoomde tekst en smalle schermen.
Houd productinformatie en afrekenen bruikbaar als SPREEAI niet kan laden.

Shopify plaatsing

Gebruik de app-blokinstellingen in de thema-editor voor Shopify. Kopieer de Web SDK-stijlopties niet naar de Shopify-appconfiguratie. Zie Shopify integratie.

Bronreferenties