Возможности
Три режима
Заведение выбирает один из трёх режимов, и он действует сразу и на сайте, и в приложении — настройка на оба канала одна:
- Светлая — витрина всегда в светлой схеме;
- Тёмная — витрина всегда в тёмной;
- Авто — схема берётся с устройства гостя, а гость может её переопределить.
По умолчанию стоит «Авто».
Выбор на стороне гостя
В режиме «Авто» в подвале витрины появляется переключатель из трёх положений: светлая, тёмная, по устройству. Выбор запоминается на этом устройстве на год и действует на всех страницах. В приложении тот же переключатель лежит в бургер-меню. Если гость оставил «по устройству» и меняет тему телефона на ходу, витрина переключается сразу, без перезагрузки страницы.
Цвета под тёмную схему
Отдельно от светлых задаются тёмный акцентный цвет, основной фон и фон лейаута. Незаданный тёмный акцент подменяется светлым. Вторичный цвет один на обе схемы. Остальные оттенки — рамки, тени, разделители, фон карточек и всплывающих окон — считаются от заданных, задавать их по одному не нужно.
Блоки со своей схемой
Часть элементов держит собственную схему независимо от общей: обложка в шапке (своя тема и свой тон текста на плашках поверх неё), затемнение поверх фото блюда, плавающий остров прогресса до подарка или бесплатной доставки, фон под экраном в мокапе приложения, стиль карточек категорий. У каждого из них есть значение «по текущей теме» — тогда элемент следует общей схеме. Истории показываются в тёмном оформлении всегда.
Как настроить
Настройка живёт в кабинете, в оформлении витрины — группа параметров «Тема оформления»:
- Цветовая схема приложения — «Светлая», «Тёмная», «Авто (системная)»;
- Основной цвет (тёмный вариант) — акцент для тёмной схемы;
- Основной фон (тёмная тема) — карточки, всплывающие окна, боковые панели, шапка и подвал;
- Фон лейаута (тёмная тема) — фон крупных областей страницы.
Светлые пары этих цветов лежат рядом, в той же группе. Параметров у темы под две сотни, поэтому проще искать их по названию через поиск по параметрам.
Рядом с параметрами стоит живое превью витрины: заданные цвета видно на нём сразу, до публикации. Чтобы увидеть витрину целиком в другой схеме, превью нужно открыть заново.
Гостям изменения достаются после публикации оформления, ещё несколько минут витрина может отдавать прежние значения. Возврат настроек темы к значениям по умолчанию сбрасывает и схему.
Что должно быть настроено и ограничения
- Возможность относится к витрине актуального поколения и к приложению, собранному на её основе.
- Переключатель у гостя появляется только в режиме «Авто». В «Светлой» и «Тёмной» гость схему не меняет — это не сбой, а следствие выбора заведения.
- Пока цвета тёмной схемы не заданы, она строится на значениях по умолчанию: чёрный фон и акцент светлой схемы.
- Тёмный фон не отменяет требований к картинкам: светлое фото на тёмном фоне остаётся светлым пятном. Для читаемости подписей поверх фото есть отдельная настройка затемнения.
- Обложка в шапке держит собственную тему: заданная светлой, она останется светлой и в тёмной схеме, вместе с тоном текста на плашках поверх неё.
- Изменение доходит до гостей только после публикации оформления.
Чего нет
- Схема не переключается по расписанию: ни по времени суток, ни по закату. Есть только выбор заведения, устройство гостя и его собственный выбор.
- Логотип, фавикон, фотографии блюд, баннеры и обложки — одни и те же в обеих схемах, отдельной тёмной версии картинки не задать. Читаемость текста поверх фото регулируется затемнением, а не второй картинкой.
- У вторичного цвета отдельного тёмного значения нет — он общий.
- Выбор гостя живёт в его браузере на конкретном устройстве: к профилю гостя он не привязан и на второе устройство не переезжает.
- Разные схемы для сайта и для приложения не задаются: настройка одна на оба канала.
- Страница оплаты на домене платформы оформляется отдельно и схему витрины не наследует.
- Экран запуска приложения один на обе схемы.
Примеры
Тёмный фирменный стиль
- Маркетолог открывает в кабинете оформление витрины.
- В группе «Тема оформления» ставит цветовую схему «Тёмная».
- Задаёт тёмный акцентный цвет, основной фон и фон лейаута.
- Сверяет результат с превью и публикует оформление.
- Витрина и приложение открываются тёмными у всех гостей, переключателя в подвале нет.
Выбор оставлен гостю
- Цветовая схема витрины — «Авто (системная)».
- Гость с тёмной темой на телефоне открывает витрину и получает её тёмной.
- Гость предпочитает светлую: прокручивает страницу до подвала (в приложении открывает бургер-меню) и переключает.
- Выбор держится на этом устройстве; с другого устройства гость снова получит схему по системной теме.
Проверка тёмных цветов перед публикацией
- Маркетолог ставит схему «Тёмная» и задаёт цвета тёмной схемы.
- Смотрит превью: цвета применяются к нему сразу.
- Открывает превью заново, чтобы увидеть витрину целиком в тёмной схеме.
- Убедившись, публикует оформление.