
 <!-- Изменяем внешний вид отметки на карточке -->
 <!-- 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>

Скопировать код

Код скопирован

Код #2


 <!-- Изменяем внешний вид отметки на карточке -->
 <!-- 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>

Скопировать код

Код скопирован

Код #3

Первое значение "15" меняем на радиус скругления карточки товара


 <!-- Изменяем внешний вид отметки на карточке -->
 <!-- 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>

Скопировать код

Код скопирован

Код #4 (Слева)


 <!-- Изменяем внешний вид отметки на карточке -->
 <!-- https://youx.agency/izmenyaem-vneshnij-vid-otmetki-na-kartochke -->

<style>

.t-store__card__mark-wrapper {
left: 10px !important;
top: 10px;
}

</style>

Скопировать код

Код скопирован

Код #5 (Вертикальный)


 <!-- Изменяем внешний вид отметки на карточке -->
 <!-- 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>

Скопировать код

Код скопирован

Код #6


<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>

Код помогает поменять внешний вид бейджика для товаров в Тильда. Поможем сделать его шире, поменять цвет, переместить в другое место.

Изменяем внешний вид отметки на карточке товара

Инструкция

Другие модификации