Для отображения категории товара и его карточки на главной странице в Битрикс, вам понадобится использовать модуль "Торговый каталог" (catalog) или его улучшенную версию "Торговый каталог 2.0" (catalog2).
Для начала, убедитесь, что в вашем проекте установлен и активирован нужный модуль. Если он не установлен, его можно найти в разделе "Маркетплейс" административной панели Битрикс.
Затем, для отображения категории товаров на главной странице, вам понадобится создать компонент "Каталог: категории" (bitrix:catalog.section).
1. Откройте редактор страницы, на которой вы хотите отобразить категорию товаров.
2. Добавьте компонент "Каталог: категории" на нужное место страницы.
3. В настройках компонента укажите необходимые параметры, такие как ID инфоблока с товарами и ID раздела, содержащего нужные категории. Вы также можете задать параметры отображения (например, количество элементов в категории).
4. Сохраните изменения на странице.
После этого, на главной странице будет отображаться список категорий товаров.
Чтобы отобразить карточку товара в выбранной категории, можно использовать компонент "Каталог: элемент" (bitrix:catalog.element). Добавьте его на страницу, где будет отображаться подробная информация о товаре, и настройте необходимые параметры, такие как выбор ID инфоблока с товарами и ID элемента.
Помимо вышеуказанных компонентов, в Битрикс также существуют другие инструменты для работы с торговым каталогом, такие как объектная модель и API функции. В зависимости от конкретных требований вашего проекта, вы можете выбрать наиболее подходящий способ отображения категорий и карточек товаров на главной странице.