Создание: 23.12.2021
Обновлено: 06.10.2023
Автор:
Кирилл Сатулин
Просмотров:
10 648
Время прочтения:
7 мин.

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

О чем видео

  1. Как легко можно добавить дополнительные кнопки в карточке товара в Тильде, даже если они в табах
  2. С помощью одного кода с css стилями, который добавляется на сайт один раз, можно добавить 2 кнопки со своими цветами и отступами
  3. Используем модификацию
  4. Внедрение за 10 минут
  5. Ссылки ведут, куда угодно
  6. Главное, вы можете настроить карточку товара, как вам угодно, добавить необходимое кол-во кнопок, не ограничиваясь платформой 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;
}

Куда вписываем код

Сервис Тильды с кодом цветов - https://tilda.cc/ru/colors/
Сервис Мо Ти здесь

Комментарии к статье

Возможно YouTube скоро работать не будет
У меня есть канал в Rutube. Переходите и подписывайтесь на него. Там я аналогично выкладываю все видео. Давайте не теряться ;) Мой канал Рутуб
Тематики
Рекомендуемые статьи
Последние видео с канала

Подпишитесь на новинки

Материалы, которые не публикуются больше нигде, кроме телеги!
Made on
Tilda