Оформление витрины: как настроить вид для компьютера и телефона

Где настраивается оформление витрины?

В кабинете: «Конструктор → Каталог». Откроется редактор витрины с вашими товарами в предпросмотре и вкладками «Вид», «Цвета», «Шрифты», «Украшения» и «Тонко». Переключатель «Компьютер / Телефон» выбирает, какой экран вы сейчас настраиваете.

Оформление для компьютера и для телефона настраивается отдельно. Можно сделать на большом экране спокойную витрину с крупными фото, а на телефоне собрать компактную ленту, которую удобно листать одной рукой.

Редактор работает на всех тарифах, включая бесплатный «Старт», и все виды и темы в нём бесплатные. Отличие «Старта» одно: на витрине стоит знак «Витрина сделана на tokego». Его снимает дополнение за 200 ₽/мес, а с тарифа «Сайт» знака нет.

Какие виды есть для компьютера?

Шесть раскладок, у каждой свои тонкие настройки:

• Три колонки. Категории слева, каталог посередине, заказ справа в виде чека.
• Журнал. Большая обложка, категории вкладками и просторная сетка товаров.
• Широкая обложка. Обложка во всю ширину, под ней те же три колонки.
• Меню-доска. Как меню в ресторане: строки с точками до цены и чек справа.
• Мини-лендинг. Обложка во всю ширину, каталог, блок «как заказать» и подвал «где нас найти».
• Классика. Привычная раскладка витрины tokego в новом стиле.

Как выбрать. Если позиций много и они короткие, как стрижки, кофе или услуги мастера, «Меню-доска» читается быстрее карточек. Если товар продаёт фото, как еда, цветы или мебель, берите «Три колонки» или «Журнал». «Мини-лендинг» выручит, когда отдельного лендинга нет, а рассказать о себе и о том, как заказать, хочется прямо на витрине.

Как устроена витрина на телефоне?

Телефонная витрина собирается из трёх частей:

• верх — всё, что выше поиска, обычно обложка и название;
• середина — категории и товары;
• контакты — адрес, часы работы, телефон.

Для каждой части выбирается один из пяти стилей: «Классика», «Рукописный», «Меню-доска», «Крупно» и «Быстрый заказ». Части можно брать из разных стилей: например, рукописный верх, середину в виде меню-доски и контакты из «Быстрого заказа». У каждой части есть свои тонкие настройки.

Телефонную версию стоит проверять отдельно и внимательно. Почти все, кто сканирует QR-код на столе, на вывеске или на коробке, открывают витрину с телефона, и первое впечатление складывается именно там.

Как подобрать цвета, шрифты и украшения?

• Цвета. 20 готовых тем: 15 светлых и 5 тёмных. Сочетания подобраны так, чтобы надписи читались на фоне, поэтому вручную подбирать оттенки не придётся.
• Шрифты. Отдельно для заголовков и для текста, плюс общий размер. Заголовки можно сделать «пером»: буквы рисует движок, как на лендинге.
• Украшения. Как отмечена выбранная категория, какой рисунок видит покупатель в пустой корзине и какая картинка стоит в подвале.
• Значки категорий. Рисунок у названия категории подбирается по её названию, любой можно сменить.
• Тонко. Настройки выбранного вида, логотип, название и описание магазина.

Совет: сначала выберите вид и тему, потом шрифты, и только в конце украшения. Если начать с мелочей, их часто приходится переделывать после смены вида.

Как поменять надпись на кнопке заказа?

По умолчанию кнопка называется «Оформить заказ». Во вкладке «Вид» есть блок «Кнопка заказа» с готовыми вариантами «Заказать», «Забронировать», «Записаться» и «Купить». Можно вписать и своё слово, до 24 знаков.

Надпись одна для компьютера и телефона. Она стоит в корзине и на шаге оформления. Прокату велосипедов ближе «Забронировать», школе танцев «Записаться», магазину подарков «Купить». Слово попадёт на витрину вместе с остальным оформлением, когда вы нажмёте «Опубликовать».

Что такое бейджи и где их поставить?

Бейдж — короткая метка на товаре: «Хит», «Новинка», «Акция», «Острый» или «Не острый». Он ставится не в редакторе витрины, а в карточке товара: «Управление магазином → Товары», поле «Бейдж». На один товар можно поставить один бейдж.

Бейджи работают, пока их мало. Если «Хит» стоит на половине меню, глаз перестаёт его замечать. Отметьте два-три товара, которые действительно берут чаще всего, а «Новинку» снимайте через пару недель. Остальные настройки карточки, от вариантов цены до добавок и свободной суммы, мы разобрали в статье про карточку товара.

Как опубликовать оформление и не потерять правки?

Пока вы не нажали «Опубликовать», правки остаются черновиком, и покупатели их не видят. Черновик хранится только в том браузере, где вы работали: если открыть редактор на другом компьютере, его там не будет. Пока черновик не опубликован, редактор пишет «Есть неопубликованные изменения».

Кнопка «Отменить изменения» возвращает опубликованное оформление, черновик при этом пропадает. Кнопка «Вернуть прежнюю витрину» возвращает оформление, которое было до нового редактора; настройки нового редактора у магазина удаляются. Если оформление уже поменяли в другом окне, например сотрудник с доступом к конструктору, редактор предупредит перед публикацией и спросит, публиковать ли ваше поверх. Как выдать сотруднику такой доступ, рассказано в статье про роли и доступы.

Как это выглядит в жизни?

Цветочная мастерская продаёт букеты и принимает заказы к праздникам. Для компьютера владелица выбирает «Журнал» со светлой темой: большая обложка с мастерской и просторная сетка, где букеты видны крупно. Для телефона собирает верх в стиле «Крупно», середину в «Классике» и контакты из «Быстрого заказа», чтобы адрес и телефон были под рукой.

Кнопку заказа она переименовывает в «Заказать букет», это 14 знаков. На два самых ходовых букета ставит «Хит», на сезонные — «Новинку». Проверяет предпросмотр на обоих экранах и нажимает «Опубликовать». Наклейка с QR-кодом на двери мастерской не меняется: по ней теперь открывается новая витрина.

Если хочется, чтобы витрина открывалась на своём адресе, а не на tokego.ru, читайте статью про свой домен.

Частые вопросы