Styling og plassering

Stil Web SDK-knappen

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 bruker innebygde stiler og overstyrer standard stilarket. Dens text verdi går også foran button.text. Bruk className for din ekstra knappeklasse.

Støttede stilfelt

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

Dialogadferd

Den v3-vertsbaserte dialogboksen er et bunnforankret ark, opptil 1000 px bredt og 95 % av visningsportens høyde. Ved 744px eller smalere er det fullskjerm. Sjekk alle eksisterende CSS-overstyringer i dialogboksen på nytt etter migrering.

Tilgjengelighet og sideadferd

• Bruk en beskrivende etikett og tilstrekkelig kontrast for knappen.
• Test tastaturtilgang, fokusgjenoppretting, flykte- og rulleadferd.
• Sjekk layout på ekte telefoner, zoomet tekst og smale skjermer.
• Hold produktinformasjon og kassen brukbar hvis SPREEAI ikke kan lastes.

Shopify plassering

Bruk appblokkinnstillingene i temaredigeringsprogrammet for Shopify. Ikke kopier Web SDK-stylingalternativer inn i Shopify-appkonfigurasjonen. Se Shopify-integrasjon.