Как создать интернет-магазин через вайбкодинг от каталога до оплаты

Интернет-магазин с каталогом, корзиной и оплатой через вайбкодинг запускают за один вечер — без найма разработчика и без знания кода. Рабочая схема: Lovable создаёт весь фронтенд, Shopify берёт на себя бэкенд (платежи, склад, налоги). Для рынка России главный вопрос — ЮKassa: её придётся подключать отдельно, и в этой статье мы разберём как именно.

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

Что такое вайбкодинг для интернет-магазина

Вайбкодинг для e-commerce — это когда вы описываете свой магазин словами, а AI генерирует рабочий код прямо перед вами. Не шаблон из конструктора, не стандартная тема Shopify, а кастомный интерфейс с вашим брендингом, анимациями и структурой страниц.

Главное отличие от обычных конструкторов вроде Тильды или Wix: вы не ограничены готовыми блоками. Хотите квиз для подбора товара? Пишете промпт. Нужен кастомный фильтр по параметрам? Описываете — получаете. Lovable пишет именно тот код, который вы попросили.

При этом Lovable закрывает только фронтенд — то, что видит покупатель. Всё, что происходит после нажатия «Купить», берёт на себя Shopify: обработка платежей, управление остатками, налоги, доставка.

Для кого этот подход работает:

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

Для кого этот подход не подойдёт:

• Магазины с существующей клиентской базой в Shopify (интеграция работает только для новых магазинов)
• Бизнесы, которым нужна сложная кастомная логика на бэкенде
• Те, кто планирует принимать только российские платежи через ЮKassa без доп. настройки

Шаг 1. Создаём магазин по промпту в Lovable

Lovable + Shopify — самый быстрый старт. Весь процесс от промпта до рабочего магазина-песочницы занимает 15-20 минут.

Как начать:

1. Зайдите на lovable.dev/shopify
2. Напишите описание своего магазина в поле ввода

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

«Создай интернет-магазин для продажи аксессуаров для сна — маски, ортопедические подушки, беруши. Используй интеграцию с Shopify. Стиль: спокойный, тёмно-синий с мягкими акцентами, минималистичный. Добавь раздел с отзывами и короткий квиз для подбора товара.»

Lovable сначала покажет план: структуру сайта, дизайн-систему, план интеграции с Shopify. Нажмите «Allow» для подключения Shopify — система создаст магазин-песочницу (sandbox store).

Sandbox важен: в нём можно тестировать всё что угодно, оплата не работает, данные не реальные. Это ваш полигон. До момента «Claim Store» вы ни за что не платите и ни к чему не обязаны.

[📸 СКРИНШОТ 01: Интерфейс Lovable с полем промпта] Как попасть: lovable.dev/shopify, центральное поле ввода Что снимать: поле промпта и кнопку Submit Файл: 01-lovable-prompt-field.webp

Если Lovable выдал ошибку после генерации — не пугайтесь. Это нормально. Нажмите «Try to fix» или напишите в чат что именно не работает, и AI исправит сам.

Шаг 2. Добавляем товары через AI

После генерации магазин пустой. Товары добавляют через чат с Lovable — прямо в интерфейс Shopify.

Для начала переключитесь в Chat Mode (кнопка в интерфейсе Lovable). В этом режиме можно обсуждать идеи без изменений в коде — полезно для брейншторма.

Что написать:

«Какие товары, кроме [ваш основной товар], стоит добавить в этот магазин?»

Lovable предложит список. Выберите то, что подходит, и дайте команду добавить:

«Добавь следующие товары: [список]. Для каждого сгенерируй изображение через AI.»

Lovable автоматически создаёт изображения продуктов и добавляет их в каталог Shopify. После добавления нажмите Allow для подтверждения и Refresh — товары появятся с фото, ценами и возможностью добавить в корзину.

Что можно настроить через промпт:

• Варианты товара (размер, цвет, вес)
• Описание каждого товара
• Ценообразование
• Остатки на складе

[📸 СКРИНШОТ 02: Список товаров после добавления] Как попасть: раздел каталога в магазине после добавления Что снимать: карточки 3-4 товаров с изображениями Файл: 02-lovable-products-added.webp

Шаг 3. Настраиваем корзину и оформление заказа

Корзина в Lovable + Shopify работает из коробки — её не нужно программировать отдельно. Покупатель добавляет товар, открывает корзину, нажимает Checkout — дальше всё обрабатывает Shopify.

В sandbox-режиме кнопка оплаты не работает: заполнить форму можно, но транзакция не пройдёт. Это нормально — так и должно быть до claim store.

Что можно кастомизировать:

• Внешний вид иконки корзины
• Сайдбар или полноэкранная корзина
• Поля в форме оформления заказа
• Апселл-блоки («с этим часто берут»)

Через промпт: «Сделай корзину в виде боковой панели справа. Добавь апселл-блок под списком товаров с рекомендациями.»

Что важно не делать: не добавляйте обязательную регистрацию перед покупкой. Это лишний барьер, который снижает конверсию. Гостевой чекаут работает лучше.

Шаг 4. Дизайн и UI — делаем магазин незаменимым

Начальный дизайн от Lovable может выглядеть «AI-шным» — это распространённая проблема. Есть несколько способов сделать его лучше.

Способ 1: Magic Path Magic Path — инструмент для быстрой генерации UI. Нарисуйте скетч секции (Hero, каталог, отзывы), импортируйте в Magic Path, получите готовый дизайн-код. Скриншот этого дизайна передайте в Lovable как референс:

«Сделай Hero Section, как на этом скриншоте.»

Способ 2: Midjourney + анимация Для Hero Section можно сгенерировать атмосферное изображение или видео в Midjourney, а потом загрузить его через Lovable Cloud (встроенное хранилище файлов). Промпт для видео: «Добавь видео из хранилища как фон Hero Section с плавной сменой между файлами и затуханием.»

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

Шаг 5. Claim Store — переходим к реальным продажам

Когда дизайн готов и вы довольны результатом, пора сделать магазин настоящим.

Процесс:

1. Напишите в чат Lovable: claim store
2. Появится поп-ап — нажмите «Claim»
3. Lovable перенаправит в Shopify для создания/входа в аккаунт
4. После авторизации магазин будет привязан к вашему Shopify

После claim начинается 30-дневный бесплатный триал Shopify (актуально на апрель 2026). Этого времени хватит, чтобы настроить всё и получить первые заказы.

По истечении триала нужна подписка Shopify. Базовый план — $29/месяц. Именно он даёт доступ к аутентификации Shopify для работы с Lovable.

Что важно сделать сразу после claim:

• Активировать платежи в Shopify Admin
• Убрать бейдж Lovable (Settings -> Hide Lovable Badge)
• Добавить свой домен
• Заполнить метаданные магазина (название, описание, изображение)

[📸 СКРИНШОТ 03: Shopify Admin после claim store] Как попасть: Shopify Admin -> главная панель после привязки Что снимать: дашборд с товарами, статусом платежей, плашкой Lovable Файл: 03-shopify-admin-after-claim.webp

Шаг 6. Подключение ЮKassa для России

Это самый важный момент для российского рынка — и самый неудобный.

Честно: Lovable не подключает ЮKassa автоматически. Для этого нужно написать несколько серверных функций — Lovable с кастомной бэкенд-логикой справляется плохо. Это не баг, это ограничение архитектуры: Lovable — инструмент преимущественно для фронтенда.

«Подключить российский эквайринг вроде ЮKassa Lovable самостоятельно не сможет — для этого на вашем сервере нужно написать две-три несложные функции кодом. Это не невозможно, но требует либо знаний, либо помощи разработчика.» — инсайт из русскоязычного сообщества вайбкодеров

Варианты решения:

Самый практичный путь для быстрого старта: принимать оплату через Shopify Payments от иностранных покупателей, параллельно настроить ЮKassa с помощью Claude Code для российского рынка.

Как подключить ЮKassa через Claude Code:

1. Установите Google Anti-Gravity и Claude Code
2. Дайте агенту задачу: «Напиши серверную функцию для интеграции ЮKassa с моим Shopify магазином. Документация ЮKassa: [ссылка]»
3. Claude Code напишет код, который нужно задеплоить на сервер
4. Подключите вебхуки в личном кабинете ЮKassa

Этот подход требует минимальных технических знаний, но он реален даже без опыта программирования — если вы готовы потратить 2-3 часа на настройку.

Альтернативный путь: Shopify AI Toolkit + Claude Code

Lovable — не единственный способ. Если хотите больше контроля над дизайном и готовы потратить больше времени на настройку, есть более мощный подход.

Shopify выпустил собственный AI Toolkit (апрель 2026), который работает напрямую с Claude Code через Google Anti-Gravity. Это принципиально другой уровень кастомизации: AI пишет Liquid-файлы темы и пушит их прямо в ваш Shopify.

Что нужно:

• Google Anti-Gravity (бесплатно)
• Claude Code (подписка $20/мес)
• NodeJS (бесплатно)
• Shopify Basic ($29/мес)

Преимущества перед Lovable:

• Полный контроль над Liquid-темой Shopify
• Можно клонировать дизайн успешных конкурентов (берёте скриншот, отдаёте агенту как референс)
• Sticky кнопки Add to Cart без дополнительных приложений
• Все секции — кастомные, не шаблонные

Недостатки:

• Нужны базовые знания: терминал, Product Handle, шаблоны Shopify
• Дольше настраивать
• Придётся кликать «Allow» на каждое действие агента

Этот подход описан в видео о клонировании дропшиппинг-магазина — там за 15 минут воссоздали Hero Section с нуля по скриншоту конкурента, включая социальные доказательства, тикер с отзывами и кастомные блоки.

Что выбрать:

Checklist запуска магазина через вайбкодинг

Перед тем как открыть магазин реальным покупателям — пройдитесь по этому списку:

Дизайн и контент:

• ☐ Hero Section с видео или атмосферным изображением
• ☐ Минимум 3-5 товаров с реальными фото
• ☐ Страница «О магазине» заполнена
• ☐ Форма обратной связи работает
• ☐ Отзывы добавлены (можно AI-сгенерированные для старта)
• ☐ Мобильная версия проверена

Технически:

• ☐ Собственный домен подключён
• ☐ Бейдж Lovable скрыт
• ☐ Метаданные заполнены (title, description, изображение)
• ☐ Платежи активированы в Shopify
• ☐ Тестовый заказ оформлен
• ☐ Форма контакта ведёт на вашу почту

Безопасность:

• ☐ Lovable провёл аудит безопасности (функция в интерфейсе)
• ☐ Форма контакта не принимает аномально длинные данные
• ☐ Политика конфиденциальности добавлена

FAQ

Можно ли создать интернет-магазин без Shopify, только через Lovable? Технически — да, но Lovable не обрабатывает платежи сам. Без Shopify вам нужно будет самостоятельно интегрировать платёжный шлюз (Stripe, ЮKassa и т.д.) — это требует написания серверного кода. Для большинства проще использовать Lovable + Shopify как связку.

Сколько стоит запустить магазин через вайбкодинг? Минимальный бюджет: $29/месяц (Shopify Basic, актуально на апрель 2026). Lovable — бесплатно для разработки, платная подписка нужна только если нужно больше токенов. Итого от 2 700 руб./месяц за полностью работающий магазин.

Lovable подходит для существующего Shopify магазина? Нет. Интеграция Lovable + Shopify работает только для новых магазинов с нуля. Если у вас уже есть магазин с историей заказов и клиентской базой, используйте Shopify AI Toolkit через Claude Code — там это ограничение отсутствует.

Как добавить ЮKassa в магазин на Lovable? ЮKassa не подключается через Lovable автоматически. Нужно написать серверные функции: либо через Claude Code самостоятельно, либо с помощью разработчика. Для быстрого старта рекомендуем сначала запустить магазин со Shopify Payments, а ЮKassa добавить во вторую итерацию.

Можно ли добавить квиз для подбора товара? Да, это одно из сильных мест Lovable. Напишите в промпт: «Добавь квиз на 4-5 вопросов для подбора [вашей категории товара]. По результатам показывай рекомендуемые продукты из каталога.» Квиз генерируется автоматически и сразу связывается с товарами Shopify.

Можно ли потом перенести магазин с Lovable на другой хостинг? Да. Lovable использует React/TypeScript для фронтенда — стандартный стек. Код можно скачать и задеплоить где угодно: Vercel, Railway, VPS. Shopify останется как есть — только фронтенд меняется.

Нужно ли умение программировать? Для базового старта — нет. Для подключения ЮKassa и продвинутой кастомизации — минимальные знания помогут. Если хотите разобраться быстро, смотрите каталог курсов по вайбкодингу на VibeCoderz.

Глоссарий

Вайбкодинг — создание веб-приложений и сайтов через промпты на естественном языке без написания кода вручную.

Lovable — AI-платформа для создания фронтенда веб-приложений. Пишет React-код по текстовым описаниям.

Sandbox store — тестовый магазин в Shopify, созданный Lovable для разработки. Платежи не работают, данные не реальные.

Claim store — команда в Lovable, которая переводит sandbox в реальный магазин, привязанный к вашему аккаунту Shopify.

Shopify Payments — встроенная платёжная система Shopify. Работает во многих странах, но не в России напрямую.

ЮKassa (бывший Яндекс.Касса) — российская платёжная система. Принимает карты Мир, российские Visa/Mastercard, наличные.

Liquid — язык шаблонов Shopify для создания тем магазина. Claude Code умеет писать Liquid-файлы.

Shopify AI Toolkit — официальный инструмент Shopify для работы AI-агентов с кодом темы. Выпущен в 2026 году.

Frontend / фронтенд — то, что видит покупатель: дизайн, анимации, кнопки, страницы.

Backend / бэкенд — серверная часть: обработка заказов, платежи, база данных, логика.

Полные обзоры инструментов на VibeCoderz

• Lovable — полный обзор
• Google Anti-Gravity — AI IDE от Google
• Claude Code — терминальный агент для вайбкодинга
• Каталог всех AI-инструментов для вайбкодинга

Если не знаете, с чего начать — запишитесь на консультацию к Максиму.

Статья подготовлена командой VibeCoderz — крупнейшей базы знаний по AI IDE и вайбкодингу в СНГ. Последнее обновление: апрель 2026.