Узнать стоимость проекта

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

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

Заказать код
Вступить в чат
Поблагодарить
Видео-урок
#1
#2
#3
#4
#5
#6
#7
#8

Инструкция

1

Разместите блок ST300 на странице и добавьте например "Новинка" бейдж

2

Выберите нужный для вас вариант из списка выше с номерами.

3

Вставьте код на страницу или в подвал сайта в блок "Другое" - Т123

4

Замените стили на .t776 для (ST305N),

.t778 для (ST310N), .t786 для (ST315N)

5

Если не получается: Замените стили на t-store__card__mark и t-store__card__mark-wrapper соответственно

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

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