스타일링 및 배치 | SDK 2.0

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 인라인 스타일을 적용하고 기본 스타일시트를 재정의합니다. 그 text 가치도 우선시된다 button.text. 사용 className 추가 버튼 클래스를 위해.

지원되는 스타일 필드

text, iconUrl, iconHeight, backgroundColor, textColor, width, height, borderRadius, fontSize, fontWeight, padding, border 그리고 boxShadow.

대화 동작

v3 호스팅 대화상자는 하단 고정 시트로, 최대 너비는 1000px이고 뷰포트 높이는 95%입니다. 744px 이하에서는 전체화면입니다. 마이그레이션 후 기존 대화상자 CSS 재정의가 있는지 다시 확인하세요.

접근성 및 페이지 동작

버튼에 대해 설명적인 라벨과 충분한 대비를 사용하세요.
키보드 액세스, 포커스 복원, Esc 및 스크롤 동작을 테스트합니다.
실제 휴대폰의 레이아웃, 확대된 텍스트, 좁은 화면을 확인하세요.
SPREEAI를 로드할 수 없는 경우 제품 정보 및 체크아웃을 사용할 수 있도록 유지하십시오.

Shopify 배치

Shopify용 테마 편집기에서 앱 차단 설정을 사용하세요. Web SDK 스타일 옵션을 Shopify 앱 구성에 복사하지 마세요. 참조 Shopify 연동.

소스 참조