স্টাইলিং এবং বসানো

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 হোস্ট করা ডায়ালগ হল একটি নীচে-অ্যাঙ্কর করা শীট, 1000px পর্যন্ত চওড়া এবং ভিউপোর্ট উচ্চতার 95%। 744px বা আরও সংকীর্ণ হলে, এটি পূর্ণ স্ক্রীন। স্থানান্তর করার পরে বিদ্যমান ডায়ালগ CSS ওভাররাইডগুলি পুনরায় পরীক্ষা করুন৷

অ্যাক্সেসযোগ্যতা এবং পৃষ্ঠা আচরণ

• বোতামের জন্য একটি বর্ণনামূলক লেবেল এবং পর্যাপ্ত বৈসাদৃশ্য ব্যবহার করুন।
• পরীক্ষা কীবোর্ড অ্যাক্সেস, ফোকাস পুনরুদ্ধার, Escape এবং স্ক্রোল আচরণ.
• আসল ফোন, জুম করা টেক্সট এবং সরু স্ক্রীনে লেআউট চেক করুন।
• SPREEAI লোড করতে না পারলে পণ্যের তথ্য এবং চেকআউট ব্যবহারযোগ্য রাখুন।

Shopify বসানো

Shopify এর জন্য থিম এডিটরে অ্যাপ ব্লক সেটিংস ব্যবহার করুন। Shopify অ্যাপ কনফিগারেশনে Web SDK স্টাইলিং বিকল্পগুলি অনুলিপি করবেন না। দেখুন Shopify ইন্টিগ্রেশন.