Открой на ююбе видео по битриксу там есть хорошие обучали
https://www.youtube.com/watch?v=hdgs1AzoShc и прям со своим шаблоном иди по ниим.
<!DOCTYPE html>
<html lang="en">
<head>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<?$APPLICATION->ShowHead();?>
<title><?$APPLICATION->ShowTitle();?></title>
<link href="/local/templates/top_com/assets/img/favicon.webp" rel="icon"> <!-- Favicons -->
<link href="/local/templates/top_com/assets/img/apple-touch-icon.webp" rel="apple-touch-icon"> <!-- Favicons -->
<?
use Bitrix\Main\Page\Asset;
Asset::getInstance()->addCss(SITE_TEMPLATE_PATH . '/assets/vendor/animate.css/animate.min.css'); // Vendor CSS
Asset::getInstance()->addCss(SITE_TEMPLATE_PATH . '/assets/vendor/aos/aos.css'); // Vendor CSS
Asset::getInstance()->addCss(SITE_TEMPLATE_PATH . '/assets/vendor/bootstrap/css/bootstrap.min.css'); // Vendor CSS
Asset::getInstance()->addCss(SITE_TEMPLATE_PATH . '/assets/bootstrap-icons/bootstrap-icons.css'); // Vendor CSS
Asset::getInstance()->addCss(SITE_TEMPLATE_PATH . '/assets/vendor/bootstrap-icons/bootstrap-icons.css'); // Vendor CSS
Asset::getInstance()->addCss(SITE_TEMPLATE_PATH . '/assets/vendor/boxicons/css/boxicons.min.css'); // Vendor CSS
Asset::getInstance()->addCss(SITE_TEMPLATE_PATH . '/assets/vendor/glightbox/css/glightbox.min.css'); // Vendor CSS
Asset::getInstance()->addCss(SITE_TEMPLATE_PATH . '/assets/vendor/remixicon/remixicon.css'); // Vendor CSS
Asset::getInstance()->addCss(SITE_TEMPLATE_PATH . '/assets/vendor/swiper/swiper-bundle.min.css'); // Vendor CSS
Asset::getInstance()->addCss(SITE_TEMPLATE_PATH . '/assets/css/style.css'); // Main CSS
Asset::getInstance()->addCss(SITE_TEMPLATE_PATH . '/assets/css/socializer.min.css'); // https://www.aakashweb.com/apps/social-buttons-generator/
Asset::getInstance()->addJs(SITE_TEMPLATE_PATH . '/assets/vendor/aos/aos.js'); // https://michalsnik.github.io/aos/
Asset::getInstance()->addJs(SITE_TEMPLATE_PATH . '/assets/vendor/glightbox/js/glightbox.min.js'); // https://biati-digital.github.io/glightbox/#examples
Asset::getInstance()->addJs(SITE_TEMPLATE_PATH . '/assets/vendor/bootstrap/js/bootstrap.bundle.min.js'); // Bro, bootstrap 5
Asset::getInstance()->addJs(SITE_TEMPLATE_PATH . '/assets/vendor/isotope-layout/isotope.pkgd.min.js'); //https://isotope.metafizzy.co/
Asset::getInstance()->addJs(SITE_TEMPLATE_PATH . '/assets/vendor/swiper/swiper-bundle.min.js'); //https://swiperjs.com/demos
Asset::getInstance()->addJs(SITE_TEMPLATE_PATH . '/assets/js/main.js');
Asset::getInstance()->addString('<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">');
?>
</head>
<body>
<div id="panel">
<?$APPLICATION->ShowPanel();?>
</div>
..
