Модуль 6. Интернет-магазин на Tilda

интернет-магазин на tilda: возможности и ограничения.

Подборка удобных и эстетичных интернет-магазинов на Tilda:

настройка разделов каталога:
Чем сложнее сайт и чем больше в нем категорий и подкатегорий товаров, тем больше будет разделов. Вот, например, как выглядят разделы в таком крупном интернет-магазине как https://siyay.com
добавление и настройка товаров:

Шаблон google-таблицы для заполнения информации о товарах клиентом:

добавление, обновление и экспорт товаров в формате csv:

Инструкция по импорту товаров от Tilda:

 Инструкция по импорту товаров от Tilda — https://help-ru.tilda.cc/onlin...

Пример google-таблицы для импорта товаров:

оформление карточки товара:
оформление главной страницы интернет-магазина:
оформление внутренних страниц:
оформление и оплата заказа:
Кастомизация корзины: https://tildoshnaya.com/modifi...

Создание сложных вариантов доставок

Недавно у Тильды появилась возможность внедрять сложные варианты доставок. Это такие способы:
  • Создание своего варианта с доставкой по адресу
  • Создание своего варинта с пунктами выдачи
  • Доставка с использованием сервиса CDEK
  • Доставка с использованием Почты России
  • Доставка с использованием сервиса Boxberry
  • Доставка с сипользованием Новой Почты
Инструкция по настройке каждого из способов доставки — https://help-ru.tilda.cc/onlin...
настройка шапки и футера интернет-магазина:

Код для мега-меню (лучше копировать отсюда, не с презентации):

<style>
.t228__list_item {
height: 60px; /*должна быть таким же как высота меню МЕ301, в котором вкладки*/
display: inline-block !important;
padding: 0 15px !important;
}
.t228 .t-menu__link-item {
height: inherit;
display: table-cell !important;
vertical-align: middle;
}
.t228__list_item:hover {
background:#f2f2f2; /*поставить в цвет выпадающего меню*/
-webkit-transition: all 0.35s;
transition: all 0.35s;
}
[data-record-type="344"] {
position: fixed;
width: 100%;
top: 140px; /*расстояние от верха экрана до меню*/
z-index: 990;
left: 0;
opacity: 0;
-webkit-transition: all 0.35s;
transition: all 0.35s;
visibility: hidden;
}
.t228__list_item:hover .mainmenu {
display:block !important;
opacity: 1;
visibility: visible;
}
</style>
<script>
$(document).ready(function(){
$('[data-record-type="344"]').addClass('mainmenu');
for(let i = 0; i < $(".mainmenu").length; i++){
/*#rec ниже поменять на ID блока с главным меню, в котором ссылки на вкладки*/
$('.mainmenu:eq('+i+')').appendTo('#rec123321441 .t228__list_item:eq('+i+')');
};
});
</script>

Бонусный файл: Основные ошибки при создании интернет-магазина.

Бонусный файл: Идеи оформления различных блоков интернет-магазина.

Конспект модуля:

задание

Разработать интернет-магазин на Tilda.

Постарайтесь сделать сайт максимально аккуратным и в минималистичном стиле. Не экспериментируйте со шрифтами и цветами, если у вас пока нет опыта в разработке сайтов. Приложите максимум усилий, чтобы кейс получился достойным вашего портфолио, и его можно было презентовать потенциальным клиентам.