Styling und Platzierung

Gestalten Sie die Schaltfläche Web SDK

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 wendet Inline-Stile an und überschreibt das Standard-Stylesheet. Es ist text Wert hat auch Vorrang vor button.text. Benutzen className für Ihre zusätzliche Button-Klasse.

Unterstützte Stilfelder

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

Dialogverhalten

Der gehostete v3-Dialog ist ein unten verankertes Blatt mit einer Breite von bis zu 1000 Pixeln und 95 % der Höhe des Ansichtsfensters. Bei 744 Pixel oder kleiner ist es Vollbild. Überprüfen Sie nach der Migration erneut alle vorhandenen CSS-Überschreibungen für Dialoge.

Barrierefreiheit und Seitenverhalten

• Verwenden Sie eine beschreibende Beschriftung und ausreichenden Kontrast für die Schaltfläche.
• Testen Sie den Tastaturzugriff, die Wiederherstellung des Fokus sowie das Escape- und Scrollverhalten.
• Überprüfen Sie das Layout auf echten Telefonen, gezoomtem Text und schmalen Bildschirmen.
• Halten Sie die Produktinformationen und den Checkout nutzbar, wenn SPREEAI nicht geladen werden kann.

Shopify-Platzierung

Verwenden Sie die App-Blockeinstellungen im Theme-Editor für Shopify. Kopieren Sie die Web SDK-Styling-Optionen nicht in die Shopify-App-Konfiguration. Siehe Shopify-Integration.