---
metadata:
  - name: generator
    content: Diplodoc Platform v5.50.6
alternate:
  - https://yandex.ru/support/kit/ru/site-editor/sections/collection.md
---
> **Documentation Index:** Fetch the complete configuration index at https://yandex.ru/support/kit/ru/llms.txt

# Коллекции и категории

В секции **Коллекции и категории** отображаются карточки категорий или коллекций товаров. По нажатию на карточку можно перейти на страницу категории или коллекции.

## Настроить секцию {#set-section}

1. Нажмите на секцию **Коллекции и категории**.

1. В панели справа отредактируйте настройки:
 

   #|
   ||
   
   **Настройка**

   |
   
   **Описание**

   ||
   ||
   
   **Заголовок секции**

   |
   
   Введите заголовок секции.

   ||
   ||
   
   **Расположение заголовка**

   |
   
   Выберите, где будет располагаться заголовок:

   * **Слева** — в левой части.

   * **По центру** — в центральной части.

   * **Как в теме** — использовать настройки вкладки **Тема**.

   ||
   ||
   
   **Палитра цветов**

   |
   
   Выберите палитру цветов, которая будет использоваться для секции.

   Палитры цветов настраиваются на вкладке [Тема](../themes#settings).

   ||      
   ||
   
   <span style="font-size: 20px; font-weight: 600;">Блок карточек<span>

   |
   
   >

   ||
   ||
   
   **Вариант отображения**

   |
   
   Укажите, как показывать товары в секции:

   * **Плитка**

   * **Карусель**

   ||
   ||
   
   **Количество карточек в ряду**

   |
   
   Выберите, сколько товаров показывать в одном ряду секции.

   ||
   ||
   
   **Две карточки в ряду на телефоне**

   |
   
   Включите опцию, чтобы отображать два товара в ряду в мобильной версии сайта.

   ||
   ||
   
   **Горизонтальный отступ**

   |
   
   Настройте отступы по горизонтали:

   * **Как в теме** — использовать настройки вкладки **Тема**.

   * **Нет** — убрать отступ между карточками.

   ||
   ||
   
   **Вертикальный отступ**

   |
   
   Настройте отступы по вертикали:

   * **Как в теме** — использовать настройки вкладки **Тема**.

   * **Нет** — убрать отступ между карточками.

   ||
   ||
   
   <span style="font-size: 20px; font-weight: 600;">Карточка<span>

   |
   
   >

   ||
   ||
   
   **Пропорции фотографий**

   |
   
   Выберите соотношение сторон фотографии в коллекции:

   * **Как в теме** — использовать настройки вкладки **Тема**.

   * **3:4**

   * **1:1**

   * **4:3**

   * **2:1**

   ||
   ||
   
   **Cпособ размещения фотографий**

   |
   
   Выберите способ размещения фотографий в карточках коллекций:

   * **Вписывать**

   * **Растягивать**

   ||
   ||
   
   **Затемнение фотографий**

   |
   
   Включите опцию, чтобы затемнять фотографии в карточках коллекций.

   ||
   ||
   
   **Цвет фона**

   |
   
   Настройте отображение фона в карточке:

   * **Нет**

   * **Второстепенный**

   * **Нейтральный**

   ||
   ||
   
   **Обводка карточки**

   |
   
   Включите опцию, чтобы отображать рамку вокруг карточки коллекции.

   ||
   ||
   
   <span style="font-size: 20px; font-weight: 600;">Текст карточки<span>

   |
   
   >

   ||
   ||
   
   **Отображение заголовка карточки**

   |
   
   Включите опцию, чтобы показывать заголовок карточки.

   ||
   ||
   
   **Выравнивание по горизонтали**

   |
   
   Выберите расположение заголовка по горизонтали:

   * **Слева**

   * **По центру**

   * **Справа**

   ||
   ||
   
   **Выравнивание по вертикали**

   |
   
   Выберите расположение заголовка по вертикали:

   * **Сверху**

   * **По центру**

   * **Снизу**

   * **Под фото**

   ||
   ||
   
   **Размер заголовка**

   |
   
   Выберите размер шрифта заголовка:

   * **Маленький**

   * **Средний**

   * **Большой**

   ||
   ||
   
   **Толщина заголовка**

   |
   
   Выберите толщину текста заголовка:

   * **regular**

   * **medium**

   * **bold**

   ||
   ||
   
   **Цвет заголовка**

   |
   
   Выберите в палитре или укажите HEX-код цвета текста.

   ||
   ||
   
   **Цвет фона под заголовком**

   |
   
   Выберите в палитре или укажите HEX-код цвета фона под текстом.

   ||
   ||
   
   **Затемнение фона**

   |
   
   Настройте затемнение фона карточки.

   ||
   ||
   
   <span style="font-size: 20px; font-weight: 600;">Размеры секции</span>

   |
   
   >

   ||
   ||
   
   **Растянуть секцию на весь экран**

   |
   
   Настройте расположение секции:

   * **Как в теме** — секция будет расположена в соответствии с настройкой на вкладке **Тема**.
   
   * **Да** — секция займет всю ширину экрана.

   * **Нет** — секция будет расположена ближе к центру экрана.

   ||
   ||
   
   **Отступ по краям на десктопе**

   |
   
   Настройте отступ секции от краев экрана для полной версии сайта:

   * **Как в теме** — секция будет расположена в соответствии с настройкой на вкладке **Тема**.
   
   * **Своё значение** — выберите значение для отступа. 

   ||
   ||
   
   **Отступ по краям на телефоне**

   |
   
   Настройте отступ секции от краев экрана для мобильной версии сайта:

   * **Как в теме** — секция будет расположена в соответствии с настройкой на вкладке **Тема**.
   
   * **Своё значение** — выберите значение для отступа. 

   ||
   ||
   
   **Отступ над секцией**

   |
   
   Выберите отступ над секцией:

   * **Двойной** — рекомендуется добавить, если сверху находится секция с фоном или нет секции.

   * **Обычный** — стандартный отступ между секциями.

   * **Нет** — секция соединяется вплотную с предыдущей.

   ||
   ||
   
   **Отступ под секцией**

   |
   
   Выберите отступ под секцией:

   * **Двойной** — рекомендуется добавить, если снизу находится секция с фоном.

   * **Обычный** — стандартный отступ между секциями.

   * **Нет** — секция соединяется вплотную со следующей.

   ||
   |#
   

1. Добавьте один или несколько элементов **Коллекция**.

## Коллекция

Коллекция — это элемент внутри секции **Коллекции и категории** в виде карточки с изображением и текстом под ним.

### Настроить {#set-collection}

1. Слева от названия секции **Коллекции и категории** нажмите <svg width="12" height="12" viewBox="0 0 12 12" fill="none" class="dc-Icon dc-Icon_role_supplementary dc-Icon_color_gray" focusable="false" aria-hidden="true"><path d="M9.57 3.62 5.975 7.211 2.38 3.619A.75.75 0 0 0 1.32 4.68l4.125 4.123a.75.75 0 0 0 1.06 0L10.63 4.68a.75.75 0 1 0-1.06-1.06Z" fill="currentColor"/></svg>.

2. Выберите **Коллекция**. Откроется правая панель управления настройками этого элемента.

3. Настройте отображение элемента:
&nbsp;

   #|
   ||
   
   **Настройка**
   
   |
   
   **Описание**
   
   ||
   ||
   
   **Заголовок карточки**
   
   |
   
   Введите текст заголовка.
   
   ||
   ||
   
   **Изображение**
   
   |
   
   Загрузите изображение, которое будет отображаться в карточке.
   
   ||
   ||
   
   **Ссылка**
   
   |
   
   Укажите ссылку на коллекцию или категорию. При нажатии на карточку произойдет переход по этой ссылке.
   
   ||
   |#


4. Чтобы добавить еще коллекцию, в левой панели нажмите **Добавить элемент** и повторите п. 3.

### Перенести {#move-collection}

Cлева от названия зажмите <svg width="16" height="16" viewBox="0 0 16 16" fill="none" class="dc-Icon dc-Icon_role_supplementary dc-Icon_color_gray" focusable="false" aria-hidden="true"><path d="M3.75 2.5a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Zm5.5 0a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0ZM3.75 8a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Zm7-1.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3ZM5.25 12a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Zm4 1.5a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Z" fill="currentColor"/></svg> и перетащите его.

### Удалить {#delete-collection}

Справа от названия элемента нажмите <svg width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M8.5 4a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0ZM8.5 10a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0ZM10 14.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Z" fill="currentColor"/></svg> → **Удалить**.


<!-- source: ru/_includes/support.md -->
<!-- стили желтой кнопки-ссылки: -->


## Обратиться в службу поддержки

<!-- желтая кнопка-ссылка: -->
[Написать в чат](https://yandex.ru/chat/#/user/6c041b05-07a4-99cc-79be-8670b7aff93d){.button}


<!-- желтая кнопка-ссылка: -->
[Написать письмо](https://yandex.ru/support/kit/ru/feedback.md){.button}
<!-- endsource: ru/_includes/support.md -->