Как создать интернет-магазин на платформе Тинькофф

Привет! Меня зовут Алена, и я расскажу, как делать сайты на платформе Тинькофф. Такой сайт подойдет для любого бизнеса. Допустим, я делаю мебель ручной работы и хочу эту мебель продавать в интернете. Мне нужен сайт, который не требует много времени и денег: я ведь начинающий предприниматель. Чтобы все было аккуратно, красиво и доступно. Чтобы клиенты могли легко покупать и все по закону. Здесь это возможно. Мы разберем четыре ситуации на конструкторе сайтов Тинькофф: как создать свой сайт, как оформить страницу с корзиной, когда эквайринг подключен, что делать, когда его нет, — расскажу, куда обратиться, и как оформить платежную страницу. Поехали! Первым делом вхожу в личный кабинет. Сервис «Конструктор сайтов» находится в верхнем левом меню. Перехожу в него. При открытии страницы появляется пустое поле. Нам вот сюда. Поскольку я создаю сайт впервые, конструктор сразу направляет меня в первое окно — для выбора шаблона первой страницы будущего сайта. Позже все созданные страницы будут отображаться в карточке с названием сайта. Сначала шаблон будет назван «Мой первый сайт». Само название можно будет сменить в любой момент через настройки. А еще — отредактировать или добавить нужную страницу. Так что ничего, если я что-то забуду. Итак, переименую сайт по названию своего магазина — Woodstore. ru. Кстати, всего на конструкторе можно создать до 10 сайтов, а вот самих страниц может быть неограниченное количество. Окей, выбираю шаблон для сайта. Тут вообще все зависит от потребностей: хочу зарегистрировать свою кофейню в интернете — вот шаблон под это дело, хочу салон красоты — пожалуйста, вот и он. А если захочу продавать свои онлайн-курсы — выбираю соответствующий шаблон и заполняю его. Но поскольку я хочу создать сайт для продажи мебели ручной работы — воспользуюсь пустым шаблоном и заполню его сама. Выбор настроек в конструкторе огромный: от меню страницы до поля для отзывов и реквизитов. Мне нравится вот этот блок. Выбираю его и начинаю редактировать строку меню. Что классно: если я передумаю и захочу в процессе поменять дизайн меню, обложки сайта или еще чего угодно — мне не нужно возвращаться к выбору шаблона. Могу нажать вот сюда — на замену блока — и посмотреть разные варианты оформления, доступные в библиотеке. Теперь загружаю свой логотип — Woodstore. ru. Меняю названия кнопок. Например, вот тут вместо «Услуги и цены» у меня будет «Каталог», а вот тут я добавлю кнопку «Доставка и оплата» — чтобы клиент сразу мог найти условия транспортировки. К кнопкам нужно будет добавить ссылки на страницы, но так как я их пока еще не создала, вернусь к этому шагу позже. Кстати, могу поменять фон меню — загрузить свой файл, выбрать из библиотеки доступных изображений или просто оттенить. А еще — отредактировать цвет кнопок. Например, сделаем вот так. Что здесь еще важно. Я вот хочу использовать это меню повторно при создании другой страницы позже: ну а что, оно меня устраивает. Тогда я могу отметить его флажком, оно сохранится в библиотеке блоков, и в следующий раз оттуда я его и возьму. Так же можно поступать и с другими блоками: обложками, страницами с товарами и даже контактами. Главное — помнить, что при изменении этого блока он меняется везде, где был добавлен в скелете этого сайта. Кстати, дизайн сайта адаптивный — я могу переключиться и посмотреть, как он будет отображаться на разных устройствах: с телефона, планшета и ноутбука. Красота! Окей, как только с «Меню страницы» закончили, нужно добавить обложку, которая будет следовать после. Выбираю эту и начинаю редактировать ее под свои хотелки. Во-первых, меняю фон. Тут все точно так же: могу выбрать какой-нибудь однотонный или градиентный цвет — или вообще воспользоваться бесплатной библиотекой фонов конструктора. Но поскольку у меня есть своя фотография, загружу ее. Во-вторых, меняю название: напишу тут «Мебель ручной работы». Не забываю про описание — коротко указать то, что считаю важным. Например, что свою мебель произвожу в Москве. И в-третьих, настраиваю интерфейс: могу убрать «прозрачную кнопку» или описание, если оно мне не нужно. Но я, наоборот, хочу их оставить, поэтому перехожу к редактуре кнопок, через которые мы ждем коммуникации с клиентом. Так как на этой странице я ничего не продаю — она является обложкой моего сайта, — хочу дать возможность покупателям либо сразу перейти в каталог товаров, либо оставить заявку на обратный звонок. В случае с каталогом мне нужно добавить к этой кнопке ссылку, по которой будет открываться страница с товарами, или указать, какую уже созданную страницу открывать. А в случае с заявкой на обратный звонок — добавить ссылку на страницу с заполняемой формой. Разберем по порядку. Алгоритм создания этих двух страниц очень похож: жмем на плюс, выбираем подходящий блок — в нашем случае «Список товаров». И начинаем регулировать: количество позиций, добавляем фотографии

цену, краткое описание. Теперь возвращаемся к настройкам кнопки «Каталог» в меню и выбираем нужную нам страницу. А в настройках обложки нажимаем кнопку для скролла к каталогу. Готово! Если мы опубликуем главную страницу, то сможем увидеть, как ведет себя сайт при нажатии на каталог. Обязательно нужно добавить отдельные страницы под каждый товар, но я вернусь к этому шагу позже. Теперь проделываем практически все то же самое со страницей заявки на обратный звонок, но с одним условием. В отличие от каталога, форма для заполнения будет открываться у меня в новом окне, а это значит, я должна создать эту страницу отдельно. Возвращаемся через кнопку «Назад» в скелет нашего сайта, жмем на «Добавить страницу», «Формы» — и выбираем дизайн. Пусть будет такой. Нужно решить, какую информацию мы хотим получить от клиента через эту страницу: можем добавить или уменьшить количество заполняемых покупателем полей, изменить тип, название, убрать или вернуть обратно описание формы и отредактировать цветовое оформление. Хорошо, с этим разобрались. Публикую страницу и возвращаюсь в скелет. Чтобы ее было легче определять, сразу переименую. Через «Настройки страницы» меняю в поле название вкладки с энной страницы на «Заявка на обратный звонок». Все автоматически сохраняется, а я возвращаюсь на главную, чтобы добавить переход от кнопки «Заказать обратный звонок» к нашей форме. Ставлю галочку, чтобы страница открывалась в новом окне, — и вуаля! Движемся дальше. Кстати, что будет после того, как клиент оставит заявку? Она упадет в папку «Заявки с конструктора» в разделе «Проекты». Там можно будет найти всю информацию, оставленную клиентом, а также добавить заметку, отредактировать описание или вовсе изменить статус. Что тут еще важно: видите вот здесь стандартное соглашение на обработку персональных данных? Нужно не забыть вернуться к редактуре страницы заявки после того, как создадим свою политику конфиденциальности, чтобы добавить на нее ссылку. Сделаю это сразу. Добавляю новую страницу, но теперь вместо «Пустого шаблона» выбираю «Политику конфиденциальности». Многого здесь менять не придется: вписываю название своего магазина, публикую и копирую ссылку. В скелете сайта меняю название этой страницы на «Политика конфиденциальности» и возвращаюсь к странице с формой, чтобы прикрепить сюда ссылку. Снова публикую, чтобы все изменения точно сохранились. Окей, теперь перехожу к добавлению персональных страниц для товаров. Жмем на «Добавить страницу», как уже делали, попадаем в меню «Выбор блока» и переходим в раздел «Товары и услуги». Выбираю шаблон страницы, который мне нравится, и начинаю подгонять его под себя. Во-первых, обязательно загружаю свою фотографию товара. Редактирую название, через кнопку «Изменение структуры» добавляю или убираю описание, старую цену и вбиваю текущую. Еще при желании можно добавить ярлычок распродажи, но я его пока ставить не буду: до новых праздничных распродаж еще полно времени, а к старым присоединяться поздно. Во-вторых, меняю название кнопки «Оставить заявку» на «Купить». О том, как настроить корзину, поговорим позже, а пока — так же создаю страницы для остальных товаров. Публикую их и добавляю ссылки на эти страницы в каталог. Отмечаю галочкой открытие этих страниц в новых вкладках. Снова публикую главную, чтобы все точно сохранилось, и теперь могу проверить, что все работает. Остается совсем немного: настроить страницу с контактами, условиями доставки и оплаты для кнопок в меню, настроить футер, или, иначе говоря, подвал страницы, и добавить на главную ссылки на политику конфиденциальности и оферту. Делаем все аналогично: создаю отдельную страницу, выбираю «Пустой шаблон», «Контакты» и понравившееся оформление. Дальше заполняю время работы, телефоны для связи, указываю адрес и отмечаю точку на карте. При желании могу описание, заголовок или название вообще отключить, сняв ярлычок через кнопку «Изменить структуру», но я в этом не вижу особого смысла, поэтому оставляю все так и публикую страницу. Теперь возвращаюсь в скелет сайта, меняю название страницы на «Контакты» и иду на главную, чтобы добавить только что опубликованную страницу к соответствующей кнопке. Снова публикую главную страницу и вижу, что все работает. Точно так же поступаю и со страницей «Доставка и оплата». Ввожу все данные, которые считаю нужным здесь отразить, публикую и добавляю ссылку к кнопке на главной странице. Вообще, после последней публикации страницы лучше еще раз самостоятельно проверить, все ли работает как надо и к каждой ли кнопке есть своя гиперссылка. Прямо взять, не лениться и пройтись по всему функционалу и интерфейсу сайта. Если какие-то изменения не внесутся — исправить сразу будет легче и приятнее, чем потом обнаружить какую-то ошибку.

Вдруг я страницу не переименовала и она во вкладке отображается по номеру создания, а не по имени, или ссылку забыла куда-то добавить. В общем, перепроверить себя точно лишним не будет. Окей, что еще тут осталось сделать? Добавить футер, или подвал страницы, и ссылки на политику конфиденциальности и оферту. Начнем с подвала. В шаблонах к разным блокам есть отличные варианты оформления. Жмем на плюс после каталога с мебелью, поскольку подвал мы делаем для главной страницы сайта, и выбираем понравившийся дизайн. Вот тут добавлю название, ниже — слоган. Например, «Создаем уют по-шведски». По-моему, звучит неплохо. Здесь могу прикрепить ссылки на имеющиеся аккаунты магазина в основных соцсетях и мессенджерах или вообще их убрать. Поскольку для политики конфиденциальности и оферты тут места нет, но их лучше всего помещать в футере, добавлю ниже еще один блок для двух пунктов. Например, возьму этот, уберу у него заголовок и оставлю так. Ссылку на политику конфиденциальности добавлю сразу, ведь она у меня уже готова. А что касается оферты — пока что на конструкторе шаблона для нее нет, но добавить ее все равно можно. У каждого ИП она есть — своя, родная, поэтому достаточно так же добавить гиперссылку и опубликовать страницу, чтобы все изменения сохранились. Что еще тут нужно учесть: при публикации сайта можно поменять домен — бесплатно привязать свой или использовать домен на tb. ru. Вообще, вот тут, в хелпах к конструктору, объяснено все просто, подробно и максимально понятно, заглядывайте сюда. И в целом сайт готов. Для полного порядка ему не хватает реквизитов, чтобы покупатели видели, что мой магазин и правда существует. Но об этом мы поговорим дальше. Можно, конечно, добавить еще товаров, страниц с описанием, отзывами, подробной информацией, но пока что мне будет достаточно того, что мы собрали сейчас. В следующем ролике разберем, как же все-таки запустить сайт для продажи товаров через интернет.