•  
    •  
ЗАПОЛНИТЬ БРИФ
модификация

Дополнительные кнопки в карточках товара на Тильде

Как добавить дополнительных 2 или 3 кнопки в карточках товара в Тильде

Как это сделано?

1. Нажимаем «НАСТРОЙКИ САЙТА»
2. В самом низу нажимаем «ЕЩЁ»
3. Находим пункт «ПОЛЬЗОВАТЕЛЬСКИЕ CSS-СТИЛИ»
4. Проваливаемся туда и вставляем наш код HTML и сохраняем, всё готово!

ВАЖНО!
В карточке товара в описании все ссылки будут выглядеть как кнопки, имейте ввиду. И ещё, код работает только с каталогом товаров.
Скопировать
Скопированно

.js-store-prod-text a {
    display: inline-block;
    padding: 10px 15px;
    margin-right: 15px;
    margin-top: 20px;
    border-radius: 3px;
    font-weight: 600;
}
.js-store-prod-text a:first-of-type {
    background-color: #bc574b;
    color: #ffffff !important;
}
.js-store-prod-text a:last-of-type {
    background-color: #566d90;
    color: #ffffff !important;
}
 
.t706__cartwin_showed {
    z-index: 999999999;
}
Скопировать
Скопированно

.js-store-prod-text a {
  display: inline-block;
  padding: 10px 15px;
  margin-right: 15px;
  margin-top: 20px;
  border-radius: 5px;
  font-weight: 500;
}

.js-store-prod-text a {
  background-color: #FFD600;
  color: #000 !important;
}

.js-store-prod-text a:last-of-type {
  background-color: #8EAF0C;
  color: #000 !important;
}

.t706__cartwin_showed {
  z-index:9999999;
}
Скопировать
Скопированно

/*общие настройки у кнопок*/
.js-store-prod-text a {
  display: inline-block;
  padding: 10px 15px; /*настраиваем отступы, первое число вертикальные, второе горизонтальные*/
  margin-right: 15px; /*отступ от второй до третьей кнопки, если третьей нет, то не работает*/
  margin-top: 20px; /*отступ от текста*/
  border-radius: 5px; /*скругление углов*/
  font-weight: 500; /*толщина шрифта*/
  font-size: 14px; /*размер шрифта*/
}

/*настройки цвета и фона первой кнопки*/
.js-store-prod-text a:first-of-type {
    background-color: #bc574b;
    color: #ffffff !important;
}

/*настройки цвета и фона второй кнопки*/
.js-store-prod-text a:nth-of-type(2) {
    background-color: #70E852;
    color: #ffffff !important;
}

/*настройки цвета и фона последней кнопки*/
.js-store-prod-text a:last-of-type {
  background-color: #748700;
  color: #000 !important;
  border-color: #000;
}

.t706__cartwin_showed {
  z-index:9999999;
}
Скопировать
Скопированно

/*код для второй кнопки в карточку для табов*/
.t-store__tabs__content a {
    display: inline-block;
    padding: 10px 15px;
    margin-right: 15px;
    margin-top: 20px;
    border-radius: 3px;
    font-weight: 600;
}
.t-store__tabs__content a:first-of-type {
    background-color: #bc574b;
    color: #ffffff !important;
}
.t-store__tabs__content a:last-of-type {
    background-color: #566d90;
    color: #ffffff !important;
}
 
.t706__cartwin_showed {
    z-index: 999999999;
}

Что-то не получается?

Спросите у меня в чате ниже, я с удовольствием вам помогу!
Made on
Tilda