Как изменить кнопки “Купить”

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

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

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

 

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

Например, вы можете убрать закругленные углы кнопок, изменить их цвет, размер, цвет шрифта — словом, все, что душе угодно. 

Изменить цвет кнопок “Купить”

 

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

.ecwid .ecwid-btn--buyNow {
 background: #ff9c33;
}
.ecwid .ecwid-btn--buyNow:hover {
 background: #ffc180;
}
.ecwid .ecwid-btn--buyNow:focus,
.ecwid .ecwid-btn--buyNow:focus:hover {
 border-color: #ffc180;
}
.ecwid .ecwid-btn--buyNow:active,
.ecwid .ecwid-btn--buyNow:focus:active {
 background: #ff9c33;
}

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

Сделать кнопки “Купить” квадратными

 

Изменить форму кнопок "Купить" можно с помощью CSS-кода: 

.ecwid .ecwid-btn--buyNow {
    border-radius: 0px;
}

 

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

 

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

 

Второй вариант: вы можете изменить текст на кнопках с помощью специального javascript кода. Его нужно добавить в исходный код сайта, в который встроен Эквид. Важно: если вы используете в работе стартовый сайт, этот вариант вам не подойдет, потому что исходный код стартового сайта недоступен для редактирования.

 

<script>
ecwidMessages = {
"BuyNow.buy_now":"Заказать"
}
</script>

 

 

В примере мы меняем текст “Купить” на “Заказать”. Вы же можете менять его так, как будет наиболее актуально для вашего магазина. 

Была ли эта статья полезной?
Пользователи, считающие этот материал полезным: 3 из 8
Остались вопросы?
Обратитесь за помощью
  • Форум

    Общайтесь с другими пользователями Эквида и командой поддержки клиентов по любым вопросам, связанным с работой вашего магазина.

  • Связь с техподдержкой

    Есть вопросы? Свяжитесь с нами, мы будем рады вам помочь.

  • Состояние сервиса

    Страница с информацией о запланированных технических работах и текущем состоянии сервиса.