Создаём свою корзину на тильда в меню.

Друзья, приветствую всех!
Сегодня мы разберёмся , как сделать свою корзину при создании
Интернет-магазина на тильда.
Можно , конечно, и оставить тильдовскую , но она появляется, толко при заказе товара.
Я делал ИМ на тильда для заказчика и у меня было такое меню с корзиной.

В самом начале необходимо этой корзине присвоить класс, кликаем правой кнопкой на корзину
и вменю выбираем «Add CSS Class Name» , вот скрин для понимания.

Чтобы моя корзина заработала и стала всё считать и показывать, необходимо добавить в зерро-блок html код ,
то есть кликнуть по кнопке + справа и выбрать Add html , как здесь.

затем вставить в окно html первую часть кода

<!— Первая часть кода —>

<style> 
.basket-counter { 
display: flex;
 align-items: center;
 justify-content: center;
 width: 30px; /* Ширина круга */
 height: 30px; /* Высота круга */
 border-radius: 50px; /* Скругление границ */
 font-size: 18px; /* Размер цифр */
 color: white; /* Цвет цифр */
 background-color: red; /* Цвет круга */ } 
</style>

Этот код будет показывать количество товара в корзине в красном кружке

Затем добавляем ещё один блок с html кодом и тоже двигаем его к нашей корзине
Этот блок будет показывать сумму товара в корзине.
Мы должны добавить в этот блок вторую часть кода

<!— Вторая часть кода —>

<style> 
.order-counter {
        color: white;
        font-weight: 600;
    }
</style>

В итоге у меня получилась такая картина