Stylizacja i rozmieszczenie | SDK 2.0

Stylizuj przycisk 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 stosuje style wbudowane i zastępuje domyślny arkusz stylów. Jego text wartość również ma pierwszeństwo button.text. Użyj className dla dodatkowej klasy przycisku.

Obsługiwane pola stylu

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

Zachowanie dialogowe

Hostowane okno dialogowe wersji 3 to arkusz zakotwiczony u dołu, o szerokości do 1000 pikseli i 95% wysokości rzutni. Przy rozdzielczości 744 pikseli lub mniejszej jest to pełny ekran. Po migracji sprawdź ponownie wszystkie istniejące zastąpienia CSS okna dialogowego.

Dostępność i zachowanie strony

Użyj etykiety opisowej i odpowiedniego kontrastu dla przycisku.
Przetestuj dostęp do klawiatury, przywrócenie fokusu, zachowanie ucieczki i przewijania.
Sprawdź układ na prawdziwych telefonach, powiększonym tekście i wąskich ekranach.
Zachowaj informacje o produkcie i kasie, jeśli nie można załadować SPREEAI.

Umiejscowienie Shopify

Użyj ustawień blokowania aplikacji w edytorze motywów dla Shopify. Nie kopiuj opcji stylizacji Web SDK do konfiguracji aplikacji Shopify. Zobacz Integracja z Shopify.

Odniesienia źródłowe