Режим «Магазин» — каталог категорій для акаунтів з великою кількістю товарів. Даний спосіб відображення категорій на вебсайті, створений для закладів у форматі магазину (супермаркети, алкомаркети, зоомагазини тощо), де категорій багато і звичний горизонтальний список вкладок стає незручним. У цьому режимі в шапці сайту одразу після логотипу з’являється кнопка «Каталог», яка відкриває дерево категорій із зображеннями та підкатегоріями (аналог кнопки «Всі товари» на сайтах великих супермаркетів). Категорії в каталозі показуються з квадратними іконками, а картки підкатегорій можна залити власним кольором, щоб кожна група виглядала окремим блоком.

Увімкнення функціоналу:

1. В Панелі керування перейдіть у розділ Налаштування → Системні.
2. У полі Спосіб відображення категорій оберіть значення Магазин.

• Магазин. Кнопка «Каталог» у шапці сайту, дерево категорій з іконками та кольоровими картками підкатегорій, шапка не змінюється при скролі, на сторінці категорії показуються лише її назва та підкатегорії.
• Каталог. Категорії виводяться окремою сторінкою у вигляді плиток із зображеннями.
• Список. Горизонтальний список вкладок з категоріями над товарами (стандартний режим для ресторанів).

3. Натисніть Зберегти.

4. Перейдіть у розділ Заклади → оберіть заклад → Каталог → оберіть категорію → вкладка Графіка.
5. Завантажте Іконку категорії, за потреби Зображення, а на батьківських категоріях задайте Колір фону підкатегорій. Натисніть Зберегти.
6. Повторіть крок 6 для кожної категорії та підкатегорії.

Приклад відображення:

Доступні налаштування в цій вкладці:

• Відображення категорії. Вигляд карток товарів усередині категорії: Більше контенту / Сітка / Більше фото.
• Кількість товарів у рядку (сайт, десктоп). Кількість карток товарів цієї категорії, які відображаються в одному рядку. Якщо значення не обрано, діє налаштування закладу.
• Зображення. Горизонтальний банер категорії розміром 600×480 px, формат JPG, до 1 МБ. Використовується на плитках у режимі «Каталог», а в режимі «Магазин» — як запасний варіант, якщо не завантажена іконка.
• Іконка категорії. Квадратна іконка для дерева каталогу в режимі «Магазин». Рекомендований розмір — 256×256 px, формат PNG (з прозорим фоном) або JPG.

Іконка — це квадратна картинка категорії, яка використовується саме в каталозі режиму «Магазин». Вона показується у двох місцях:
• у лівій колонці каталогу — маленьким квадратом поруч із назвою кореневої категорії;
• на картці підкатегорії — займає праву третину картки на всю її висоту.
Важливо! Іконки радимо завантажувати з прозорим фоном (png). Тоді малюнок лягає прямо на «Колір фону підкатегорій», і вся група підкатегорій виглядає єдиним блоком. Іконка з власним білим фоном буде виглядати як прямокутна плашка поверх кольору картки.
Зверніть увагу! Картинка вписується в слот з обрізанням по краях. Залишайте вільне поле навколо об’єкта на іконці — інакше на картці підкатегорії боки малюнка можуть бути обрізані.
Корисно! Окреме поле для іконки з’явилось тому, що «Зображення» категорії — це широкий банер 600x480px. У маленькому квадратному слоті він обрізався по центру в нечитабельну смужку. Іконка вирішує саме цю проблему, а «Зображення» залишається для плиток режиму «Каталог».
Зверніть увагу! Якщо іконку не завантажено — в каталозі використовується «Зображення» категорії. Якщо немає й зображення — показується перша літера назви категорії. Тому іконки можна заповнювати поступово, сайт від цього не ламається.

• Колір фону підкатегорій. Колір, яким заливаються картки всіх підкатегорій цієї категорії в каталозі.

Поле задає колір, яким заливаються картки підкатегорій у каталозі. Колір вказується на батьківській категорії — тій, у якої є підкатегорії — і застосовується одразу до всієї групи: до всіх карток її підкатегорій і до картки «Дивитись всі».
Поле складається з палітри кольору та текстового поля, значення вказується у форматі #RRGGBB (наприклад, #F3E9DC).
Важливо! Колір, заданий на самій підкатегорії, на її картку не впливає — картку фарбує тільки колір її батьківської категорії. Якщо колір не задано, картки мають стандартний фон теми сайту.
Корисно! Типовий сценарій — свій відтінок для кожної кореневої категорії (наприклад, Алкоголь — бордовий, Молочні продукти — блакитний). Тоді розділи каталогу візуально відрізняються один від одного, як на сайтах великих супермаркетів.
Зверніть увагу! Колір застосовується однаково у світлій та темній темі сайту. Обирайте відтінок, на якому назва категорії залишається читабельною в обох темах.

• Показувати короткий опис товарів. Вмикає відображення короткого опису під назвою товару в цій категорії.

Особливості відображення:

Кнопка Каталог розташована в шапці сайту після логотипу та вирівняна по лівому краю блоку товарів. Клік відкриває панель під шапкою:
• зліва — список кореневих категорій, кожна з квадратною іконкою;
• при наведенні на категорію праворуч показуються її підкатегорії у вигляді великих карток: назва зліва, картинка займає праву третину картки на всю висоту;
• усі картки групи залиті кольором, заданим на батьківській категорії;
• остання картка — «Дивитись всі», вона веде на сторінку самої батьківської категорії з усіма її товарами.
Клік по будь-якій категорії відкриває її сторінку. Панель закривається кліком поза нею, клавішею Esc, переходом на іншу сторінку або початком вводу в пошук.

У центрі шапки постійно показується поле пошуку — писати можна одразу, без кліку по іконці; фільтрація товарів починається під час набору. Якщо каталог відкритий, він закривається автоматично, щоб показати результати. Адреса розташована праворуч і не виходить за межі колонки товарів; телефон і чат підтримки — біля правого краю екрана.

У мобільній шапці сайту кнопка «Каталог» (зі стрілочкою стану) розташована праворуч від кнопки «Назад». Каталог відкривається на весь екран: тап по категорії з підкатегоріями розгортає їх блок — виділену панель з кнопкою «Дивитись всі» та картками підкатегорій; категорія без підкатегорій відкривається одразу. Поки каталог відкритий, замість стрілки «Назад» показується хрестик, який його закриває.
Картки підкатегорій на мобільному виглядають так само, як на десктопі: назва зліва, картинка праворуч на третину картки, фон — колір, заданий на батьківській категорії.
Зверніть увагу! Щоб звільнити місце під кнопку, адреса в мобільній шапці на сторінках закладу показується лише іконкою геолокації — натискання на неї відкриває вибір міста/адреси, як і раніше. На сторінці міста залишається звичайна плашка з назвою міста.

Важливо! Кнопка «Меню» в банері закладу в цьому режимі називається «Каталог товарів». На сторінці товарів вона відкриває панель каталогу; на інших сторінках закладу (Інфо, Адреси тощо) — веде на сторінку товарів.

Зверніть увагу! Повний список усіх категорій на головній сторінці та над товарами в цьому режимі не показується — це очікувана поведінка, а не помилка. Всі категорії доступні через кнопку «Каталог».

Приклади використання

Приклад 1: Супермаркет із 30+ категоріями

1. Згрупуйте категорії у дерево (наприклад, Алкоголь → Горілка, Вина, Пиво).
2. Завантажте іконку 256x256px з прозорим фоном для кожної категорії та підкатегорії.
3. Задайте «Колір фону підкатегорій» на кожній кореневій категорії — свій відтінок для кожного розділу.
4. Увімкніть режим «Магазин» у системних налаштуваннях.
5. Перевірте кнопку «Каталог» на сайті — на десктопі та мобільному.

Приклад 2: Ресторан із 8 категоріями

Залишіть «Список» — невелика кількість категорій зручніша у вигляді горизонтальних вкладок, режим «Магазин» для цього не потрібен.

Приклад 3: Поетапне впровадження

Якщо іконок ще немає, режим можна вмикати одразу — каталог працюватиме на наявних зображеннях категорій, а де їх немає, покаже першу літеру назви. Іконки та кольори можна додавати поступово, категорія за категорією.

Часті запитання:

Q: Увімкнули «Магазин», але кнопка «Каталог» не з’явилась. Чому?
A: Перевірте, що відкрито сторінку меню закладу і що в закладу більше однієї активної категорії. Зачекайте кілька хвилин після збереження налаштування та оновіть сторінку.

Q: Чому замість фото категорії показується літера?
A: Для категорії не завантажені ні іконка, ні зображення. Додайте їх на вкладці «Графіка» категорії.

Q: Яка різниця між «Зображенням» та «Іконкою категорії»?
A: «Зображення» — це широкий банер 600x480px для плиток режиму «Каталог». «Іконка категорії» — квадратна картинка 256x256px для дерева каталогу в режимі «Магазин». У режимі «Магазин» спочатку береться іконка, і лише якщо її немає — зображення.

Q: Завантажили іконку, а в каталозі виглядає як біла плитка на кольоровому фоні.
A: Іконка завантажена з непрозорим фоном. Перезавантажте її у форматі png з прозорим фоном — тоді малюнок ляже прямо на колір картки.

Q: Краї іконки на картці підкатегорії обрізані.
A: Картинка вписується в слот з обрізанням. Підготуйте іконку з вільним полем навколо об’єкта і завантажте повторно.

Q: Задали «Колір фону підкатегорій», але на сайті нічого не змінилось.
A: Перевірте, на якій категорії задано колір. Він задається на батьківській категорії і фарбує картки її підкатегорій. Колір, заданий на самій підкатегорії, її картку не фарбує.

Q: Чи діє режим у мобільних застосунках?
A: Ні. Режим працює лише на вебсайті. Застосунки показують звичайний список категорій і не використовують іконки категорій.

Q: Клієнт скаржиться, що зникли вкладки категорій над товарами. Це помилка?
A: Ні, у режимі «Магазин» так задумано: на сторінці категорії показуються лише її назва та підкатегорії, а повний перелік категорій відкривається кнопкою «Каталог» у шапці.

Q: Куди зникла кнопка «Меню» в банері закладу?
A: У режимі «Магазин» вона називається «Каталог товарів». На сторінці товарів вона відкриває панель каталогу, з інших сторінок закладу веде на сторінку товарів.

Q: Як повернути попередній вигляд?
A: У Налаштування → Системні змініть «Спосіб відображення категорій» назад на «Список» або «Каталог» і збережіть. Завантажені іконки та кольори при цьому не видаляються — вони просто не використовуються.

Посилання на цю статтю: тут

Оновлено: 26/08/2026