При реализации подобных задач мы, как правило, сначала разрабатываем адаптивный макет в Figma с версиями для десктопа, планшета и мобильных устройств. После согласования с клиентом макет передается на верстку и далее интегрируется на сайт.
Однако в данном случае на сайте уже присутствовали аналогичные по структуре и дизайну элементы, что позволило использовать существующую верстку без дополнительной отрисовки. Например, блок «Похожие товары»:
Мы использовали верстку существующего блока, но при этом создали новый инфоблок и отдельные компоненты в административной панели сайта. Была выполнена внутренняя настройка параметров и логики работы блока
Инфоблок сделан полностью редактируемым через админ. панель, что позволяет контент-менеджеру при необходимости самостоятельно добавлять товары или обновлять содержимое без привлечения разработчиков.
Блок на сайте
Блок в админ. панели сайта


