Penggayaan & penempatan

Gayakan butang Web SDK

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 menggunakan gaya sebaris dan mengatasi helaian gaya lalai. Ianya text nilai juga diutamakan button.text. guna className untuk kelas butang tambahan anda.

Medan gaya yang disokong

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

Tingkah laku dialog

Dialog yang dihoskan v3 ialah helaian berlabuh bawah, sehingga 1000px lebar dan 95% daripada ketinggian viewport. Pada 744px atau lebih sempit, ia adalah skrin penuh. Semak semula sebarang penggantian CSS dialog sedia ada selepas berhijrah.

Kebolehaksesan dan tingkah laku halaman

• Gunakan label deskriptif dan kontras yang mencukupi untuk butang.
• Uji akses papan kekunci, pemulihan fokus, Escape dan kelakuan tatal.
• Semak reka letak pada telefon sebenar, teks yang dizum dan skrin sempit.
• Pastikan maklumat produk dan pembayaran boleh digunakan jika SPREEAI tidak dapat dimuatkan.

Peletakan Shopify

Gunakan tetapan blok aplikasi dalam editor tema untuk Shopify. Jangan salin pilihan penggayaan Web SDK ke dalam konfigurasi aplikasi Shopify. Lihat Integrasi Shopify.