Pag-istilo at paglalagay | SDK 2.0

I-istilo ang Web SDK na button

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 inilalapat ang mga inline na istilo at ino-override ang default na stylesheet. Nito text inuuna din ang halaga button.text. Gamitin className para sa iyong karagdagang klase ng button.

Mga sinusuportahang field ng istilo

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

Pag-uugali ng diyalogo

Ang v3 na naka-host na dialog ay isang bottom-anchored sheet, hanggang sa 1000px ang lapad at 95% ng taas ng viewport. Sa 744px o mas makitid, full screen ito. Suriin muli ang anumang umiiral na mga pag-override ng CSS sa dialog pagkatapos mag-migrate.

Accessibility at pag-uugali ng page

Gumamit ng mapaglarawang label at sapat na contrast para sa button.
Subukan ang pag-access sa keyboard, pagpapanumbalik ng focus, Pag-escape at pag-scroll sa pag-uugali.
Suriin ang layout sa mga totoong telepono, naka-zoom na text at makitid na screen.
Panatilihing magagamit ang impormasyon ng produkto at pag-checkout kung hindi ma-load ang SPREEAI.

Shopify na pagkakalagay

Gamitin ang mga setting ng block ng app sa theme editor para sa Shopify. Huwag kopyahin ang mga opsyon sa pag-istilo ng Web SDK sa configuration ng Shopify app. Tingnan mo Pagsasama ng Shopify.

Mga sanggunian sa pinagmulan