<!-- Меню в шапке --> <ul class="menunav" itemscope itemtype="https://schema.org/SiteNavigationElement"> {% FOR menu %} {% FOR header %} {% FOR links %} <li><a href="{menu.header.links.URL}" {% IF menu.header.links.SELECTED %}class="active"{%ENDIF%} {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %} itemprop="url">{menu.header.links.NAME}</a></li> {% ENDFOR %} {% ENDFOR %} {% ENDFOR %} </ul> {% ENDIF %} </div>
после него вставьте:
<div class="header-search-one"> <div class="search-hover"> <form id="search_mini_form_one" action="{SEARCH_URL}" method="get" title="Поиск по магазину" onsubmit="if($(this).find('.form-search').val()) return false;"> <div class="form-search"> <input type="text" name="q" value="{SEARCH_QUERY}" class="input-text search-string" placeholder="Поиск по магазину..."> <input type="hidden" name="goods_search_field_id" value="0"> <button type="submit" title="Искать" class="fa fa-search"></button> </div> </form> </div> </div>
далее зайдите в Редактор шаблонов-->main.css и в самый конец кода вставьте:
#header {margin-bottom: 10px;} #header .header-search-one {position: relative;clear: both;text-align: center;margin: 0 auto;display: flex;flex-direction: row;flex-wrap: wrap;justify-content: flex-end;align-items: center;align-content: stretch;} #header .header-search-one .search-hover {position: relative;margin-top: 10px;} #header .header-search-one:hover .search-hover {opacity: 1;filter: alpha(opacity=100);-webkit-transform: scale(1);-moz-transform: scale(1);-o-transform: scale(1);transform: scale(1);} #header .header-search-one .search-hover .form-search {position: relative;z-index: 1000;padding: 0;float: right;background: #fff;border: 1px solid #e5e5e5;width: 300px;} #header .header-search-one .search-hover .form-search input {font-size: 13px;float: left;margin: 0;border: none;background: none;padding: 6px 10px;color: #b6b6b6;width: 300px;height: 43px;line-height: 43px;padding-right: 60px;} #header .header-search-one .search-hover .form-search button {position: absolute;top: -1px;right: 5px;outline: 0;} #header .header-search-one .search-hover .form-search .fa-search {font-size: 16px;color: #333744;line-height: 43px;padding: 0 17px;width: 50px;background: transparent;float: right;margin-bottom: 0;border: 0;} #header .header-search-one .search-hover .form-search .fa-search:hover {color: #fff;background: #09afe7;cursor: pointer;} @media all and (max-width: 992px) { #header .header-search-one {position: relative;clear: both;text-align: center;margin: 0 auto;display: flex;flex-direction: row;flex-wrap: wrap;justify-content: center;align-items: center;align-content: stretch;} }