Как изменить карточку товара тильда

Чтобы начать работу с карточкой товара в интернет — магазине на Тильда, нужно на главной странице сайта выбрать иконку «Товары»

Добавить описание к товару через вкладку

На странице каталога нажмите на интересующий вас товар левой кнопкой мышки

Перелистываем до раздела «Табы» и нажимаем на стрелочку справа чтобы раскрыть пункт. В раскрывшемся пункте надо нажать на кнопку «Добавить вкладку»

Заполняем пункты 1 — выбираем из списка «Информация», 2 — здесь ваше название таба, 3 — здесь пишем необходимый текст для описания товара, который появится в карточке

Порядок «Табов» или вкладок, регулируется слева путем зажатия левой кнопки мышки и перетаскивания вкладки

Если все заполнили, то вверху нажмите на кнопку «Сохранить и закрыть». Если сейчас перейти в карточку товара на сайте, то можно увидеть внесенные изменения

Создать новую карточку товара

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

Затем нажмите на дубликат товара и внесите необходимые изменения в карточку товара. Для начала заполните следующие поля: 1 — «Заголовок» это название товара, 2 — «Описание» это текст под изображением товара в каталоге, 3 — «Текст» это текст который будет внутри карточки товара после название, вариаций или дополнительных опций

Листаем ниже, здесь 1 — загрузить новую картинку, при этом первая фотография отображается и в самом каталоге и первой внутри карточки товара, 2 — удалить текущее изображение, 3 — установить цену продажи, однако если вы продаете через дополнительные опции, то цену оставляем пустой, 4 — количество, если не заполнено то количество равно бесконечности, если 0 то нет в продаже, 5 — артикул, если у вас есть номенклатура товаров, то её номер можете написать здесь

Листаем ниже, здесь 1 — вкладка вариаций товара, например вы можете задать продажу товара с различным цветом. И тогда каждый цвет это отдельная вариация товара. Каждый вариант товара добавляет свое отдельное количество в наличии, поэтому будьте внимательны, 2 — в данном примере цена товара не указана, а итоговая сумма набирается из учета дополнительных опций, 3 — кнопка раскрытия вкладки, 4 — название первой опции, 5 — значения первой опции. Заметьте, что каждая опция начинается с новой строки. Разберем значение на примере одной строчки «40 x 60 см (А2) 9900 рублей=+9900» текст до «=+» это название опции для посетителей сайта, все что после этих двух символов это добавление стоимости «9900» к основной цене товара. Так как основная цена 0 рублей, то при выборе данной опции, товар будет стоить 9900 рублей. 6 и 7 — это название и значение второй опции, например 6 = «Ориентация» и 7 = «Альбомная»,»Книжная». Каждая опция пишется с новой строки

Листаем ниже, здесь 1 — удаление товара из текущего каталога (раздела), 2 — в каком каталоге (разделе) находится товар, 3 — кнопка выбора нового раздела, если он добавлен. По умолчанию товар добавляется в выбранный раздел, чтобы удалить старый нужно нажать на кнопку 1
4 — показывает где товар виден на данный момент, 5 — отметки о продаже со скидкой

Листаем ниже, вкладка «Характеристики» здесь 1 — раскрытие вкладки, 2,4,6 — название характеристики, 3,5,7 — выбирается значение. Кнопка «Добавить характеристику» добавляет новое пустое поле для заполнения. Например нужно добавить характеристику «Ориентация — Книжная». Тогда в качестве названия будет «Ориентация», а значение «Книжная».
Данные характеристики выполняют логику фильтрации товаров в каталоге, покупатель может выбрать фильтр товаров с альбомной ориентацией и тогда все товара которые имеют характеристику «Ориентация = альбомная» попадут в выдачу

Листаем ниже, вкладка «SEO» здесь 1 — раскрытие вкладки, 2 — заголовок товара для поисковых систем. Он состоит из основного запроса + название товара, 3 — описание товара для поисковых систем. Состоит из запроса + название товара + дополнительного запроса. 4,5 — несут те же функции, но только для социальных сетей и иногда мессенджеров.

На этом заполнение данных нового товара заканчивается, чтобы сохранить изменения, нажмите вверху кнопку «Сохранить и закрыть». Теперь в каталоге вы увидите новый товар с ваши введенными данными

Изменить порядок товаров в каталоге

Чтобы изменить порядок товаров в каталоге, вам необходимо перейти в «Товары» как делали выше и затем перейти в нужный вам каталог (порядок меняется только внутри конкретного раздела а не «Все»). На изображении ниже мы перешли в каталог «Картины для интерьера». И видим что товар «Снежный заряд» находится на четвертом месте

Слева от товара находится иконка «шесть точек». Наведите курсор и зажмите данную иконку и перетащите товар на первое место в каталоге

После внесения изменений товар окажется на первом месте, чтобы изменения применились, зайдите в любой товар и нажмите кнопку «Сохранить и закрыть» через некоторое время каталог на сайте обновится и для посетителя он станет первым в выдаче.

<style>
/*Стиль для иконки*/
   .hovercolor{
   transition: .3s linear;    
   } 
   .activecolor{
    box-shadow: 0px 0px 0px 5px #ffffff !important;
}
   .hovercolor:hover{
    box-shadow: 0px 0px 2px 4px #b1b1b1;   
   }
</style>

<script>
$( document ).ready(function() {
//Примваиваем классы нашим элементам  
$('[href = "#coloricon"]').addClass('hovercolor');
$('.hovercolor:eq(0)').addClass('activecolor');
$('[href = "#colortext"]').addClass('colortext');
$('[href = "#prodimg"]').addClass('prodimg');
$('[href = "#kankenclassicbutton"]').addClass('classicbutton');
//Задаём нужную ссылку
$('.classicbutton').attr('href' , '#order:Kanken Classic (Pink) = 3900:::image=https://static.tildacdn.com/tild3961-6237-4864-a232-386535633032/bag1.jpg');
$('.prodimg').not('.prodimg:first').hide();
//Функция скрытия изображения и деактивации иконок 
function activecolor(){ 
    $('.hovercolor').removeClass('activecolor');
    $('.prodimg').fadeOut();
};

var number = 0;
//При клике на цвет
$( ".hovercolor" ).click(function() {
   //Вычисляем номер нашего цвета        
   number = $(".hovercolor").index(this);
   activecolor();   $(this).addClass('activecolor');
   $('.prodimg:eq('+number+')').fadeIn();
   if (number==0){
   $('.colortext').text('Pink').css('color' , '#E5AAAC');
   $('.classicbutton').attr('href' , '#order:Kanken Classic (Pink) = 3900:::image=https://static.tildacdn.com/tild3961-6237-4864-a232-386535633032/bag1.jpg');
};
   if (number==1){
   $('.colortext').text('Graphite').css('color' , '#555D68');
   $('.classicbutton').attr('href' , '#order:Kanken Classic (Graphite) = 3900  :::image=https://static.tildacdn.com/tild3961-3538-4637-b366-313935386137/bag2.jpg');
};
   if (number==2){
   $('.colortext').text('Warm Yellow').css('color' , '#E7C01A');
   $('.classicbutton').attr('href' , '#order:Kanken Classic (Warm Yellow) = 3900  :::image=https://static.tildacdn.com/tild3733-3238-4634-b939-386438396634/bag3.jpg');
};
   if (number==3){
   $('.colortext').text('Brick').css('color' , '#9F583A');
   $('.classicbutton').attr('href' , '#order:Kanken Classic (Brick) = 3900  :::image=https://static.tildacdn.com/tild3434-3563-4966-a432-666564646336/6.jpg');
};
return false;});

});    
</script>

Интернет-магазин корейской косметики на Tilda с использованием нестандартных элементов. Сказать прямо — от стандартных решений Tilda практически ничего не осталось.

Мы реализовали: интеграцию виджетов для получения, учета и отображения отзывов, возможность делиться товарами в мессенджерах, множество кастомных блоков, а также интеграцию с интернет-эквайрингом, Мой Склад, СДЭК и Boxberry.

PS для удобства разработчиков Тильды, мы прикрепили все ссылки на кастомизации, где можно взять код. Это наша благодарность командам, которые разрабатывают кастомизации и делятся ими open source.

Подробнее о кастомизациях

Сайт сделан преимущественно в Zero Block и с помощью кода: это готовые кастомизации или же самостоятельно написанные правки через СSS или JS .

Вместо послесловия

Удалось ли нам сделать удобный и функциональный сайт?

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

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

Долгое время считалось, что сделать магазин в конструкторе сайтов невозможно. Что это будет неудобно, что не будет возможности делать анализ продаж, вести каталог товаров, что будут сложности с оплатой. Но Тильда дала ответ на все возражения. Ирина Жданова рассказала нам, как сделать интернет-магазин на Тильде и какие возможности этого конструктора помогут вам справиться с задачей самостоятельно.

Чтобы быстро выйти в онлайн, понадобится масса инструментов. В конце статьи или прямо сейчас скачайте бесплатную подборку из 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) признана экстремистской и на территории РФ запрещена.