Стиль і розміщення

Стиль кнопки 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.

Посилання на джерела