»
»
Как настроить внешний вид сортировки товаров в Тильде ST315N

Как настроить внешний вид сортировки товаров в Тильде ST315N

30.01.2026
~ 1 минута
время чтения статьи
Для блока ST315N (как и для большинства штатных блоков магазина в Тильде) внешний вид блока сортировки не настраивается через типографику и стандартные настройки.
Ниже я публикую код, который необходимо изменить в соответствии с настройками вашего проекта, добавив блок T123 на нужную страницу


<style>
/* Изменяем шрифт выпадающего списка сортировки в ST315N */
.t-store__sort-select {
    font-family: 'ВашШрифт', sans-serif !important; 
    font-size: 14px !important; /* Размер */
    font-weight: 400 !important; /* Жирность */
    color: #000000 !important; /* Цвет текста */
}

</style>
Если нужна большая кастомизация этого блока: цвет, скругление, обводка, отступы, то нужен код ниже
<style>
/* --- НАСТРОЙКИ СОРТИРОВКИ ST315N --- */

/* 1. Стили самого выпадающего списка */
.t-store__sort-select {
    /* ТИПОГРАФИКА */
    font-family: 'Manrope', Arial, sans-serif !important; /* ЗАМЕНИТЕ на ваш шрифт */
    font-size: 14px !important;       /* Размер шрифта */
    font-weight: 400 !important;      /* Жирность */
    color: #1a1a1a !important;        /* Цвет текста */
    line-height: 1.4 !important;
    
    /* ВИЗУАЛ БЛОКА */
    background-color: #ffffff !important; /* Цвет фона */
    border: 1px solid #e0e0e0 !important; /* Цвет и толщина рамки */
    border-radius: 6px !important;        /* Скругление углов */
    padding: 10px 40px 10px 16px !important; /* Отступы: верх право низ лево */
    
    /* УБИРАЕМ СТАНДАРТНУЮ СТРЕЛКУ БРАУЗЕРА */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    
    /* ДОБАВЛЯЕМ СВОЮ СТРЕЛКУ (SVG) */
    /* Здесь закодирована черная галочка. Можно менять цвет fill='%23000000' */
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23000000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center; /* Позиция стрелки */
    background-size: 10px; /* Размер стрелки */
    
    cursor: pointer;
    transition: all 0.3s ease; /* Плавность анимации */
    outline: none !important;
}

/* 2. Состояние при наведении (Hover) */
.t-store__sort-select:hover {
    border-color: #000000 !important; /* Рамка темнеет */
    background-color: #fafafa !important; /* Легкий фон */
}

/* 3. Текст "Сортировать:" (лейбл слева) */
.t-store__sort-title {
    font-family: 'Manrope', Arial, sans-serif !important; /* Тот же шрифт */
    font-size: 14px !important;
    color: #888888 !important; /* Цвет лейбла посветлее */
    font-weight: 500 !important;
    margin-right: 12px !important;
}

/* МОБИЛЬНАЯ ВЕРСИЯ */
@media screen and (max-width: 640px) {
    /* Если на мобильном нужно убрать слово "Сортировать:", раскомментируйте строчку ниже: */
    /* .t-store__sort-title { display: none !important; } */
    
    .t-store__sort-select {
        width: 100% !important; /* На мобильном растянуть на всю ширину */
    }
}
</style>

Что нужно поправить под себя:

Что нужно поправить под себя:

  1. Шрифт: В строке font-family: 'Manrope', … замените Manrope на точное название вашего шрифта из настроек сайта.
  2. Цвета:
  • #1a1a1a — цвет текста опций.
  • #e0e0e0 — цвет рамки в спокойном состоянии.
  • #0 — цвет рамки при наведении.
  1. Стрелка: Я вставила SVG-код минималистичной галочки. Если нужна другая, просто удалите блок background-image и строки appearance: none, тогда вернется стандартная браузерная стрелка.
Этот код сделает блок сортировки похожим на современный UI-элемент, а не на форму из Windows 98.

Еще статьи