Styling și plasare | SDK 2.0

Modelați butonul 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 aplică stiluri inline și înlocuiește foaia de stil implicită. Ei text valoarea are de asemenea prioritate asupra button.text. Utilizați className pentru clasa de buton suplimentară.

Câmpuri de stil acceptate

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

Comportamentul dialogului

Dialogul găzduit v3 este o foaie ancorată în jos, cu o lățime de până la 1000 px și 95% din înălțimea ferestrei de vizualizare. La 744 px sau mai îngust, este ecran complet. Verificați din nou orice suprascrieri CSS de dialog existente după migrare.

Accesibilitatea și comportamentul paginii

Utilizați o etichetă descriptivă și un contrast suficient pentru buton.
Testați accesul la tastatură, restabilirea focalizării, comportamentul Escape și derulare.
Verificați aspectul pe telefoanele reale, textul mărit și ecranele înguste.
Păstrați informațiile despre produs și finalizarea comenzii utilizabile dacă SPREEAI nu se poate încărca.

Plasare Shopify

Utilizați setările de blocare a aplicației în editorul de teme pentru Shopify. Nu copiați opțiunile de stil Web SDK în configurația aplicației Shopify. Vezi Integrare Shopify.

Referințe surse