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

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

Главная
/
Модификации
/
Изменяем внешний вид отметки (бейдж)

Заказать код

Вступить в чат

Поблагодарить

Видео-урок

#1

#2

#3

#4

#5

#6

#7

#8

Инструкция

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

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

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

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

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

Если не получается: Замените стили на 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>

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

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

Инструкция

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