Шаблон Volt: магазин гаджетов с корзиной и сравнением

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

Ниже разобрано, из чего собран шаблон, что в нём работает по-настоящему и какими правками он превращается в витрину вашего товара.

Что внутри шаблона Volt?

Шаблон закрывает набор блоков, к которому магазины техники приходят опытным путём, обычно после нескольких месяцев работы. Здесь они собраны сразу, в одном проекте, и это главная причина брать его как стартовую точку.

Раздел	Что внутри
Первый экран	Обещание техники, которая выдерживает ежедневную нагрузку
Акция недели	Отдельный товар с обратным отсчётом до конца предложения
Витрина	Карточки с фильтрами по категориям: звук, питание, свет
Сравнение	Две модели рядом по пунктам различий
Гарантия	Условия обслуживания как отдельный аргумент
Корзина	Список позиций, итог заказа, блок сопутствующих товаров
Личный раздел	Заказы, список желаний, гарантийные обращения

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

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

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

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

Что здесь работает, а что показано как интерфейс?

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

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

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

Личный раздел с заказами, списком желаний и гарантийными обращениями тоже работает как интерфейс. Он полезен как показ будущего опыта покупателя, но настоящих данных за ним нет.

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

Кому подходит Volt?

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

Подходит и для любого товара, который выбирают сравнением характеристик: велосипеды, кофемашины, оборудование для съёмки, спортивный инвентарь. Блок сравнения переносится на них без переделки структуры.

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

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

Не подходит для товара, который выбирают не по характеристикам, а по ощущению и уходу. Там сильнее работает шаблон Verdant с подбором под условия покупателя и гидом по уходу.

Взять шаблон или собрать магазин с нуля?

Считать удобно так. Сборка по описанию стоит 6 кредитов и приходит ровно по вашему тексту, включая всё, что вы забыли упомянуть. Клон бесплатный, и платите вы только за отличия от каркаса, который уже видели работающим в превью.

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

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

Простой признак: посчитайте, сколько блоков шаблона нужны вам как есть. Если больше половины, клонируйте.

Отдельно стоит решить вопрос про число страниц. Если каждому товару нужна своя страница со своим адресом, это уже платформа: 12 кредитов за первые три страницы и по 3 за каждую следующую. Для десятка позиций одностраничная витрина обычно работает не хуже.

Как переделать шаблон под свой товар?

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

1. Замените название и обещание. Одна правка меняет имя магазина везде и переписывает первый экран.
2. Подставьте свои товары. Фотографии, названия, цены, характеристики. Это главная часть работы.
3. Перекроите категории. Три фильтра заменяются на ваши, число категорий меняется тем же запросом.
4. Перепишите сравнение. Сравнивать надо те две модели, между которыми реально выбирают ваши покупатели.
5. Проверьте гарантию и акцию. Оба блока это публичные обещания, и демонстрационные условия оставлять нельзя.
6. Опубликуйте. Проект живёт на адресе вида имя.zugo.run, свой домен подключается поверх на платных тарифах.

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

Сколько стоит довести шаблон до продаж?

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

Действие	Стоимость
Клон шаблона	Бесплатно, без обращения к ИИ
Правка в чате	3 кредита
Сборка с нуля по описанию	6 кредитов
Многостраничная платформа	12 кредитов за первые три страницы, дальше по 3 за страницу
Режим Hi-Fi	Вдвое дороже: правка 6, сборка 12

Тарифы: Free даёт 5 кредитов, Pro стоит $25 в месяц и включает 200 кредитов, Business стоит $99 в месяц. Каждая сборка перед выдачей запускается в песочнице, и вариант, который не открылся, вам не отдаётся, то есть за сломанный результат кредиты не списываются.

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

Насколько вообще такой подход годится для торговли и что придётся достраивать самому, разобрано в статье подходит ли это для интернет-торговли.

Какие правки просят чаще всего?

Работают формулировки, где назван конкретный блок и конкретное изменение в нём. Общее пожелание стоит ровно столько же, но проверить его результат заметно труднее.

«Сделай в витрине двенадцать товаров и добавь характеристики в карточку». «Добавь четвёртую категорию: кабели». «Сравни три модели вместо двух». «Убери таймер акции и оставь просто скидку». «Покажи в карточке, что товара нет в наличии, вместо кнопки покупки».

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

И почти всегда всплывает телефон: «на мобильном показывай товары в один столбец, а фильтры сверни в горизонтальную ленту». Витрины листают с телефона, и проверять результат надо на настоящем устройстве, а не в уменьшенном окне браузера.

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

Где границы шаблона?

Витрина это ещё не магазин. Пока не подключены оплата и хранение заказов, страница показывает товар, но не продаёт его. Это отдельный этап работы, а не одна правка в чате.

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

Акция с таймером требует честности. Срок окончания задаётся правкой, и он должен быть настоящим: перезапускающийся отсчёт замечают быстро.

Гарантийный процесс остаётся вне продукта. Приём обращений, сервис, обмен неисправного товара: это ваши процессы, и описать их должен человек, который ими занимается. На по-настоящему сложном продукте Zugo не заменяет команду разработки, а исходники всегда забираются экспортом в GitHub: проект принадлежит вам.

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