С 1 ЯНВАРЯ ПОВЫШЕНИЕ ЦЕН
Кастомизация отметок на карточках товаров
0005
200
₽
₽
CSS-модификация для стандартных отметок у карточек товаров в магазине Tilda. Позволяет изменить внешний вид и позиционирование отметок «sale», «хит», «новинка»: переместить отметку в любой угол карточки товара, задать квадратную, прямоугольную или нестандартную форму, настроить скругление углов.
Работает со стандартными блоками магазина Tilda ST310N, ST305N, ST315N, ST320N, ST330N и не требует изменения структуры каталога.
Работает со стандартными блоками магазина Tilda ST310N, ST305N, ST315N, ST320N, ST330N и не требует изменения структуры каталога.
SALE
Гель для умывания
With a new design approach for flexible use: from a dinner for two, to a big celebration.
4500
₽
6500
₽
ХИТ
Пенка для умывания
With a new design approach for flexible use: from a dinner for two, to a big celebration.
4500
₽
Крем для лица
With a new design approach for flexible use: from a dinner for two, to a big celebration.
2500
₽
ХИТ
Тонер для лица
With a new design approach for flexible use: from a dinner for two, to a big celebration.
5500
₽
1️⃣ ДОБАВЛЯЕМ БЛОК МАГАЗИНА
(ST310N, ST305N, ST315N, ST320N, ST330)
2️⃣ НИЖЕ ВСТАВЛЯЕМ КОД
❗️ ВАЖНО. В редакторе изменения, внесенные с помощью кода не видны, вы их увидите только на опубликованной странице.
(ST310N, ST305N, ST315N, ST320N, ST330)
- Добавляем всему блоку класс - .uc-kastom-leibl
2️⃣ НИЖЕ ВСТАВЛЯЕМ КОД
❗️ ВАЖНО. В редакторе изменения, внесенные с помощью кода не видны, вы их увидите только на опубликованной странице.
<!--Кастомизация отметок у карточек товаров
Студия веб-дизайна SHEINA – https://sheina-studio.ru/-->
<style>
/* кастомизация самой отметки */
.uc-kastom-leibl .t778__mark,
.uc-kastom-leibl .t776__mark,
.uc-kastom-leibl .t786__mark,
.uc-kastom-leibl .t-store__card__mark,
.uc-kastom-leibl .t1025__mark {
height: auto !important;
width: auto !important;
/* здесь прописываем отступы для отметки, т.е. какие отступы будут у текста от фона отметки
1 – верх, 2 - правая сторона, 3 - низ, 4 - левая сторона */
padding: 5px 26px 5px 26px !important;
/* задаем цвет фона лейбла */
background-color: #fa886e !important;
/* задаем цвет текста лейбла */
color: #ffffff !important;
/* задаем скругление у углов отметки
если они одинаковые пишем одну цифру
если нужно задать для всех углов разные скрегления
1 – верхний левый угол, 2 - правый верхний угол, 3 - нижний правый угол, 4 - левый нижний угол */
border-radius: 0px 10px 0px 10px !important;
}
/* положение отметки */
.uc-kastom-leibl .t778__markwrapper,
.uc-kastom-leibl .t776__markwrapper,
.uc-kastom-leibl .t786__markwrapper,
.uc-kastom-leibl .t-store__card__mark-wrapper,
.uc-kastom-leibl .t1025__markwrapper {
/* слева или справа
если нужно расположение справа, то пишем left и задаем отступ, а для right пишем auto, если нужно справа, то наоборот */
right: 10px !important;
left: auto !important;
/* снизу или сверху фото товара
если нужно расположение снизу, то пишем bottom и задаем отступ, а для top пишем auto, если нужно сверху, то наоборот */
top: 10px !important;
bottom: auto !important;
}
</style>