Привабливість вашого магазину Magento 2 суттєво впливає на ваші конверсії. Власні макети, шаблони, зображення та кольори не лише покращують взаємодію з клієнтами, але й підвищують впізнаваність бренду.
Оскільки важко знайти тему, яка б за замовчуванням містила всі кольори вашого бренду, зміна кольорів теми стає складним завданням. Зазвичай вам потрібна допомога розробника або технічна допомога. Але не з .
Окрім 5 попередньо встановлених колірних схем, ви можете налаштувати кольори свого веб-сайту на свій смак. І сьогодні ви дізнаєтеся, як це зробити, у цьому вичерпному посібнику.
Чи варто нам починати?
Кожен елемент вашої теми можна змінити. Тому ми структуруємо їх за абзацами. Але спочатку перейдіть до Магазини > Конфігурація > Оптимізована тема > Колірна схема для зміни кольорів теми в Magento 2.
Кольори теми
У цьому розділі ви визначаєте кольори, які представляють ваш бренд і найчастіше використовуються у вашому магазині.
- Основний колір теми — встановлює основний колір, який найчастіше використовується у вашому магазині.
- Основний колір теми Alt — використовується для встановлення контрасту між елементами інтерфейсу користувача і зазвичай є світлим або темним варіантом основного кольору.
- Вторинний колір теми — встановлює вторинний колір, який використовується у вашому магазині для акцентування певних частин вашого магазину.
Basic колір
- Колір фону — відображається за прокручуваним контентом у вашому магазині.
- Колір тексту — встановлює колір тексту на всіх сторінках (наприклад, каталог, блог, кошик тощо).
- Колір межі — встановлює колір межі для кнопок та елементів введення за замовчуванням.
- Колір фону бічної панелі — встановлює колір фону для бічної панелі (наприклад, бічна панель облікового запису клієнта, бічна панель оформлення замовлення).
Основні кнопки
Основні кнопки — це ті, які призначені для привернення уваги клієнтів. Зазвичай вони мають суцільну заливку.
наприклад, Додати до кошика, Перейти до оформлення замовлення, Розмістити замовлення, Підписатися зараз, Створити обліковий запис тощо
- Колір фону кнопки — встановлює колір фону основних кнопок.
- Колір фону кнопки (при наведенні курсора) — встановлює колір кнопок при наведенні курсора.
- Колір тексту кнопки — встановлює колір тексту в основних кнопках.
- Колір тексту кнопки (при наведенні курсора) — встановлює колір тексту в кнопках при наведенні курсора.
- Колір межі кнопки — встановлює колір межі основних кнопок.
- Колір межі кнопки (при наведенні курсора) — встановлює колір межі кнопки при наведенні курсора.
Додаткові кнопки
Додаткові кнопки зазвичай пропонують альтернативу основній кнопці. Тому їм приділяється менше візуальної уваги.
наприклад, Оновити кошик (кошик для покупок), Застосувати знижку (оформлення замовлення), Поділитися списком бажань, Додати все до кошика (обліковий запис клієнта)
- Колір фону кнопки — встановлює колір фону вторинних кнопок.
- Колір фону кнопки (при наведенні курсора) — встановлює колір кнопок при наведенні курсора.
- Колір тексту кнопки — встановлює колір тексту у вторинних кнопках.
- Колір тексту кнопки (при наведенні курсора) — встановлює колір тексту в кнопках при наведенні курсора.
- Колір межі кнопки — встановлює колір рамки вторинних кнопок.
- Колір межі кнопки (при наведенні курсора) — встановлює колір межі кнопки при наведенні курсора.
Посилання
- Колір посилання — встановлює колір для всіх посилань у вашому магазині.
- Колір посилання (при наведенні курсора) — встановлює колір посилань при наведенні курсора.
наприклад, посилання внизу сторінки, посилання на блоги тощо
Значок
- Колір значка — встановлює колір значок у вашому магазині.
- Колір значка (при наведенні курсора) — встановлює колір значок при наведенні курсора.
наприклад, значки соціальних мереж, значки додавання до списку бажань, значок порівняння
Заголовок значка
- Колір заголовка значка — встановлює колір значок, розташованих у заголовку.
- Колір заголовка значка (при наведенні курсора) — встановлює колір значок, розташованих у заголовку при наведенні курсора.
наприклад, значок кошика для покупок
Введення
- Колір фону введення — встановлює колір фону введення.
- Колір заповнювача введення — встановлює колір заповнювача введення (підказка, яка з'являється, коли ви починаєте вводити щось у форму).
- Колір введення — встановлює колір тексту, який ви вводите у форми введення.
- Колір межі введення — встановлює колір межі введення.
наприклад, форма пошуку, форма адреси доставки при оформленні замовлення, форма застосування знижки
Заголовок
- Колір фону верхньої панелі заголовка — встановлює колір фону для верхньої панелі (де розташовані посилання "Мій обліковий запис" та "Мій список бажань").
- Колір верхньої панелі заголовка — встановлює колір елементів верхньої панелі (тексту).
- Колір фону заголовка — встановлює колір фону для заголовка (де розташовані логотип та рядок пошуку).
Навігація
- Колір фону навігації — встановлює колір фону для меню навігації.
- Колір елемента навігації — встановлює колір основних елементів меню навігації (текст).
- Колір елемента навігації (при наведенні курсора) — встановлює колір основних елементів меню навігації при наведенні курсора.
- Колір фону елемента підменю — встановлює колір фону для елементів другого, третього рівня.
- Колір фону елемента підменю (при наведенні курсора) — встановлює колір фону для елементів другого, третього рівня при наведенні курсора.
- Колір елемента підменю — встановлює колір елементів другого, третього рівня (текст).
- Колір елемента підменю (при наведенні курсора) — встановлює колір елементів другого, третього рівнів при наведенні курсора.
Товари
- Колір фону товару — встановлює колір фону блоків товарів на сторінках каталогу.
- Колір товару — встановлює кольори тексту в блоці товару (наприклад, назва, кількість відгуків, ціна).
- Колір межі товару — встановлює колір межі блоку товару на сторінках каталогу.
- Колір межі товару При наведенні курсора — встановлює колір межі блоку товару на сторінках каталогу при наведенні курсора.
Підписатися
- Колір фону підписки — встановлює колір фону для блоку підписки.
- Колір підписки — встановлює колір тексту в блоці підписки.
Нижній колонтитул
- Колір фону нижнього колонтитула — встановлює колір фону нижнього колонтитула.
Примітка: колір тексту в нижньому колонтитулі визначається налаштуваннями Basic колір та посиланнями в налаштуваннях Посилання .
Авторське право
- Колір фону авторських прав — встановлює колір фону блоку авторських прав.
- Колір авторських прав — встановлює колір тексту в блоці авторських прав.
Це було не складно, чи не так?
Цей посібник про те, як змінити кольори теми Magento 2, має допомогти вам легше впроваджувати кольори вашого бренду. А тепер уявіть, що вам навіть не потрібно робити все це.
Magefan постачається з 5 попередньо встановленими колірними схемами. Тож, якщо ви хочете срібну, червону, синю, зелену або чорну тему Magento 2, вам просто потрібно натиснути одну кнопку, щоб застосувати кольори.
Дійсно немає простішого способу змінити кольори в темі Magento 2!
Підтримайте