Как сделать функциональный и симпатичный интернет-магазин на Тильде
Долгое время считалось, что сделать магазин в конструкторе сайтов невозможно. Что это будет неудобно, что не будет возможности делать анализ продаж, вести каталог товаров, что будут сложности с оплатой. Но Тильда дала ответ на все возражения. Ирина Жданова рассказала нам, как сделать интернет-магазин на Тильде и какие возможности этого конструктора помогут вам справиться с задачей самостоятельно.
Чтобы быстро выйти в онлайн, понадобится масса инструментов. В конце статьи или прямо сейчас скачайте бесплатную подборку из 116 сервисов, которые облегчат работу с текстами, изображениями, видео и аудио
Осенью 2019 года разработчики Тильды выпустили подключаемый модуль «каталог товаров». Они совместили в нём всё лучшее из вордпресcовского Woocommerce, избавившись от недостатков вроде сложного подключения оплаты.
К сожалению, полный функционал магазина доступен только в платной версии Тильды. Бесплатно вы не сможете ни подключить оплату, ни редактировать каталог. Но раз вы решили завести магазин, вероятно, найдёте 6000 рублей в год на оплату простого тарифа.
От редакции: этот материал — часть серии о создании сайтов на Тильде. Мы уже пошагово объяснили:
С чего же начать создание интернет-магазина на Тильде? Я бы поделила всю работу над сайтом на техническую часть и контентную. Сегодня в статье — часть техническая. Мы с вами пройдём пошаговый путь от создания меню и каталога до подключения платёжных сервисов.
Архитектура интернет-магазина на Тильде
Как и с любым многостраничным сайтом, продумайте его архитектуру и дизайн. Если у вас уже есть офлайн-магазин, корпоративные цвета, логотип и стикеры в Телеграме — считайте, полдела сделано. Если же всего этого нет, выберите цвета, закажите логотип, продумайте, как будет выглядеть ваш магазин.
Палитра цветов не должна быть слишком разнообразной, достаточно 3-5 основных цветов. И помните, это должны быть цвета, которые нравятся вашей ЦА или подходят вашим товарам. Не может сайт, продающий, к примеру, одежду для готов, быть в весёленьких тонах. ЦА не поймет.
В качестве логотипа можно просто написать красивым шрифтом название магазина, сделать из этого картинку и поместить на место лого. На первое время хватит, а потом придумаете.
Самая простейшая архитектура магазина выглядит так. Три страницы.
Главная страница — место, где вы рассказываете о себе и компании. Каталог товаров — что же вы, собственно, продаёте. И самое главное — контакты. Их тоже желательно сделать отдельной страницей, чтобы максимально облегчить путь клиента к вам.
Архитектуру придумали, цвета подобрали, переходим к созданию сайта.
Работа над созданием интернет-магазина на Тильде
Первым делом сделайте технические страницы: меню и подвал сайта. В Тильде это две отдельные страницы.
Шаг 1. Создайте меню интернет-магазина
Зайдите в редактор сайтов и сделайте новую страницу. Поскольку вы в платной версии и вам доступны все-все опции и блоки, выбирайте опцию «Пустая страница».
Вот как она выглядит после выбора. Сейчас вам надо нажать на кнопку «все блоки».
Для создания меню кликните на соответствующий пункт списка.
Выбирайте один из 25 вариантов, тот, который вам понравится. Рекомендую для начала взять что-нибудь попроще. Вы всегда сможете сменить его в процессе пользования сайтом.
На мой взгляд, для магазина идеально подходит блок ME203A. Его и рассмотрим.
У Тильды есть подробное руководство, как работать с меню, на русском. Но если не вдаваться в лишние подробности: вам надо настроить цвета меню и сменить контент блока в директории «Контент». На последнем пункте остановлюсь подробнее.
1.Список пунктов меню позволит дать им имена и поставить ссылки на нужные страницы. Пока никаких страниц у нас нет, так что измените название пунктов меню, а лишние удалите.
Чтобы удалить пункт меню, достаточно стереть его название и ссылку. Он удалится автоматически.
2.Логотип. Директория для прикрепления лого в виде jpg или png файла.
Повесьте ссылку на логотип. Она должна вести на главную страницу.
3.Ссылки на соцсети. Выберите, какие соцсети вы готовы показывать, и прикрепите соответствующие ссылки.
В меню это будет выглядеть вот так.
4.Кнопки. Если вы хотите прямо из меню отправлять человека на конкретную страницу — сделайте кнопку. Это бывает удобно и нужно. Как создавать кнопки, мы подробно разбирали в статье Как сделать сайт на Тильде: подробная пошаговая инструкция.
5.Дополнительно. Один из самых любимых пунктов, и из-за него я считаю именно этот блок наиболее подходящим для магазина. Тут вы можете написать всё, что захотите. Свои контакты, миссию, слоган, призыв, интересные фразы — всё! Только не увлекайтесь, меню должно оставаться лаконичным.
Вот такое лаконичное меню получилось у меня.
Чтобы закрепить меню на его законное место первого блока на каждой странице, идите в настройки сайта. Выберите пункт «шапка и подвал». Назначьте шапкой вашу новосозданную страницу. Теперь она отобразится на каждой странице интернет-магазина на Тильде.
Шаг 2. Создайте подвал интернет-магазина на Тильде
Подвал — самый нижний блок на странице. На таком маленьком сайте, как у меня в примере, делать его не обязательно, но для красоты и солидности можно.
Создайте пустую страницу, и в каталоге блоков выберите пункт «Подвал».
Мой любимый подвальный блок — FT203. В него встроена удобная кнопочка «Наверх». Но вы можете посмотреть и выбрать внешний вид блока себе по душе.
По большому счету, в подвале должны быть ваши контакты, соцсети и всё, что вы бы хотели сказать напоследок.
В хорошем дизайне подвал:
- совпадает по цвету с меню,
- контрастирует с ним,
- выглядит темнее.
Далее в настройках сайта вам нужно подключить свежесозданный подвал.
Если вы всё сделали правильно, то у вас на странице редактирования сайта появятся две новые страницы.
Они всегда будут внизу, после всех страниц контента. Редактировать их можно точно так же, как обычные страницы.
Шаг 3. Подключите каталог товаров
Без каталога магазин просто не может существовать. Чтобы подключить его в интернет-магазине на Тильде, идите в настройки сайта. Выберите в нём самый нижний пункт «Ещё».
Прокрутите страницу до конца, найдите подключаемые модули.
И нажмите на красную надпись «Подключить», возле каталога товаров.
Если вы видите такую надпись, то всё. Вот совсем всё. Ваш каталог подключен и готов к работе. Нажмите кнопку «Начать работу с каталогом» и в добрый путь.
Настройка каталога и карточек товаров на Тильде
Вы попадёте на этот экран. Тут всё просто.
Чтобы добавить новую позицию, нажмите на большую кнопку «Добавить товар» и заполните его название.
Вы окажетесь на экране редактирования карточки, здесь надо просто аккуратно заполнить все поля.
Заголовок заполняется автоматически из названия карточки.
- Описание — это то, что увидят люди, открыв страницу каталога с товарами.
- Текст — это то, что покупатели увидят, зайдя в карточку товара.
- Изображение — фото вашего товара, и их может быть несколько.
- Цена — понятно. Если вы хотите устроить распродажу, напишите ещё старую цену в соответствующую строку.
- Артикул — если у вас много товаров, и вам важно вести учёт по артикулам.
- Количество — сколько единиц товара осталось. Если ничего не написать в этот пункт, то система будет считать это как бесконечное количество товаров. А если написать туда 0, то система автоматически покажет, что товар закончился и не даст его выбирать. Только посмотреть.
Интересная фишка в каталоге — «Отметка на карточке». Позволяет сделать любую отметку на карточке товара. Например, написать «Новинка», «-30%» или «Выбор года». Можно писать всё что угодно, ограничений нет.
Когда вы всё заполните и сохраните, в каталоге появился первый товар.
Заполните остальные карточки товара, и ваш интернет-магазин на Тильде почти открыт.
Тонкости каталогизации и оптовая загрузка товаров и артикулов
Если вы новичок в магазинном деле и у вас еще нет никакой каталогизации, то увы, придётся внести все товары вручную.
Если же вы владелец офлайн-магазина и просто хотите перейти в онлайн, наверняка у вас уже есть каталог. Его не нужно делать ещё раз, можно просто закачать на Тильду файлом.
Наведите мышкой на три точки в меню каталога и увидите, какие действия можно сделать: импортировать из двух видов файлов или скачать список товаров.
В созданном таким образом каталоге можно создавать разделы, копировать или переносить товары из разных категорий.
По умолчанию у вас есть только один раздел “Всё”. Его удалить нельзя. И даже если вы будете делать товары в других разделах, они будут появляться и в этом разделе. Потому что тут лежит всё.
Вот такой каталог у меня получился.
Скрытая начинка магазина готова.
Подключение платёжной системы к интернет-магазину на Тильде
Теперь нам надо подключить платёжную систему. Для этого выйдем из каталога и перейдем на страницу редактирования сайта.
Чтобы вернуться, надо нажать на пункт «Мои Сайты» в основном меню.
Чтобы войти обратно в каталог, надо на странице редактирования сайта найти в меню пункт «Товары».
Чтобы настроить приём платежей в интернет-магазине на Тильде, надо в настройках сайта выбрать пункт «Платёжные системы». Укажите на странице, в какой валюте вы хотите получать оплату.
И выберите из перечня платёжных сервисов те, с которыми вы работаете.
Лайфхак: Если вы физическое лицо, то подключайте Яндекс.Деньги — оплата картами. Там не требуется справок из налоговой и прочих сложных документов. А если вы юридическое лицо, то вы уже сотрудничаете с какой-нибудь платежной системой и скорее всего она есть в списке.
На этой же странице, прокрутив вниз, можно подключить сервисы по доставке товаров. Пока они работают в тестовом режиме и только по России, но мы видим, как быстро развивается Тильда.
Ирина Жданова, специалист в Тильде, лоукостер сайтов, копирайтер и маркетолог.
И ещё немного полезной информации о сайтах:
* В случае упоминания в тексте социальных сетей Facebook, Instagram, уведомляем: деятельность компании Meta (Facebook, Instagram) признана экстремистской и на территории РФ запрещена.
