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

Вступление

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

Как создать свои карточки товаров в 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» и вставьте туда следующий код:

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

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

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

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

Заключение

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

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

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