Як змінити кольори теми в Magento 2?

Зовнішній вигляд вашого магазину Magento 2 значно впливає на конверсії. Кастомізовані макети, шаблони, зображення та кольори не лише покращують користувацький досвід, але й підвищують впізнаваність бренду.

Оскільки важко знайти тему, яка б містила всі кольори вашого бренду за замовчуванням, зміна кольорів теми постає складним завданням. У таких випадках вам знадобиться розробник або технічна допомога. Але не у випадку з темою Optimized Magento 2 Theme.

Окрім 5 готових кольорових схем, ви можете налаштувати кольори веб-сайту на свій смак. І сьогодні ви дізнаєтеся, як це зробити.

Починаємо?

Кожен елемент вашої теми можна змінити. Тож ми структуруємо все у розділи. Отже, щоб змінити кольори теми в Magento 2, спершу підіть у Stores > Configuration > Optimized Theme > Color Schema.

Change theme colors in Magento 2

Theme Colors

Change Magento 2 theme colors

У цьому розділі ви вказуєте кольори, які представляють ваш бренд і використовуються найчастіше у вашому магазині.

  • Theme Color Primary — задає головний колір, що використовується найчастіше у вашому магазині. 
  • Theme Color Primary Alt — використовується для встановлення контрасту між елементами інтерфейсу і зазвичай є світлішим або темнішим варіантом основного кольору.
  • Theme Color Secondary — встановлює допоміжний колір, який використовується для акцентування певних елементів у вашому магазині.
Theme colors Magento 2

Basic Color

Basic color in Magento 2

  • Background Color — відображається за контентом, який можна гортати.
  • Text Color — задає колір тексту на усіх сторінках (напр. каталог, блог, кошик і т.д.).
  • Border Color — задає колір меж на кнопках за замовчуванням та полях введення.
  • Sidebar Background Color — встановлює колір фону для бічної панелі (наприклад, бічна панель облікового запису клієнта, бічна панель checkout).

Magento theme basic color

Primary Buttons

Primary buttons color Magento 2

Основні кнопки — це ті, які призначені для привернення уваги клієнтів. Зазвичай вони містять суцільну заливку.

напр. 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) — встановлює колір меж основних кнопок при наведенні миші.

Primary buttons Magento

Secondary Buttons

Configure secondary buttons color Magento 2

Другорядні кнопки зазвичай є альтернативою основним. Таким чином, їм приділяється менше візуальної уваги.

напр. 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) — встановлює колір меж другорядних кнопок при наведенні миші.

Secondary buttons color Magento

Change link color Magento 2

  • Link Color — встановлює колір усіх посилань вашого магазину.
  • Link Color (On Hover) — встановлює колір посилань при наведенні миші.

напр. посилання футера, блогу і т.д.

Link color Magento

Icon

Icon color Magento

  • Icon Color — встановлює колір іконок у вашому магазині.
  • Icon Color (On Hover) — встановлює колір іконок при наведенні миші.

напр. іконки соціальних мереж, add to wishlist, compare 

Icon color Magento

Icon Header

Icon header color Magento

  • Icon Header Color — встановлює колір іконок розташованих у шапці сторінки.
  • Icon Header Color (On Hover) — встановлює колір іконок у шапці сторінки при наведенні миші.

напр. іконка shopping cart

Icon header color

Input

Data input color Magento 2

  • Input Background Color — встановлює колір фону поля введення.
  • Input Placeholder Color — встановлює колір заповнювача поля введення (пропозиція, яка з'являється, коли ви починаєте вводити щось у формі).
  • Input Color — встановлює колір тексту, який ви додаєте у полях введення.
  • Input Border Color — встановлює колір меж полів введення.

напр. пошукова форма, форма адреси відправки на checkout, форма застосування знижки

Input colors

Magento header colors

  • Header Top Panel Background Color — встановлює колір фону верхньої панелі (де розташовані посилання "My Account" та "My Wish List").
  • Header Top Panel Color — встановлює колір елементів бічної панелі (тексту).
  • Header Background Color — встановлює колір фону шапки сторінки (де розташовані лого і панель пошуку). 

Header colors Magento

Magento navigation bar colors

  • 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) — встановлює колір елементів другого та третього рівнів при наведенні миші.

Navigation Menu Magento

Product Items

Catalog product items colors Magento

  • Product Background Color — встановлює колір фону блоків продуктів на сторінках каталогу.
  • Product Color — встановлює колір тексту в блоці продукту (напр. назва, кількість відгуків, ціна).
  • Product Border Color — встановлює колір меж блоку продукту на сторінках каталогу. 
  • Product Border Color Hover — встановлює колір меж блоку продукту на сторінках каталогу при наведенні миші. 

Product catalog items

Subscribe

Change color of subscribe block

  • Subscribe Background Color — встановлює колір фону для блоку subscription.
  • Subscribe Color — встановлює колір тексту у блоці subscription.

Magento subscription block

Magento footer color change

  • Footer Background Color — встановлює колір фону для футера. 

Примітка: колір тексту та посилань у футері визначається налаштуваннями Basic Color та Link відповідно.

Magento Footer

Copyright color schema Magento

  • Copyright Background Color — встановлює колір фону для блоку copyright.
  • Copyright Color — встановлює колір тексту у блоці copyright.

Magento copyright

Було зовсім нескладно, чи не так?

Ця стаття про зміну кольорів теми Magento 2 допоможе простіше додавати кольори бренду у вашому магазині. А тепер уявіть, що вам взагалі не потрібно всього цього робити.

Optimized Magento 2 Theme від Magefan містить 5 готових кольорових схем. Отже, якщо вам потрібна срібляста, червона, синя, зелена або чорна тема Magento 2, ви зможете застосувати відповідні кольори, натиснувши лише одну кнопку.

Простішого способу змінити кольори в темі Magento 2 просто не існує!