Styling & placering | SDK 2.0

Style knappen 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 anvender indlejrede typografier og tilsidesætter standardtypografiarket. Dens text værdi har også forrang button.text. Brug className til din ekstra knapklasse.

Understøttede stilfelter

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

Dialogadfærd

Den v3 hostede dialog er et bundforankret ark, op til 1000px bredt og 95 % af viewportens højde. Ved 744px eller smallere er det fuld skærm. Tjek igen eventuelle eksisterende CSS-tilsidesættelser i dialogboksen efter migrering.

Tilgængelighed og sideadfærd

Brug en beskrivende etiket og tilstrækkelig kontrast til knappen.
Test tastaturadgang, fokusgendannelse, Escape og scroll-adfærd.
Tjek layout på rigtige telefoner, zoomet tekst og smalle skærme.
Hold produktinformation og kassen brugbar, hvis SPREEAI ikke kan indlæses.

Shopify placering

Brug appblokindstillingerne i temaeditoren til Shopify. Kopier ikke Web SDK-stylingindstillinger til Shopify-appkonfigurationen. Se Shopify-integration.

Kildehenvisninger