Styling & placering | SDK 2.0

Styla Web SDK-knappen

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 tillämpar inline-stilar och åsidosätter standardformatmallen. dess text värde har också företräde button.text. Använd className för din extra knappklass.

Stilfält som stöds

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

Dialogbeteende

V3-värddialogrutan är ett bottenförankrat ark, upp till 1000px brett och 95 % av visningsportens höjd. Vid 744px eller smalare är det helskärm. Kontrollera alla befintliga CSS-åtsidosättningar i dialogrutan igen efter migreringen.

Tillgänglighet och sidbeteende

Använd en beskrivande etikett och tillräcklig kontrast för knappen.
Testa tangentbordsåtkomst, fokusåterställning, Escape och rullningsbeteende.
Kolla layout på riktiga telefoner, zoomad text och smala skärmar.
Håll produktinformation och kassan användbar om SPREEAI inte kan laddas.

Shopify placering

Använd inställningarna för appblockering i temaredigeraren för Shopify. Kopiera inte Web SDK-stylingalternativ till Shopify-appkonfigurationen. Se Shopify-integration.

Källhänvisningar