
Зовнішній вигляд вашого магазину Magento 2 значно впливає на конверсії. Кастомізовані макети, шаблони, зображення та кольори не лише покращують користувацький досвід, але й підвищують впізнаваність бренду.
Оскільки важко знайти тему, яка б містила всі кольори вашого бренду за замовчуванням, зміна кольорів теми постає складним завданням. У таких випадках вам знадобиться розробник або технічна допомога. Але не у випадку з темою Optimized Magento 2 Theme.
Окрім 5 готових кольорових схем, ви можете налаштувати кольори веб-сайту на свій смак. І сьогодні ви дізнаєтеся, як це зробити.
Починаємо?
Зміст [приховати]
Кожен елемент вашої теми можна змінити. Тож ми структуруємо все у розділи. Отже, щоб змінити кольори теми в Magento 2, спершу підіть у Stores > Configuration > Optimized Theme > Color Schema.
Theme Colors
У цьому розділі ви вказуєте кольори, які представляють ваш бренд і використовуються найчастіше у вашому магазині.
- Theme Color Primary — задає головний колір, що використовується найчастіше у вашому магазині.
- Theme Color Primary Alt — використовується для встановлення контрасту між елементами інтерфейсу і зазвичай є світлішим або темнішим варіантом основного кольору.
- Theme Color Secondary — встановлює допоміжний колір, який використовується для акцентування певних елементів у вашому магазині.

Basic Color
- Background Color — відображається за контентом, який можна гортати.
- Text Color — задає колір тексту на усіх сторінках (напр. каталог, блог, кошик і т.д.).
- Border Color — задає колір меж на кнопках за замовчуванням та полях введення.
- Sidebar Background Color — встановлює колір фону для бічної панелі (наприклад, бічна панель облікового запису клієнта, бічна панель checkout).
Primary Buttons
Основні кнопки — це ті, які призначені для привернення уваги клієнтів. Зазвичай вони містять суцільну заливку.
напр. Add to Cart, Proceed to Checkout, Place Order, Subscribe Now, Create an Account та ін.
- Button Background Color — встановлює колір фону основних кнопок.
- Button Background Color (On Hover) — встановлює колір кнопок при наведенні миші.
- Button Text Color — встановлює колір тексту основних кнопок.
- Button Text Color (On Hover) — встановлює колір тексту основних кнопок при наведенні миші.
- Button Border Color — встановлює колір меж основних кнопок.
- Button Border Color (On Hover) — встановлює колір меж основних кнопок при наведенні миші.
Secondary Buttons
Другорядні кнопки зазвичай є альтернативою основним. Таким чином, їм приділяється менше візуальної уваги.
напр. Update Shopping Cart (у кошику), Apply discount (на checkout), Share Wishlist, Add All to Cart (в обліковому записі користувача)
- Button Background Color — встановлює колір фону додаткових кнопок.
- Button Background Color (On Hover) — встановлює колір кнопок при наведенні миші.
- Button Text Color — встановлює колір тексту додаткових кнопок.
- Button Text Color (On Hover) — встановлює колір тексту кнопок при наведенні миші.
- Button Border Color — встановлює колір меж другорядних кнопок.
- Button Border Color (On Hover) — встановлює колір меж другорядних кнопок при наведенні миші.
Link
- Link Color — встановлює колір усіх посилань вашого магазину.
- Link Color (On Hover) — встановлює колір посилань при наведенні миші.
напр. посилання футера, блогу і т.д.
Icon
- Icon Color — встановлює колір іконок у вашому магазині.
- Icon Color (On Hover) — встановлює колір іконок при наведенні миші.
напр. іконки соціальних мереж, add to wishlist, compare

Icon Header
- Icon Header Color — встановлює колір іконок розташованих у шапці сторінки.
- Icon Header Color (On Hover) — встановлює колір іконок у шапці сторінки при наведенні миші.
напр. іконка shopping cart
Input
- Input Background Color — встановлює колір фону поля введення.
- Input Placeholder Color — встановлює колір заповнювача поля введення (пропозиція, яка з'являється, коли ви починаєте вводити щось у формі).
- Input Color — встановлює колір тексту, який ви додаєте у полях введення.
- Input Border Color — встановлює колір меж полів введення.
напр. пошукова форма, форма адреси відправки на checkout, форма застосування знижки
Header
- Header Top Panel Background Color — встановлює колір фону верхньої панелі (де розташовані посилання "My Account" та "My Wish List").
- Header Top Panel Color — встановлює колір елементів бічної панелі (тексту).
- Header Background Color — встановлює колір фону шапки сторінки (де розташовані лого і панель пошуку).
Navigation
- Navigation Background Color — встановлює колір фону навігаційної панелі.
- Navigation Item Color — встановлює колір головних елементів навігаційного меню (тексту).
- Navigation Item Color (On Hover) — встановлює колір головних елементів навігаційної панелі при наведенні миші.
- Sub Menu Item Background Color — встановлює колір фону елементів другого та третього рівнів.
- Sub Menu Item Background Color (On Hover) — встановлює колір фону елементів другого та третього рівнів при наведенні миші.
- Sub Menu Item Color — встановлює колір елементів другого та третього рівнів (тексту).
- Sub Menu Item Color (On Hover) — встановлює колір елементів другого та третього рівнів при наведенні миші.
Product Items
- Product Background Color — встановлює колір фону блоків продуктів на сторінках каталогу.
- Product Color — встановлює колір тексту в блоці продукту (напр. назва, кількість відгуків, ціна).
- Product Border Color — встановлює колір меж блоку продукту на сторінках каталогу.
- Product Border Color Hover — встановлює колір меж блоку продукту на сторінках каталогу при наведенні миші.
Subscribe
- Subscribe Background Color — встановлює колір фону для блоку subscription.
- Subscribe Color — встановлює колір тексту у блоці subscription.
Footer
- Footer Background Color — встановлює колір фону для футера.
Примітка: колір тексту та посилань у футері визначається налаштуваннями Basic Color та Link відповідно.
Copyright
- Copyright Background Color — встановлює колір фону для блоку copyright.
- Copyright Color — встановлює колір тексту у блоці copyright.
Було зовсім нескладно, чи не так?
Ця стаття про зміну кольорів теми Magento 2 допоможе простіше додавати кольори бренду у вашому магазині. А тепер уявіть, що вам взагалі не потрібно всього цього робити.
Optimized Magento 2 Theme від Magefan містить 5 готових кольорових схем. Отже, якщо вам потрібна срібляста, червона, синя, зелена або чорна тема Magento 2, ви зможете застосувати відповідні кольори, натиснувши лише одну кнопку.
Простішого способу змінити кольори в темі Magento 2 просто не існує!