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

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

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

Вы можете изменить дизайн виджета поиска, добавляя 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 добавляет такие возможности в ваш магазин:
  • Покупали могут находить товар по одному или нескольким цветам
  • Вы можете добавить фильтр по цветам в категории товаров
  • Вы можете создать коллекции цветов, чтобы ускорить поиск товара

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

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

Приятно! Спасибо за ваш отзыв.

Спасибо за ваш отзыв.

Простите за это! Что было не так?
Пользователи, считающие этот материал полезным: 8 из 22