Разместите блок ST300 на странице и добавьте например "Новинка" бейдж
Выберите нужный для вас вариант из списка выше с номерами.
Вставьте код на страницу или в подвал сайта в блок "Другое" - Т123
Замените стили на .t776 для (ST305N),
.t778 для (ST310N), .t786 для (ST315N)
Если не получается: Замените стили на t-store__card__mark и t-store__card__mark-wrapper соответственно
<!-- Изменяем внешний вид отметки на карточке -->
<!-- https://youx.agency/izmenyaem-vneshnij-vid-otmetki-na-kartochke -->
<style>
.t776__mark {
width: 85px;
height: 50px;
}
/* Настройки для мобильной версии */
@media screen and (max-width: 960px) {
.t776__mark {
width: 75px;
height: 35px;
border-radius: 15px;
}
}
</style>
<!-- Изменяем внешний вид отметки на карточке -->
<!-- https://youx.agency/izmenyaem-vneshnij-vid-otmetki-na-kartochke -->
<style>
.t776__mark {
width: 80px;
height: 36px;
/* Цвет обводки */
border: 5px solid #232323;
}
.t776__markwrapper {
top: -10px !important;
}
/* Настройки для мобильной версии */
@media screen and (max-width: 960px) {
.t776__mark {
width: 80px;
font-size: 10px;
height: 35px;
border-radius: 25px;
}
}
</style>
<!-- Изменяем внешний вид отметки на карточке -->
<!-- https://youx.agency/izmenyaem-vneshnij-vid-otmetki-na-kartochke -->
<style>
.t-store__card__mark-wrapper {
right: 0px;
top: 0px;
}
.t-store__card__mark {
border-radius: 0 15px 0 15px;
}
</style>
<!-- Изменяем внешний вид отметки на карточке -->
<!-- https://youx.agency/izmenyaem-vneshnij-vid-otmetki-na-kartochke -->
<style>
.t-store__card__mark-wrapper {
left: 10px !important;
top: 10px;
}
</style>
<!-- Изменяем внешний вид отметки на карточке -->
<!-- https://youx.agency/izmenyaem-vneshnij-vid-otmetki-na-kartochke -->
<style>
.t-store__card__mark-wrapper {
right: -26px !important;
top: 24px !important;
}
.t-store__card__mark {
display: flex;
flex-direction: column; /* Устанавливаем направление столбцом */
width: 90px;
height: 40px;
border-radius: 15px 0 15px 0px;
box-sizing: border-box;
padding: 0 10px;
justify-content: center;
align-items: center;
transform: rotate(270deg);
}
</style>
<style>
.t-store__card__mark-wrapper {
left: 10px;
bottom: 10px !important;
}
.t-store__card__mark {
font-size: 11px;
width: 35px;
height: 25px;
border-radius: 10px;
}
</style>