Estilo e posicionamento | SDK 2.0

Estilize o botão 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 aplica estilos embutidos e substitui a folha de estilo padrão. É text o valor também tem precedência sobre button.text. Usar className para sua classe de botão adicional.

Campos de estilo suportados

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

Comportamento de diálogo

A caixa de diálogo hospedada v3 é uma folha ancorada na parte inferior, com até 1000px de largura e 95% da altura da janela de visualização. Com 744px ou mais estreito, é tela inteira. Verifique novamente todas as substituições de CSS da caixa de diálogo existente após a migração.

Acessibilidade e comportamento da página

Use um rótulo descritivo e contraste suficiente para o botão.
Teste o acesso ao teclado, restauração de foco, comportamento de escape e rolagem.
Verifique o layout em telefones reais, texto ampliado e telas estreitas.
Mantenha as informações do produto e a finalização da compra utilizáveis se SPREEAI não puder ser carregado.

Posicionamento Shopify

Use as configurações de bloqueio de aplicativo no editor de tema para Shopify. Não copie as opções de estilo Web SDK na configuração do aplicativo Shopify. Veja Integração com Shopify.

Referências de origem