Как изменить цвет кнопки «Купить»

Дата последнего изменения:

Эквид — это встраиваемое решение. Вы можете добавить его на сайт, страницу в блоге, в группу во ВКонтакте или на страницу в Facebook за несколько минут. Чтобы магазин был максимально похожим на сайт и не выглядел чужеродным организмом, вы можете изменить дизайн его витрины — цвет, размер кнопок, цвет текста и многое-многое другое. Сделать это можно с помощью специальных CSS-правил (их еще называют CSS-кодами), которые указывают, как элемент нужно отображать. Более подробно о том, как подобрать и использовать CSS-правила, написано в нашей статье: Как изменить дизайн в Эквиде. Готовый CSS-код нужно добавить в активную CSS-тему в панели управления Эквида: Настройки > Дизайн.

Если ваш сайт разработан на Wordpress, вы можете включить тему «Хамелеон» в панели управления Wordpress. С помощью этой функции Эквид автоматически подстроится под стили и цвета сайта.

Кнопки «Купить» на страницах со списком товаров созданы с помощью CSS3. Это значит, что они — не просто статичные картинки, а набор фильтров, градиентов, стилей и других CSS-правил, которые указаны прямо в коде. Их можно изменять. Это делает кнопки довольно гибкими в использовании — человек, который не владеет навыками программирования, может изменить тот или иной элемент кнопок с помощью специальных онлайн-генераторов CSS-кодов. 

Изменить цвет кнопок «Купить»

Перекрасим кнопку «Купить» в голубой цвет. Для этого в активную CSS-тему в панели управления Эквида нужно добавить CSS-код:

button.form-control__button.form-control__button--icon-center {
background-color:#ADD8E6 !important;
}

 

_____.png

Цвет кнопки в CSS-коде (background:#ADD8E6) взят в качестве примера. Вы можете менять его на ваше усмотрение.

Изменить цвет кнопок «Купить» при наведении

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

button.form-control__button.form-control__button--icon-center:hover {
background-color:#DCDCDC !important; 
}

 

_____2.png

 

Изменить текст на кнопках «Купить»

Кнопки купить — это не изображения, а элементы магазина, которые созданы с помощью CSS. Поэтому для изменения текста на кнопках «Купить» нужно использовать общий подход для изменения текстовых меток в Эквиде. Вы можете попробовать наше приложение Storefront Label EditorС его помощью можно изменить текст на этих кнопках прямо в панели управления Эквида — нужно в поиске приложения найти нужную текстовую метку и переименовать её. Приложение бесплатное и доступно на всех наших платных планах.

 

К началу
Была ли эта статья полезной? Пользователи, считающие этот материал полезным: 6 из 17