Как изменить виджет поиска

Виджет поиска помогает вашим клиентам находить нужные товары в магазине. Вы можете изменить дизайн поля поиска или сам процесс поиска при помощи приложений.

Как изменить внешний вид виджета поиска

Вы можете изменить дизайн виджета поиска, добавляя CSS-коды в тему вашего магазина.

1. Стиль поля ввода:


/*  Стиль поля ввода */
input.ecwid-search-widget__input[type="text"] {
 width: 100px; /* укажите нужную ширину */
 height: 20px; /* укажите нужную высоту*/
 border: solid 1px red; /* измените цвет рамки */
 background-color: blue; /* измените цвет фона */
 font-size: 12px; /* размер шрифта в поле поиска */
 color: #000000; /* цвет шрифта в поле поиска */
}

2. Стиль кнопки «Поиск»:


/* Стиль кнопки "Поиск" */
button.ecwid-search-widget__btn {
 width: 20px; /* укажите нужную ширину */
 height: 10px; /* укажите нужную высоту */
 border: solid 1px #ffffff; /*измените цвет рамки */  
 background: transparent url(image/button_search.png) no-repeat bottom center !important; /*используйте картинку как фон*/
}

Замените image/button_search.png на прямую ссылку на вашу картинку для кнопки.
Например: http://www.example.com/images/button_bg.png

3. Поиск на Стартовом сайте:


.ec-minicart.ec-minicart--pill .ec-minicart.ec-minicart--rect { 
border: 1px solid #e6e6e6; 
}

.search-panel .text-field { 
background-color: #F3F6F9; 
border: 2px solid #DC230A; 
}

Как улучшить виджет поиска

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

Есть несколько готовых приложений для этого:

CloudSearch

CloudSearch добавляет мгновенный поиск по товарам и категориям. Список результатов в выпадающем списке под полем ввода автоматически меняется, предлагая наиболее релевантные товары и категории в ответ на вводимый пользователем запрос. Список найденных товаров показывает базовую информацию по каждому из них с возможностью перейти к полному описанию.

Кроме быстрого и релевантного поиска CloudSearch предлагает средства для настройки поиска:

  • Синонимы – добавление синонимов расширяет список ключевых слов, по которым находятся те или иные товары
  • Promotions (мерчандайзинг) – продвижение выделенных товаров в результатах поиска
  • Просмотр статистики для лучшего понимания поисковых запросов покупателей


Это платное приложение с бесплатным 30-дневным пробным периодом.

Product Search Enhancer 

Product Search Enhancer показывает покупателю список возможных вариантов для поиска, пока покупатель печатает запрос в поисковом поле. Если навести мышкой на один из вариантов из списка, покупатель увидит картинку товара и его описание. Это приложение помогает быстрее найти нужный товар.

Функция расширенного поиска позволяет сортировать товары по цене, категориям, ключевым словам и многому другому.

Приложение можно настроить так, как вам нужно:

  • Изменить список предлагаемых вариантов
  • Изменить внешний вид окошка при наведении на товар
  • Добавить свое поле поиска на страницы магазина

Это платное приложение с бесплатным 7-дневным пробным периодом.

Clickable Brand 

Clickable Brand упрощает навигацию в вашем магазине сделав кликабельным поле "Бренд" у товара. Это позволит создать в магазине фильтры по бренду товара.

Настроить атрибут "Бренд" для товара вам поможет наша статья Типы товаров и атрибуты.

Это платное приложение с бесплатным 14-дневным пробным периодом.

Filter by Color

Filter by Color добавляет такие возможности в ваш магазин:
  • Покупали могут находить товар по одному или нескольким цветам
  • Вы можете добавить фильтр по цветам в категории товаров
  • Вы можете создать коллекции цветов, чтобы ускорить поиск товара

Это приложение бесплатное.

Была ли эта статья полезной?

Замечательно! Спасибо за ответ!

Сожалеем об этом! Ответим на ваш вопрос в почте или чате.

Написать техподдержке