Дополнительные опции товара в Tilda: карточки с фото и ценой

«Подарочная упаковка» в выпадающем списке мало что говорит покупателю. Фотография коробки сразу объясняет, за что он доплачивает. То же работает с добавками к блюду, аксессуарами и небольшими услугами к основному товару.

Мод оформления дополнительных опций превращает выбор в карточки с изображениями. Цена и сама покупка остаются связаны с настройками Tilda. Ниже — порядок, который поможет сохранить эту связь и аккуратно оформить выбор.

Вариант — это, например, чёрная футболка размера M. Дополнительная опция — упаковка или услуга, которую можно добавить к этому товару. Для таких дополнений и предназначен этот мод.

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

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

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

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

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

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

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

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

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

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

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

Читайте также: Процент скидки в Tilda: плашка рядом с ценой товара · Как поделиться корзиной в Tilda: товары одной ссылкой.