Уникальные модификации для Тильда сайтов, которые расширяют функционал вашего сайта и выделяют вас среди конкурентов!

Tilda PublishingПодписка

Свои карточки товаров в zero block tilda + всплывающее окно Popup

Вступление

Конструктор сайтов Tilda — это мощный инструмент, который позволяет создавать качественные интернет-магазины и лендинги без необходимости писать код. В Tilda уже есть стандартные карточки товаров, но для того, чтобы выделиться среди конкурентов, можно создать свои уникальные карточки с помощью Zero Block Tilda. В этой статье мы рассмотрим, как сделать свои карточки товаров в Zero Block Tilda и добавить их во всплывающее окно popup. Сначала мы рассмотрим процесс создания карточек товаров, а затем перейдем к добавлению их в popup.

Как создать свои карточки товаров в zero block

Как создать свои карточки товаров в zero block

Процесс создания карточки товара в zero block простой, но в большинстве зависит от ваших конкретных предпочтений. В этой статье мы приведем небольшой пример того, как можно оформить и настроить карточку товара. Затем, мы поместим её во всплывающее окно и будем вызывать кликом на кнопку:

  1. Создайте zero block.
  2. Удалите стандартное наполнение блока.
  3. Нажмите на кнопку «+» и выберите «Add Image».
  4. Загрузите в zero block изображение вашего товара.

Мы создали зеро блок с изображением товара и кнопкой, которая будет открывать всплывающее окно с более подробной информацией о товаре.

  1. Создайте еще один zero block.  
  2. Удалите стандартное наполнение блока.
  3. Нажмите на кнопку «+» и выберите «Add Button».
  4. В настройках кнопки измените текст внутри кнопки по желанию, например: Подробнее.
  5. Во вкладке «LINK» в поле «URL» введите «#popupzero».
  6. Сохраните изменения и выйдите из зеро блока.
  7. Нажмите на кнопку «+» и выберите «Add Image».
  8. Загрузите в zero block одно или несколько изображений вашего товара.
  9. Добавьте название вашего товара, дайте ему описание и укажите цену.
  10. Нажмите на кнопку «+» и выберите «Add Button».
  11. В настройках кнопки измените текст внутри кнопки по желанию, например: Купить.
  12. Во вкладке «LINK» в поле «URL» введите «#order:название вашего товара =700».
  13. Сохраните изменения и выйдите из зеро блока.

Как поместить свои карточки товаров в zero block в Popup

И так, в предыдущей главе мы создали с нуля простую карточку товара в zero block для интернет-магазина на Tilda. Теперь рассмотрим простой способ поместить эту карточку товара во всплывающее окно или Popup.

  1. Нажмите на кнопку «+» или «Все блоки».
  2. Пропишите в поиске «BF503» и добавьте popup блок.
  3. Нажмите на кнопку «Контент» в блок «BF503».
  4. В поле «Ссылка на popup» пропишите «#popupzero».
  5. Удалите изображение, заголовок, описание и уберите все галочки с социальных сетей.
  6. Зайдите в настройки этого блока и измените ширину на 100%.
  7. Нажмите на кнопку «+» или «Все блоки» и добавьте блок «Т123».
  8. Нажмите на кнопку «Контент» в блоке «Т123» и вставьте туда следующий код:

Код доступен только тем, кто зарегистрировался и оплатил подписку
Подписка стоит 400 руб./мес. или 1500 руб. в год
Покупая подписку, ты получаешь:

– доступ ко всем уникальным модификациям
– отключение всей рекламы на сайте
– неограниченный размер загружаемых файлов в LF Cloud

Оформить подписку
  1. Нажмите на кнопку «Настройки» в зеро блоке с карточкой товара и скопируйте его ID.
  2. Вернитесь в «Контент» блока «Т123» и вставьте скопированный ID в строку, которая начинается с «var ZeroPopID».
  3. Точно также скопируйте ID блока «BF503» и вставьте в строку, которая начинается с «var PopWindID».

Если вы следовали нашей инструкции и сделали все правильно, то, после публикации страницы вы увидите изображение вашего товара с кнопкой «подробнее». При нажатии на эту кнопку откроется всплывающее окно, которое будет содержать карточку товара с подробным описанием и кнопкой купить. Все, что вам останется сделать – добавить стандартную корзину. Для этого:

  1. Нажмите на кнопку «+» или «Все блоки».
  2. Пропишите в поиске «ST100» и добавьте блок «Корзина с формой заказа»
  3. Нажмите на кнопку «Настройки» в блоке «ST100» и уберите голочку с пункта «Открывать корзину после выбора товара».
  4. Сохраните изменения и опубликуйте страницу.

Итак, мы с вами создали свою карточку товара во всплывающем окне и привязали её к корзине!

Заключение

В заключение можно сказать, что создание своих уникальных карточек товаров в Zero Block Tilda не только позволит выделиться среди конкурентов, но и поможет улучшить пользовательский опыт в интернет-магазине. Также добавление всплывающих окон pop up может увеличить конверсию и помочь привлечь внимание посетителей к определенному продукту или акции. Tilda предоставляет множество инструментов для создания качественных сайтов и лендингов, а создание своих уникальных карточек и использование pop up — это дополнительный инструмент, который поможет сделать ваш интернет-магазин более привлекательным для клиентов. Надеемся, что эта статья была полезной и поможет вам в создании качественного интернет-магазина.

Читайте еще: Как сделать свою иконку для корзины в меню на Tilda

Видео урок по этой теме тут

Добавить комментарий