Как добавить вторую кнопку в карточку товара Тильда

Еще больше интересных материалов в телеграм-канале

Перейти

О чем видео

Как легко можно добавить дополнительные кнопки в карточке товара в Тильде, даже если они в табах
С помощью одного кода с css стилями, который добавляется на сайт один раз, можно добавить 2 кнопки со своими цветами и отступами
Используем модификацию
Внедрение за 10 минут
Ссылки ведут, куда угодно
Главное, вы можете настроить карточку товара, как вам угодно, добавить необходимое кол-во кнопок, не ограничиваясь платформой Tilda

Видео: Как добавить дополнительные кнопки в карточки товара на Тильде

Основное видео, подходит для 80% случаев

Дополнение к первому видео, если что то не работает

Все решения, для всех блоков карточек товаров, на этой странице

2 КНОПКИ. Код для вставки в scc в настройках сайта Тильды


.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;
}

3 КНОПКИ


.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;
}

3 КНОПКИ РАЗНОГО ЦВЕТА


/*общие настройки у кнопок*/
.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;
}