Сравнение товаров в Tilda: как сделать удобную таблицу

Покупатель выбирает между тремя похожими товарами и по кругу открывает карточки. Где больше объём? Какая модель легче? Чем отличается комплектация? Таблица сравнения собирает эти ответы в одном месте.

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

Сравнение особенно полезно для техники, инструментов и других товаров с несколькими значимыми параметрами. Сравнивать четыре модели пылесоса понятнее, чем четыре совершенно разных предмета.

Выберите одну группу и составьте короткий список критериев: мощность, вес, размер, комплектация. Не нужно выводить все сведения подряд. Если строка ничего не меняет в выборе, она только удлиняет таблицу.

Используйте одинаковые названия параметров и единицы измерения. «Вес», «Масса» и «Вес товара» для человека похожи, но в таблице могут оказаться разными строками. Запись «1,5 кг» также легче сравнивать с «2 кг», чем с «2000 граммов».

Мод читает доступные данные из разметки карточек, включая найденные опции и варианты. Он не достаёт все скрытые сведения из базы каталога. Если параметра нет на странице, сначала разберитесь с его выводом в самой карточке.

1. Подготовьте стандартные карточки магазина с настоящими товарами и параметрами.
2. В конструкторе выберите вид кнопки сравнения и её подпись.
3. Укажите максимальное число товаров и настройте панель выбранных позиций.
4. Оформите окно таблицы: ширину, шрифт, фон и строки.
5. Вставьте код в T123 после блоков магазина, затем опубликуйте страницу.

Произвольно нарисованная карточка в Zero Block не станет совместимой только потому, что выглядит как стандартная. Для работы важны данные внутри карточки.

Начните с двух-трёх товаров. Включите подсветку отличий: она помогает быстро увидеть, за что приходится доплачивать. Для длинной таблицы пригодится закрепление названий товаров и первой колонки с параметрами.

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

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

• Добавьте два товара, затем третий.
• Прокрутите таблицу вправо и вниз.
• Удалите одну позицию и проверьте оставшиеся строки.
• Если включён заказ, проверьте, какой именно товар и вариант попал в корзину.

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

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

Читайте также: Табы и таблица характеристик товара · Избранное в Tilda: поиск, статусы и заметки.