Стилизация и размещение

Оформление кнопки 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.

Поведение диалога

Размещенное диалоговое окно версии 3 представляет собой привязанный снизу лист шириной до 1000 пикселей и занимающий 95 % высоты области просмотра. При разрешении 744 пикселя или уже — полноэкранный режим. После миграции повторно проверьте все существующие переопределения CSS диалоговых окон.

Доступность и поведение страницы

Используйте для кнопки описательную надпись и достаточный контраст.
Проверьте доступ к клавиатуре, восстановление фокуса, поведение Escape и прокрутки.
Проверьте макет на реальных телефонах, увеличенный текст и узкие экраны.
Сохраняйте информацию о продукте и возможность оформления заказа, если SPREEAI не может загрузиться.

Размещение Shopify

Используйте настройки блокировки приложений в редакторе тем для Shopify. Не копируйте параметры стиля Web SDK в конфигурацию приложения Shopify. См. Интеграция с Shopify.

Ссылки на источники