Карточка товара тильда отдельная страница

Структура и обязательные элементы карточки товара на Tilda

Каждая отдельная страница товара в Tilda состоит из набора элементов, и их правильное расположение определяет, купит ли человек товар или уйдёт к конкурентам. Структура карточки товара — это не дизайнерское украшение, это архитектура решения.

Как устроена карточка товара

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

В Tilda вы собираете страницу товара из отдельных блоков — как из конструктора. Каждый блок в Tilda выполняет одну функцию. Блоки магазина на Tilda уже готовы к использованию, не требуют кода и подстраиваются под мобильные устройства автоматически.

Галерея изображений в Zero Block

Первое, что видит покупатель на странице товара, — это изображения. В Tilda для размещения фотографий используется Zero Block. Галерея в zero позволяет загружать несколько снимков товара и добавлять эффекты увеличения при наведении.

Качество фотографий товара напрямую влияет на продажи. Профессиональные магазины на Tilda добавляют минимум 5-7 фотографий: передний вид, боковые ракурсы, детали, товар в контексте (на модели или в интерьере). Когда галерея в zero несёт достаточно визуальной информации, покупатель не уходит со страницы товара сразу. Магазины, которые используют только 1-2 фото, теряют до 40% потенциальных покупателей.

Название, цена и основная информация о товаре

Сразу после изображений должны идти название товара, его цена и рейтинг (если товар уже продавался). Эта информация видна без прокрутки — так называемая «above the fold» зона, где пользователь принимает первоначальное решение.

Название товара пишется ясно и конкретно. Не просто «платье», а «Платье трикотажное миди с длинным рукавом, чёрное». Цена указывается крупно, рядом можно добавить старую цену (если есть скидка) и количество отзывов с рейтингом звёзд.

Описание товара и характеристики

После визуального знакомства идёт текст. Описание товара раскрывает детали: из какого материала он сделан, как его использовать, кому подходит, есть ли особенности ухода.

Описание товара структурируется по разделам: — Что это (краткое определение товара за одно-два предложения). — Преимущества (почему стоит купить именно этот товар). — Материалы и состав. — Размеры и как выбрать нужный размер. — Рекомендации по уходу.

В настройках блока Tilda вы задаёте размер шрифта, цвет текста и его выравнивание. Если описание товара занимает много места, рекомендуется разбить его на подразделы с заголовками H3 или H4.

Варианты товара: размер, цвет, материал

Большинство товаров существуют в нескольких вариантах. В интернет-магазине варианты товара — это размеры (XS, S, M, L, XL), цвета (чёрный, белый, красный) или материалы (кожа, замша, синтетика). В Tilda для этого используется специальный блок «Варианты товара».

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

Без этого функционала многие товары просто не продаются. Магазин одежды без выбора размера — это магазин, где 80% визитов заканчиваются уходом. То же с цветом и другими параметрами товара.

Цена и кнопка добавления в корзину

Кнопка добавления в корзину — самый важный элемент страницы товара после изображений. На эту кнопку нажимают, когда решение о покупке уже принято. Поэтому кнопка должна быть: — видна без прокрутки (в верхней половине страницы); — контрастной по цвету; — крупной по размеру; — с ясным текстом кнопки («Добавить в корзину», «Заказать», «Buy now»).

Размер кнопки влияет на количество кликов. Большие кнопки конвертируют в 2-3 раза лучше, чем маленькие. Цвет кнопки должен выделяться на фоне страницы товара. На белом фоне лучше работают красные, зелёные, оранжевые кнопки. Серые кнопки среднего размера — это худший выбор.

Информация о доставке и возврате

Перед тем как нажать на кнопку, покупатель хочет узнать: как доставляется товар, сколько это стоит, сколько времени займёт, можно ли вернуть товар? Эта информация размещается ниже кнопки добавления в корзину.

Используйте текстовые блоки или раскрывающиеся аккордеоны для этой информации. Стандартная информация о доставке включает: сроки доставки, стоимость, условия бесплатной доставки, политику возврата, сроки обработки заказа. Когда эта информация присутствует явно на странице товара, количество покупок возрастает на 10-15%.

Отзывы и рейтинги товара

Если товар уже куплен кем-то другим, покупатели хотят прочитать отзывы. В Tilda на странице товара можно добавить рейтинг в виде звёзд и отзывы пользователей с текстом и фотографиями.

Отзывы создают социальное доказательство. Видя, что 50 человек купили товар и оценили его на 4.5 звезды, новый покупатель чувствует себя увереннее. Магазины без отзывов продают меньше — это подтверждено множеством исследований в интернет-магазинах на различных платформах, включая Tilda.

Форма обратной связи и часто задаваемые вопросы

Иногда покупатель хочет задать вопрос о товаре перед покупкой. Форма обратной связи позволяет ему написать свой вопрос прямо на странице товара. После отправки сообщение приходит вам на почту, и вы можете ответить потенциальному клиенту.

Опытные магазины отвечают на вопросы быстро — это увеличивает количество заказов на 15-20%. В дополнение к форме можно создать раздел «Вопросы и ответы», где вы заранее даёте ответы на популярные вопросы про товар.

Стандартная последовательность элементов

Успешные интернет-магазины на Tilda используют проверенный порядок элементов на странице товара:

1. Галерея изображений в zero (5-7 фото товара).
2. Название товара, цена, рейтинг.
3. Краткое описание товара (1-2 предложения о главном преимуществе).
4. Варианты товара (размер, цвет, материал).
5. Большая кнопка «Добавить в корзину».
6. Развёрнутое описание товара по разделам.
7. Таблица характеристик товара.
8. Информация о доставке и возврате товара.
9. Блок с отзывами и рейтингом товара.
10. Форма обратной связи для вопросов.

Эта структура соответствует естественному процессу принятия решения покупателем.

Примеры хороших и плохих карточек

Плохая карточка товара выглядит непрофессионально и теряет потенциальных покупателей: — одна маленькая фотография товара; — описание товара написано одним большим текстовым блоком; — цену найти сложно; — маленькая серая кнопка; — нет информации о доставке; — отсутствуют отзывы и рейтинг товара.

На такой странице средний покупатель проводит 5-10 секунд и уходит.

Хорошая карточка товара на сайте: — минимум 6 фотографий товара с разными ракурсами; — крупное название товара; — рейтинг в звёздах и число отзывов; — видная цена; — краткое описание товара из 1-2 предложений; — простые и понятные варианты товара; — большая контрастная кнопка в корзину; — подробный текст про товар с разделами; — информация о доставке и возврате товара; — отзывы с оценками; — форма для вопросов о товаре.

На такой странице покупатель чувствует себя комфортно, а конверсия выше на 30-50%.

Адаптация карточки под свой дизайн

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

В настройках блока Tilda вы задаёте цвет кнопок, размер и тип шрифта, расстояние между блоками, фон страницы. Фрилансеры и дизайнеры используют готовые шаблоны карточек как основу, но затем создают уникальные реализации с авторским дизайном. Главное правило: все функциональные элементы (кнопки, варианты товара, форма) должны оставаться на месте и быть легко доступны для пользователя.