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

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

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

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

__________________________4_.png

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

  1. В Панели управления Эквида перейдите в Обзор каналов → Настроить Стартовый сайтРедактировать сайт (или СайтРедактировать сайт).
  2. Нажмите на блок Шапка.
  3. Перейдите на вкладку Дизайн и нажмите на элемент Иконка поиска.
  4. Нажмите на поле Цвет и выберите нужный цвет из палитры:

    __________________________1_.png

    Вы также можете ввести в поле Цвет уже готовый код цвета, если вы его знаете.
  5. Нажмите Сохранить и опубликовать.

Цвет, который вы выберете, будет использоваться для иконки поиска и для текста, который покупатели вводят в поле поиска.

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

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

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

Узнайте больше о том, как добавить CSS-коды в ваш магазин →

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

  1. Стиль поля ввода:__________________________2_.png
    /*  Стиль поля ввода */
    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. Стиль кнопки «Поиск»:__________________________3_.png
    /* Стиль кнопки "Поиск" */
    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
    }
Если вы добавили поиск в Эквид-магазин на Wix, то легко можете изменить его расположение в самом редакторе Wix. Просто зайдите на страницу с магазином, кликните на поле поиска и перетащите в то место, где хотите его показывать. После этого сохраните и опубликуйте изменения.

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

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

В Магазине приложений Эквида есть несколько готовых приложений для этого:

Доступно на планах Venture, Business, Unlimited.

CloudSearch

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

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

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

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

Clickable Brand

Clickable Brand позволяет подключить в вашем магазине фильтры по бренду товара. Поле "Бренд" у товара станет кликабельным, и это сделает навигацию более удобной.

Узнайте, как настроить атрибут "Бренд" для товаров →

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

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

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

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

Простите за это! Что было не так?
Пользователи, считающие этот материал полезным: 17 из 42
10
Мы используем cookie-файлы и сервисы аналитики, чтобы помнить о ваших предпочтениях, оценивать эффективность наших рекламных кампаний и улучшать работу сайта. Выбирая «Принимаю», вы даёте согласие на использование файлов cookie.
Принимаю Не принимаю