часто возникает задача поменять шаблон catalog.smart.filter — например, селект сделать картинками, а на range slider цен навесить свои ползунки. Разобраться в битриксовом винегрете из html, php, js можно в этом посте.
Шаблон условно легко поделить на фильтр по св-вам, к-е указали в админке (Магазин — Основной каталог товаров — Настройки каталога), и фильтр по ценам. Это 2 цикла с пометками //prices //not prices

1. Начнем со св-в. Здесь идет проверка на тип св-ва (Вид в умном фильтре). Нам нужен

case "P"://DROPDOWN

блок

<div class="bx-filter-select-text" data-role="currentOption">

— это отмеченная опция. Если нет отмеченной, по умолчанию показывается Все, значение к-го передается в скрытом инпуте.

Далее в цикле идет вывод самих опций селекта с соответсвующими input type=»hidden».

// выпадающий блок с опциями 
<div class="bx-filter-select-popup" data-role="dropdownContent" style="display: none;">

// это заголовок самого св-ва, напр. Цвет, Размер, Марка.
<div class="bx-filter-parameters-box-title" onclick="smartFilter.hideFilterProps(this)">

Range slider для цен

Фильтр по ценам работает, если миним. цена действительно меньше максимальной. После проверки есть переменная $step_num. Обнулив ее легко убрать шкалу.

// отвечает за вывод шкалы.
for ($i = 0; $i < $step_num; $i++) 

2 инпута min-price/max-price. Изначально пустые.

// установит min/max цены. 
$arItem["VALUES"]["MIN"]["HTML_VALUE"] = $arItem["VALUES"]["MIN"]["VALUE"]; // curMinPrice
 $arItem["VALUES"]["MAX"]["HTML_VALUE"] = $arItem["VALUES"]["MAX"]["VALUE"]; // curMaxPrice

// ползунок
<div class="bx-ui-slider-track" id="drag_track_<?=$key?>">

И в самом конце блок

<div class="col-xs-12 bx-filter-button-box">

— 2 кнопки Показать, очистить, а также всплывашка с количеством результатов фильтра «bx-filter-popup-result».