การจัดสไตล์และการจัดวาง

จัดสไตล์ปุ่ม 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 ใช้สไตล์อินไลน์และแทนที่สไตล์ชีตเริ่มต้น มัน text มูลค่ายังมีความสําคัญมากกว่า button.text. ใช้ className สำหรับคลาสเพิ่มเติมของปุ่ม

ฟิลด์สไตล์ที่รองรับ

text, iconUrl, iconHeight, backgroundColor, textColor, width, height, borderRadius, fontSize, fontWeight, padding, border และ boxShadow.

พฤติกรรมการโต้ตอบ

กล่องโต้ตอบที่โฮสต์ v3 เป็นชีตที่ยึดไว้ด้านล่าง ซึ่งมีความกว้างสูงสุด 1,000px และความสูงของวิวพอร์ต 95% ที่ 744px หรือแคบกว่า จะเป็นแบบเต็มหน้าจอ ตรวจสอบการแทนที่ CSS ของกล่องโต้ตอบที่มีอยู่อีกครั้งหลังการย้ายข้อมูล

การเข้าถึงและพฤติกรรมของเพจ

• ใช้ป้ายกํากับที่สื่อความหมายและคอนทราสต์ที่เพียงพอสําหรับปุ่ม
• ทดสอบการเข้าถึงแป้นพิมพ์ การคืนค่าโฟกัส การ Escape และพฤติกรรมการเลื่อน
• ตรวจสอบเค้าโครงบนโทรศัพท์จริง ข้อความที่ซูม และหน้าจอแคบ
• เก็บข้อมูลผลิตภัณฑ์และการชําระเงินไว้หากไม่สามารถโหลด SPREEAI ได้

ตําแหน่ง Shopify

ใช้การตั้งค่าบล็อกแอปในตัวแก้ไขธีมสําหรับ Shopify อย่าคัดลอกตัวเลือกสไตล์ Web SDK ลงในการกําหนดค่าแอป Shopify ดูสิ การผสานรวม Shopify.