Магазин рушників написав нам одне речення: «потрібно зробити липку кнопку зеленого кольору, як статична». На їхній картці товару штатна кнопка «Купити» має м’який зелений колір, а віджет за замовчуванням малював унизу екрана бордову. Дві кнопки з різних магазинів на одному екрані. Покупець такого не пробачає: чужий колір він зчитує як сторонній банер, а не як частину сайту.
Це найпоширеніша правка після встановлення будь-якого віджета, і вона майже завжди зводиться до трьох речей: узяти правильні кольори, перевірити контраст і подивитися результат на телефоні до того, як його побачать покупці. Нижче показано, як це зробити, з палітрами реальних магазинів.
Чому колір віджета важливіший, ніж здається
Стандартні кольори віджета слугують заглушкою, а не рекомендацією. Вони підібрані так, щоб щось було видно на будь-якому сайті, і саме тому не пасують жодному конкретному. Шрифт віджет успадковує від магазину автоматично, тож саме колір відрізняє «своє» від «чужого». Смуга прогресу в кольорі бренду виглядає як функція магазину; та сама смуга в темно-синьому з рожевим на бежевому сайті виглядає як реклама, яку хочеться закрити.
Звідки взяти кольори свого магазину
- Палітра теми. У налаштуваннях дизайну Хорошоп задано колір кнопок і акцентів, і це основа. Ті самі коди підійдуть і віджету.
- Логотип. Один-два кольори з логотипа стануть природними акцентами. Якщо логотип чорно-білий, беріть нейтральний фон і один акцент зі штатної кнопки.
- Піпетка. Натисніть правою кнопкою по кнопці «Купити» на сайті, оберіть «Переглянути код»: у панелі стилів праворуч буде колір фону. Або скористайтеся будь-яким онлайн-інструментом-піпеткою: він покаже код кольору з будь-якої точки екрана.
- Запишіть hex-коди у вигляді #3D2B1F. Саме в такому форматі їх приймає конфігуратор і саме так їх найзручніше передати менеджеру.
Три правила, які рятують від блідого віджета
Максимум два-три кольори
Фон, текст і один акцент. Усе, що понад це, перетворює віджет на ялинку. Якщо у віджета є два стани, як у безкоштовної доставки, «до досягнення» і «після», то це не привід додавати четвертий і п’ятий колір: другий стан краще зробити темнішим або насиченішим відтінком того самого фону.
Контраст тексту й фону не менше 4,5:1
Це мінімум за WCAG для звичайного тексту, і саме його найчастіше порушують світлі палітри: білий текст на світло-сірому, теракотовий на бежевому. Перевіряється за десять секунд у WebAIM Contrast Checker: вставте два hex-коди й подивіться на цифру. Якщо менше 4,5, текст на телефоні при сонці читатися не буде.
Два стани: спокійний і помітний
Стан «до досягнення» має бути спокійним і в палітрі сайту, бо він на екрані найдовше. Стан «після досягнення» має бути помітнішим: темніший відтінок, акцентний колір, зелений. Але не червоний. Червоний фон покупець зчитує як помилку або попередження, навіть якщо на ньому написано «У Вас безкоштовна доставка!».
Приклади з практики
Магазин домашнього текстилю
Сайт у теплих бежево-коричневих тонах. Для стану «до досягнення» обрали фон #E1D2C1, а для «після» фон #C0A385, обидва прямо з палітри сайту. Текст спершу зробили теракотовим #A95D3A: красиво в теорії, але на бежевому він читався гірше, ніж хотілося. Замінили на майже чорний #212121 в обох станах, і віджет одразу став «своїм». Висновок, який повторюється в кожному другому магазині: темний нейтральний текст майже завжди виграє в кольорового на світлому фоні.
Зоомагазин
Перша палітра: сірий #CACACA до порогу, рожевий #F06D99 після, білий текст. На макеті виглядало блідо й «не по-їхньому», а білий текст на світло-сірому просто губився. Друга спроба: світло-жовтий #FBFFC7 до порогу, м’який рожевий #F6BCD6 після, текст #191919. Сіла ідеально з першого погляду. Важлива деталь: результат подивилися на персональному демо-посиланні до того, як щось міняти на сайті, і саме тому перша невдала версія не дійшла до покупців. Ще одна деталь: магазин спочатку думав, що зміна кольору доступна лише на платному тарифі. Ні, на Free це робить менеджер.
Магазин рушників
Той самий випадок із початку статті: липка кнопка «Купити» в зеленому кольорі штатної кнопки замість стандартного бордового. Після однієї правки кольору фону кнопка, що з’являється внизу екрана при прокрутці, виглядає як продовження картки товару, а не як накладка.
Найкращий віджет такий, про який покупець не думає як про віджет. Він просто бачить, що магазин показує йому, скільки лишилося до безкоштовної доставки.
Що саме можна змінити
Безкоштовна доставка
У віджета безкоштовної доставки налаштовується практично все, що бачить покупець: фон і фон при досягненні порогу, колір тексту, окремо колір суми й колір іконки, кольори заповненої та незаповненої частини смуги прогресу, рамка та її товщина, заокруглення кутів. Розміри шрифту задаються окремо для блоку в кошику та для плаваючої плашки, і окремо для мобільного й ПК. Кут екрана для плашки теж ваш вибір. А на прохання «зробити шрифт трохи тоншим» є проста відповідь: жирність суми можна вимкнути, а розмір зменшити; сам шрифт віджет бере з вашого сайту.
Липка кнопка «Купити»
У липкої кнопки параметрів менше, бо й сама вона простіша: колір фону, колір тексту, заокруглення й напис на кнопці. Цього достатньо, щоб повторити штатну кнопку магазину один в один, саме це й просив магазин рушників. Навіщо взагалі потрібна така кнопка на мобільному, пояснено в статті про липку кнопку й мобільну конверсію.
Де змінити кольори: Free і Pro
Спосіб залежить від тарифу widgetis, але результат однаковий: віджет у кольорах вашого магазину.
- На тарифі Free: напишіть у Telegram-підтримку hex-коди для двох станів (фон і текст «до», фон і текст «після») і назву віджета. Менеджер налаштує зазвичай того ж дня і, як правило, надішле демо-посилання, де ви побачите результат на своєму магазині до публікації.
- На Pro або Max: у кабінеті відкрийте сайт → «Налаштування віджета». Там живе прев’ю прямо на вашому магазині: міняєте колір і бачите результат одразу. Натисніть «Зберегти», за кілька хвилин оновлення розкотиться на сайт.
Другою правкою після порогу йдуть кольори. Якщо ви ще не визначилися із сумою, від якої доставка безкоштовна, спершу прочитайте, як обрати поріг і показати прогрес у кошику, а потім повертайтеся до палітри.
Чеклист перед тим, як зберегти
- Подивилися на телефоні, а не лише на моніторі: там інша яскравість і менші літери.
- Перевірили обидва стани: до порогу і після.
- Подивилися віджет на фоні кошика, а не тільки на головній: у кошику інший фон і поруч штатна кнопка «Оформити».
- Текст читається з відстані витягнутої руки, контраст не менше 4,5:1.
- Акцент віджета не сперечається зі штатною кнопкою «Оформити замовлення», бо вона має лишатися головною на екрані.
Часті питання
Чи можна змінити кольори віджета на безкоштовному тарифі?
Так. На Free кольори змінює менеджер: надішліть у Telegram hex-коди фону й тексту для обох станів віджета, і налаштування зроблять зазвичай того ж дня. На Pro та Max кольори змінюються самостійно в кабінеті з живим прев’ю на вашому магазині.
Які кольори брати, якщо сайт чорно-білий?
Нейтральний фон у тон сайту (світло-сірий або білий) і один акцент, узятий зі штатної кнопки «Купити» чи з логотипа. Для стану «після досягнення» використайте темніший відтінок або той самий акцент, а текст лишіть темним нейтральним.
Чи можна зробити шрифт віджета тоншим?
Шрифт віджет успадковує від вашого сайту, тому окремого вибору гарнітури немає. Але жирність суми можна вимкнути, а розміри тексту й суми зменшити окремо для кошика, плашки, мобільного та ПК. Зазвичай саме це й мають на увазі під «тоншим».
Чи бачить покупець зміну кольорів одразу?
Оновлення розкочується на сайт за кілька хвилин після збереження. Щоб побачити його самим, оновіть сторінку без кешу (Ctrl+Shift+R) або відкрийте магазин у вікні інкогніто.
Що робити, якщо текст не читається на обраному фоні?
Перевірте пару кольорів у WebAIM Contrast Checker: потрібно не менше 4,5:1. Найпростіше виправлення: замінити кольоровий текст на темний нейтральний, наприклад #212121, як зробив магазин домашнього текстилю замість теракотового на бежевому.