Tyyli ja sijoitus

Muotoile Web SDK-painike

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 käyttää sisäisiä tyylejä ja ohittaa oletustyylitaulukon. Sen text arvo on myös etusijalla button.text. Käytä className lisäpainikeluokkaasi varten.

Tuetut tyylikentät

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

Dialoginen käyttäytyminen

V3-isännöity valintaikkuna on alaankkuroitu taulukko, jonka leveys on enintään 1000 pikseliä ja 95 % näkymän korkeudesta. 744 kuvapistettä tai kapeampi se on koko näyttö. Tarkista uudelleen mahdolliset olemassa olevat valintaikkunan CSS-ohoitukset siirron jälkeen.

Helppokäyttöisyys ja sivun toiminta

• Käytä painikkeelle kuvaavaa etikettiä ja riittävää kontrastia.
• Testaa näppäimistön käyttöä, tarkennuksen palautusta, Escape- ja rullauskäyttäytymistä.
• Tarkista asettelu oikeilla puhelimilla, zoomatulla tekstillä ja kapeilla näytöillä.
• Pidä tuotetiedot ja kassa käyttökelpoisina, jos SPREEAI ei lataudu.

Shopify sijoitus

Käytä Shopify:n teemaeditorin sovelluslohko-asetuksia. Älä kopioi Web SDK-tyyliasetuksia Shopify-sovelluksen kokoonpanoon. Katso Shopify-integraatio.