Tạo kiểu cho nút 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 áp dụng kiểu nội tuyến và ghi đè biểu định kiểu mặc định. của nó text giá trị cũng được ưu tiên hơn button.text. sử dụng className cho lớp nút bổ sung của bạn.
Các trường kiểu được hỗ trợ
text, iconUrl, iconHeight, backgroundColor, textColor, width, height, borderRadius, fontSize, fontWeight, padding, border Và boxShadow.
Hành vi hộp thoại
Hộp thoại được lưu trữ v3 là một trang tính được neo dưới cùng, rộng tối đa 1000px và bằng 95% chiều cao khung nhìn. Ở 744px hoặc hẹp hơn, nó là toàn màn hình. Kiểm tra lại mọi phần ghi đè CSS của hộp thoại hiện có sau khi di chuyển.
Khả năng truy cập và hoạt động của trang
- Sử dụng nhãn mô tả và độ tương phản vừa đủ cho nút.
- Kiểm tra quyền truy cập bàn phím, khôi phục tiêu điểm, hành vi Thoát và cuộn.
- Kiểm tra bố cục trên điện thoại thật, phóng to văn bản và màn hình hẹp.
- Giữ thông tin sản phẩm và thanh toán có thể sử dụng được nếu SPREEAI không thể tải.
Vị trí Shopify
Sử dụng cài đặt khối ứng dụng trong trình chỉnh sửa chủ đề cho Shopify. Không sao chép các tùy chọn kiểu dáng Web SDK vào cấu hình ứng dụng Shopify. Xem Tích hợp Shopify.