Як виділити окремий розділ меню іншим кольором?

Відповіді на популярні питання
1

Якщо у вашому магазині є важливий розділ, наприклад «Акції», «Розпродаж», «Новинки» або сезонна категорія, ви можете додатково привернути до нього увагу за допомогою власного оформлення.

Найчастіше для цього використовують:

  • інший колір тексту;
  • жирний шрифт;
  • додаткову іконку або позначку SALE.

У більшості випадків це можна зробити самостійно через клієнтські стилі (CSS).

:warning: Важливо
У цій статті наведено приклади CSS, які допоможуть реалізувати оформлення, недоступне стандартними інструментами платформи.
Такі зміни виконуються власником магазину або його розробником самостійно.
Служба підтримки не надає консультацій щодо написання, адаптації чи налагодження індивідуального CSS-коду. Наша мета проінформувати вас про технічну можливість реалізації такого рішення.

Змінюємо колір пункту меню

Припустимо, що сторінка «Акції» має адресу:

/aktsii/

Додайте в клієнтські стилі:

.products-menu__title-link[href="/aktsii/"] {
    color: #ff3b30 !important;
}

Після збереження змін пункт меню буде відображатися червоним кольором.

Як знайти контейнер потрібного розділу?

  1. Відкрийте сайт.
  2. Натисніть клавішу F12.
  3. Знайдіть потрібний пункт меню в інструментах розробника.
    Наприклад:
<a class="products-menu__title-link"

Робимо пункт меню ще помітнішим

Варіант 1. Жирний шрифт

.products-menu__title-link[href="/aktsii/"] {
    color: #ff3b30 !important;
    font-weight: 700;
}

Варіант 2. Додаємо іконку :fire:.

Щоб гарантовано розмістити іконку в один рядок із назвою розділу, використовуйте такий код:

.products-menu__title-link[href="/aktsii/"] {
    color: #ff3b30 !important;
    flex-direction: row !important;
    gap: 4px;
}

.products-menu__title-link[href="/aktsii/"]::after {
    content: "🔥";
    font-size: 14px;
}

Варіант 3. Додаємо позначку SALE

Для інтернет-магазинів часто краще виглядає невеликий бейдж замість емодзі.

.products-menu__title-link[href="/aktsii/"] {
    color: #ff3b30 !important;
    flex-direction: row !important;
    gap: 4px;
}

.products-menu__title-link[href="/aktsii/"]::after {
    content: "SALE";
    background: #ff3b30;
    color: #fff;
    padding: 2px 4px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
}

Такий варіант часто виглядає більш професійно та добре помітний відвідувачам.

Де додати цей код?

Перейдіть до розділу:

Налаштування → Утиліти → Редактор CSS(client.css)

Вставте потрібний CSS-код, збережіть зміни та оновіть сторінку сайту.

Для яких розділів це може бути корисно?

  • Акції
  • SALE
  • Розпродаж
  • Новинки
  • Хіти продажів
  • Black Friday
  • Сезонні колекції
  • Спеціальні пропозиції

Достатньо замінити /aktsii/ на адресу потрібної сторінки.

Зверніть увагу: наведені приклади створені для шаблонів, де використовується клас .products-menu__title-link. Якщо у вашому шаблоні інша структура меню, CSS-селектор може відрізнятися.

2 Вподобання