Styl a umístění | SDK 2.0

Upravte styl tlačítka 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 použije vložené styly a přepíše výchozí šablonu stylů. Jeho text hodnota má také přednost button.text. Použijte className pro vaši další třídu tlačítek.

Podporovaná pole stylu

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

Dialogové chování

Hostovaný dialog v3 je list ukotvený dole, až 1000 pixelů na šířku a 95 % výšky výřezu. Při 744 pixelech nebo užších je to celá obrazovka. Po migraci znovu zkontrolujte všechna existující dialogová přepsání CSS.

Přístupnost a chování stránky

Použijte popisný štítek a dostatečný kontrast tlačítka.
Otestujte přístup z klávesnice, obnovení fokusu, Escape a chování posouvání.
Zkontrolujte rozložení na skutečných telefonech, zvětšený text a úzké obrazovky.
Pokud SPREEAI nelze načíst, ponechte informace o produktu a pokladně použitelné.

Umístění Shopify

Použijte nastavení bloku aplikace v editoru motivů pro Shopify. Nekopírujte možnosti stylu Web SDK do konfigurace aplikace Shopify. Viz Integrace Shopify.

Zdrojové odkazy