Shopify (Dawn): блок “Вишивка/Монограма” в картці товару + збереження в властивостях рядка товару

Потрібен розробник Shopify (Liquid/JS/CSS) для теми Dawn (Online Store 2.0).

Мета: зробити на сторінці товару (PDP) блок “Вишивка / Монограма” як у прикладі (картка в правій колонці), який відкриває панель налаштування вишивки. Вишивка безкоштовна (ціна товару не змінюється), але вибрані параметри повинні йти в замовлення як властивості рядка.

Де повинен бути блок

• Всередині інформації про продукт на сторінці товару

• Як блок, а не окрема секція

• Розташування: під селектором кількості, до кнопок покупки

  
  

  UI/Функціонал

У згорнутому вигляді (картка):

• Назва: “Додайте свою монограму”

• Підзаголовок: “Персоналізуйте елегантною ручною вишивкою”

• Значок справа: “БЕЗКОШТОВНО”

• Кнопка/посилання: “Налаштувати”

При кліку Налаштувати:

• Відкривається drawer/модалка

  • Desktop: drawer справа

  • Mobile: bottom-sheet або повноекранна панель

  
  

• Обов'язково:

  • скролл всередині (контент не повинен обрізатися)

  • закриття по X і по кліку на overlay

  • блок не повинен “залипати” відкритим

  
  

  
  

Всередині drawer кроки:

1. Вибір локації (radio):

   • Верхній правий кут

   • Нижній правий кут

   • Верхній лівий кут

   • Нижній лівий кут

   
   

2. Текст вишивки

   • макс 10 символів

   • лічильник 0/10

   • валидація: мінімум 1 символ (якщо не вибрано “Ні, дякую”)

   
   

3. Вибір шрифту

   • 6 опцій (01–06)

   • Важливо: кнопки не просто назви, а прев'ю “ABC” як на екрані вишивальної машини

   
   

4. Колір нитки

   • swatches (кружечки) + підпис/tooltip

   • кольори:

     • Кремовий #F5EFE3

     • Глибокий екра #D8C3A5

     • Слонова кістка #F7F1E6

     • Хмара #B9B5AE

     • Пиловий темно-синій #2F4E73

     • Ніжно-блакитний #7FB2D8

     • Світлий м'ятний #CFE8D8

     • Хакі #8A7B6A

     • Зимова ягода #A3182E

     • Червоний #D1122E

     • Рожевий #F2B6C6

       
       

     
     

Кнопки:

• “Ні, дякую”

• “Скасувати”

• “Зберегти”

Після Зберегти:

• показується summary (текст + локація + шрифт + колір)

• кнопки Редагувати / Видалити

Що повинно потрапляти в замовлення (властивості рядка)

Потрібно записувати в форму продукту (через hidden inputs або інакше коректно):

• properties[Текст вишивки]

• properties[Локація вишивки]

• properties[Шрифт вишивки]

• properties[Колір нитки вишивки]

Якщо “Ні, дякую”:

• Текст вишивки = "Ні, дякую"

• інші поля можна залишити порожніми

Технічні вимоги

• Dawn / OS 2.0

• Реалізація як блок у sections/main-product.liquid (schema + вивід через case block.type)

• Рендер через snippet snippets/embroidery-block.liquid

• JS без eval, без порушень CSP, scoped selectors (щоб не ламалося при кількох блоках)

• Адаптив 320px+, drawer: max-height: 90vh; overflow-y: auto

• Не ламати стандартний add-to-cart Dawn, без помилок у консолі

Результат

• Код внесено в тему + перевірка на Desktop/Mobile

• Я перевіряю: збереження налаштувань → додавання в кошик → властивості видні в cart item і в order

  
  

Будь ласка, у відповіді

• надішліть 2–3 приклади Shopify робіт (Dawn/OS2.0)

• оцінку по часу/вартості

• підтвердіть, що робили кастомні властивості рядка