1. Змінити колір кнопок «Купити» для першого варіанту вітрини
2. Змінити колір кнопок «Купити» при наведенні для першого варіанту вітрини
4. Змінити колір кнопок «Купити» для другого варіанту вітрини
5. Змінити колір кнопок «Купити» при наведенні для другого варіанту вітрини
7. Змінити текст на кнопках «Купити»

Еквід - це вбудоване рішення. Ви можете додати його на сайт, сторінку в блозі, в групу у ВКонтакте або на сторінку в Facebook за кілька хвилин. Щоб магазин був максимально схожим на сайт і не виглядав чужорідним організмом, ви можете змінити дизайн його вітрини - колір, розмір кнопок, колір тексту і багато-багато іншого. Зробити це можна за допомогою спеціальних CSS-правил (їх ще називають CSS-кодами), які вказують, як елемент потрібно відображати. Більш докладно про те, як підібрати і використовувати CSS-правила, написано в нашій статті: Як змінити дизайн в Еквіде. Готовий CSS-код потрібно додати в активну CSS-тему в панелі управління Еквіда: Установки> Дизайн .

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

Кнопки «Купити» на сторінках зі списком товарів створені за допомогою CSS3. Це означає, що вони - не просто статичні картинки, а набір фільтрів, градієнтів, стилів і інших CSS-правил, які вказані прямо в коді. Їх можна змінювати. Це робить кнопки досить гнучкими у використанні - людина, яка не володіє навичками програмування, може змінити той чи інший елемент кнопок за допомогою спеціальних онлайн-генераторів CSS-кодів.

У Еквід є два варіанти вітрини з товарами. Від типу вашої вітрини залежить те, який код вам знадобиться, щоб перефарбувати кнопку «Купити», про яку ми говоримо в цій статті. Подивіться на товари на вітрині: якщо кнопка «Купити» велика і темна, назвемо ваш варіант вітрини Перша. Якщо кнопка невелика і світла - ваша вітрина буде Друга.

Зліва товар з першої вітрини, праворуч з другої:

Змінити колір кнопок «Купити» для першого варіанту вітрини

Перефарбуємо кнопку «Купити» в блакитний колір. Для цього в активну CSS-тему в панелі управління Еквіда потрібно додати CSS-код:

button.ecwid-btn.ecwid-btn - primary.ecwid-btn - buyNow.ecwid-btn - actionOK {background-color: # ADD8E6; }

Колір кнопки в CSS-коді (background: # ADD8E6) узятий в якості прикладу. Ви можете змінювати його на ваш розсуд.

Змінити колір кнопок «Купити» при наведенні для першого варіанту вітрини

Минулий код поміняв основний колір кнопки «Купити», тепер поміняємо колір цієї ж кнопки при наведенні. Для цього потрібно додати другий код в ту ж CSS-тему. Виберемо сірий колір кнопки при наведенні (background: # B0C4DE):

button.ecwid-btn.ecwid-btn - primary.ecwid-btn - buyNow.ecwid-btn - actionOK: hover {background-color: # B0C4DE;
}

Змінити колір кнопок «Купити» для другого варіанту вітрини

Перефарбуємо кнопку «Купити» в блакитний колір. Для цього в активну CSS-тему в панелі управління Еквіда потрібно додати CSS-код:

.grid-product__button.grid-product__buy-now button.form-control__button.form-control__button - icon-center {background-color: # ADD8E6; }

Колір кнопки в CSS-коді (background: # ADD8E6) узятий в якості прикладу. Ви можете змінювати його на ваш розсуд.

Змінити колір кнопок «Купити» при наведенні для другого варіанту вітрини

Минулий код поміняв основний колір кнопки «Купити», тепер поміняємо колір цієї ж кнопки при наведенні. Для цього потрібно додати другий код в ту ж CSS-тему. Виберемо сірий колір кнопки при наведенні (background: #DCDCDC):

.grid-product__button.grid-product__buy-now button.form-control__button.form-control__button - icon-center: hover {background-color: #DCDCDC;
}

Змінити текст на кнопках «Купити»

Кнопки купити - це не зображення, а елементи магазину, які створені за допомогою CSS. Тому для зміни тексту на кнопках «Купити» потрібно використовувати загальний підхід для зміни текстових міток в Еквіде. Ви можете спробувати наш додаток Storefront Label Editor . З його допомогою можна змінити текст на цих кнопках прямо в панелі управління Еквіда - потрібно в пошуку додатка знайти потрібну текстову мітку і перейменувати її. Додаток безкоштовне і доступно на всіх наших платної.