Как изменить поле поиска

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

Внешний вид поля поиска на Стартовом сайте

Если вы продаете на Стартовом сайте Эквида, то можете изменить внешний вид поля поиска на главной странице сайта в настройках внешнего вида секции Шапка сайта и меню.

Чтобы изменить внешний вид поля поиска:

1. В Панели управления Эквида перейдите в Каналы продаж → Настроить Стартовый сайт → Редактировать сайт (или Сайт → Редактировать сайт).
2. Нажмите на секцию Шапка сайта и меню в списке слева.
3. Перейдите на вкладку Дизайн и выберите способ отображения секции, который вам нравится.
4. Нажмите на Фон и выберите тип заливки и цвет для фона секции.
5. Нажмите на Меню и иконки и выберите шрифт и цвет для иконок секции и текста запросов, которые посетители сайта будут вводить в поле поиска.
6. Нажмите Опубликовать.

Готово! Тип заливки, шрифт и цвета, которые вы выберете, будут использоваться для поля поиска и его иконки на сайте.

Внешний вид виджета поиска

Если ваш сайт на сторонней платформе вроде Wix или Wordpress, или вы добавили поиск на свой собственный сайт, то стиль поля ввода и кнопки «Поиск» можно изменить с помощью кодов CSS.

Узнайте больше о том, как добавить 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; /* цвет шрифта в поле поиска */
   }

   Замените #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; /*используйте картинку как фон*/
   }

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

Расположение поля поиска

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

Чтобы изменить расположение виджета поиска, можно использовать следующий код:

/* Расположение поля поиска*/
.ecwid-search-widget {
max-width: 170px; /* укажите нужную ширину */
position:relative;
margin-left: 400px; /* укажите нужный отступ слева */
margin-top: 10px; /* укажите нужный отступ сверху */
}

В зависимости от того, как вы хотите изменить расположение поля поиска, выберите подходящие вам значения margin-left и margin-top.

Если ваш магазин добавлен на Wordpress, вы также можете использовать такие коды:

• Чтобы разместить поле поиска справа:

  
  .ecwid-shopping-cart-search {
      text-align: right
  }

• Чтобы разместить поле поиска по центру:

  
  .ecwid-shopping-cart-search {
      text-align: center
  }

Расширение функционала поиска

Поиск по товарам в вашем Эквид-магазине можно также дополнить полезной функциональностью. В Магазине приложений Эквида есть приложение для этого:

CloudSearch

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

Помимо умного поиска в CloudSearch есть и другие возможности:

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

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