Как сделать интернет-магазин на одной странице: полный пошаговый гайд
Для начинающих HTML/CSS Интернет-магазин
Хотите продавать товары в интернете, но не хотите разбираться со сложными CMS? Одностраничный магазин — идеальное решение. В этом гайде вы создадите полноценный лендинг-магазин с каталогом, корзиной и формой заказа. А потом опубликуете его за минуту.
Зачем нужен одностраничный магазин
Интернет-магазин на одной странице (one-page shop) — это не урезанный вариант «нормального» магазина. Это осознанный формат, который отлично подходит для множества сценариев:
- Вы продаёте 3-15 товаров — авторские украшения, выпечку на заказ, handmade-свечи, мерч группы или курса
- Вы тестируете нишу — хотите проверить, будут ли покупать, прежде чем вкладывать в полноценный магазин
- Вам нужен лендинг под акцию — распродажа, сезонное предложение, предзаказ
- Вы фрилансер и делаете магазин клиенту быстро и недорого
- Учебный проект — для портфолио или курса веб-разработки
Факт: по данным исследований, конверсия одностраничных лендингов в среднем на 25-30% выше, чем у многостраничных сайтов. Пользователь не отвлекается на навигацию и быстрее доходит до кнопки «Заказать».
Одностраничный магазин vs. полноценный e-commerce
One-page shop
- Создаётся за 1-2 дня
- Не нужен сервер с БД
- Бесплатный хостинг
- Лёгкий и быстрый
- Заказы через форму/Telegram
- До 20-30 товаров
Полноценный магазин
- Разработка от 2 недель
- Нужна база данных
- Платный хостинг от 500₽/мес
- Онлайн-оплата, корзина
- Личный кабинет, трекинг
- Сотни и тысячи товаров
Что понадобится для создания магазина
Для создания одностраничного магазина вам потребуется минимальный набор инструментов:
- Текстовый редактор — VS Code (бесплатный, самый популярный), Sublime Text или даже обычный Блокнот
- Браузер — Chrome или Firefox для предпросмотра
- Фотографии товаров — реальные фото ваших товаров (или стоковые для прототипа)
- Тексты — описания товаров, цены, контакты
- 30-60 минут свободного времени
Не нужны: знания PHP, баз данных, JavaScript-фреймворков. Достаточно базового понимания HTML и CSS. Если вы знаете, что такое <div> и color: red — вы справитесь.
Структура одностраничного магазина
Прежде чем писать код, давайте определим структуру. Хороший одностраничный магазин состоит из следующих блоков:
- Шапка (Header) — логотип, название, навигация-якоря
- Герой-секция (Hero) — яркий баннер с главным оффером
- Каталог товаров — карточки с фото, названием, ценой и кнопкой
- О нас / Преимущества — почему стоит покупать именно у вас
- Отзывы — социальное доказательство
- Форма заказа — имя, телефон, выбранный товар
- Подвал (Footer) — контакты, соцсети, юридическая информация
Шаг 1. Создаём структуру проекта
1Создайте папку проекта
Создайте на компьютере папку, например my-shop. Внутри создайте файл index.html и папку images для фотографий товаров.
my-shop/
├── index.html
├── images/
│ ├── product-1.jpg
│ ├── product-2.jpg
│ ├── product-3.jpg
│ └── hero-banner.jpg
└── style.css (необязательно, можно встроить)
Для простоты мы будем писать стили прямо в HTML-файле через тег <style>. Это удобно для одностраничника: один файл — весь магазин.
Шаг 2. Базовая HTML-разметка
2Напишите скелет страницы
Откройте index.html в редакторе и начните с базовой структуры:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Магазин свечей ручной работы | CandleShop</title>
<meta name="description" content="Ароматические свечи ручной работы
из натурального воска. Доставка по всей России.">
<style>
/* Стили будут здесь */
</style>
</head>
<body>
<header id="top">...</header>
<section id="catalog">...</section>
<section id="about">...</section>
<section id="order">...</section>
<footer>...</footer>
</body>
</html>
Обратите внимание на атрибуты id у секций. Они нужны для якорной навигации: клик по ссылке #catalog прокрутит страницу к каталогу.
Шаг 3. Шапка с навигацией
3Создайте header с логотипом и меню
<header style="background: white; padding: 16px 0;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
position: sticky; top: 0; z-index: 100;">
<div style="max-width: 1200px; margin: 0 auto;
padding: 0 20px; display: flex;
justify-content: space-between; align-items: center;">
<a href="#top" style="font-size: 1.5rem;
font-weight: 800; color: #059669;
text-decoration: none;">
🕯️ CandleShop
</a>
<nav style="display: flex; gap: 24px;">
<a href="#catalog" style="color: #374151;
text-decoration: none;">Каталог</a>
<a href="#about" style="color: #374151;
text-decoration: none;">О нас</a>
<a href="#order" style="color: #059669;
font-weight: 600;
text-decoration: none;">Заказать</a>
</nav>
</div>
</header>
Свойство position: sticky делает шапку «прилипающей» — она остаётся наверху при прокрутке. Это важно для удобства навигации на длинной странице.
Шаг 4. Hero-секция с главным оффером
4Добавьте яркий баннер
Hero-секция — первое, что видит посетитель. Она должна за 3 секунды объяснить, что вы продаёте и почему это стоит внимания.
<section style="background: linear-gradient(135deg, #ecfdf5, #d1fae5);
padding: 80px 20px; text-align: center;">
<h1 style="font-size: 2.8rem; margin-bottom: 16px;
color: #064e3b;">
Ароматические свечи<br>ручной работы
</h1>
<p style="font-size: 1.2rem; color: #374151;
max-width: 600px; margin: 0 auto 32px;">
Натуральный соевый воск, эфирные масла,
хлопковый фитиль. Каждая свеча —
маленькое произведение искусства.
</p>
<a href="#catalog" style="display: inline-block;
background: #059669; color: white;
padding: 16px 40px; border-radius: 50px;
font-size: 1.1rem; font-weight: 600;
text-decoration: none;">
Смотреть каталог →
</a>
<p style="margin-top: 16px; color: #6b7280;
font-size: 0.9rem;">
🚚 Бесплатная доставка от 2000₽
</p>
</section>
Шаг 5. Каталог товаров — сердце магазина
5Создайте сетку карточек товаров
Это самая важная часть. Каждая карточка содержит: фото, название, описание, цену и кнопку заказа.
<section id="catalog" style="padding: 60px 20px;
max-width: 1200px; margin: 0 auto;">
<h2 style="text-align: center; font-size: 2rem;
margin-bottom: 40px;">Наши свечи</h2>
<div style="display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 24px;">
<!-- Карточка товара -->
<div style="background: white; border-radius: 16px;
overflow: hidden;
box-shadow: 0 2px 12px rgba(0,0,0,0.08);
transition: transform 0.2s;">
<img src="images/product-1.jpg"
alt="Свеча Лаванда"
style="width: 100%; height: 280px;
object-fit: cover;">
<div style="padding: 20px;">
<h3 style="margin-bottom: 8px;">
Лавандовый вечер
</h3>
<p style="color: #6b7280; font-size: 0.9rem;
margin-bottom: 12px;">
Соевый воск, эфирное масло лаванды.
Время горения: 40 часов.
</p>
<div style="display: flex;
justify-content: space-between;
align-items: center;">
<span style="font-size: 1.4rem;
font-weight: 700;
color: #059669;">890 ₽</span>
<a href="#order" style="background: #059669;
color: white; padding: 8px 20px;
border-radius: 8px;
text-decoration: none;
font-weight: 500;">
Заказать
</a>
</div>
</div>
</div>
<!-- Повторите для остальных товаров -->
</div>
</section>
Мы используем CSS Grid с auto-fill и minmax. Это значит, что карточки автоматически выстроятся в 1, 2 или 3 колонки в зависимости от ширины экрана. Никакой дополнительной адаптивности писать не нужно!
Совет по фото: используйте квадратные или вертикальные фотографии товаров на однотонном фоне. Свойство object-fit: cover обрежет фото под нужный размер, но исходник должен быть качественным. Сжимайте фото через squoosh.app — файлы до 100-200 КБ загружаются мгновенно.
Шаг 6. Блок преимуществ
6Расскажите, почему покупать у вас
<section id="about" style="background: white;
padding: 60px 20px;">
<div style="max-width: 1200px; margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 32px; text-align: center;">
<div>
<div style="font-size: 2.5rem;
margin-bottom: 12px;">🌿</div>
<h3>100% натуральный состав</h3>
<p style="color: #6b7280;">
Соевый воск, эфирные масла,
деревянные и хлопковые фитили.
Никакого парафина.
</p>
</div>
<div>
<div style="font-size: 2.5rem;
margin-bottom: 12px;">🎨</div>
<h3>Ручная работа</h3>
<p style="color: #6b7280;">
Каждая свеча создаётся вручную
в нашей мастерской. Мы контролируем
каждый этап.
</p>
</div>
<div>
<div style="font-size: 2.5rem;
margin-bottom: 12px;">🚚</div>
<h3>Доставка по всей России</h3>
<p style="color: #6b7280;">
СДЭК, Почта России, курьер
по Москве. Бесплатно от 2000₽.
</p>
</div>
</div>
</section>
Шаг 7. Блок отзывов
7Добавьте социальное доказательство
Отзывы реальных покупателей увеличивают конверсию на 20-30%. Даже 2-3 отзыва — лучше, чем ничего.
<section style="padding: 60px 20px; background: #f9fafb;">
<h2 style="text-align: center; font-size: 2rem;
margin-bottom: 40px;">Отзывы покупателей</h2>
<div style="max-width: 1200px; margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 24px;">
<div style="background: white; padding: 24px;
border-radius: 12px;
border: 1px solid #e5e7eb;">
<div style="color: #f59e0b;
margin-bottom: 8px;">★★★★★</div>
<p style="margin-bottom: 12px;">
«Заказывала набор свечей в подарок маме.
Пришли в красивой упаковке,
пахнут невероятно! Горят ровно,
без копоти.»
</p>
<p style="color: #6b7280; font-weight: 500;">
— Анна, Москва
</p>
</div>
<!-- Ещё 1-2 отзыва по аналогии -->
</div>
</section>
Шаг 8. Форма заказа — самая важная часть
8Создайте форму для приёма заказов
Это то, ради чего всё затевалось. Форма должна быть простой: имя, телефон, что хотите заказать. Без регистрации, без корзины.
Для обработки формы без бэкенда есть несколько бесплатных сервисов:
| Сервис | Бесплатный план | Плюсы |
|---|---|---|
| Formspree | 50 отправок/мес | Простая интеграция, уведомления на email |
| Telegram Bot API | Безлимит | Мгновенные уведомления в Telegram |
| Google Forms | Безлимит | Ответы в Google Таблицы |
| Web3Forms | 250 отправок/мес | Без регистрации, AJAX |
Покажем вариант с Formspree — самый простой:
<section id="order" style="padding: 60px 20px;
background: linear-gradient(135deg, #ecfdf5, #d1fae5);">
<div style="max-width: 500px; margin: 0 auto;">
<h2 style="text-align: center; font-size: 2rem;
margin-bottom: 8px;">Оформить заказ</h2>
<p style="text-align: center; color: #6b7280;
margin-bottom: 32px;">
Заполните форму, и мы свяжемся с вами
в течение 30 минут
</p>
<form action="https://formspree.io/f/ВАШ_ID"
method="POST"
style="display: flex; flex-direction: column;
gap: 16px;">
<input type="text" name="name"
placeholder="Ваше имя" required
style="padding: 14px 18px;
border: 2px solid #d1d5db;
border-radius: 10px; font-size: 1rem;
outline: none;">
<input type="tel" name="phone"
placeholder="Телефон" required
style="padding: 14px 18px;
border: 2px solid #d1d5db;
border-radius: 10px; font-size: 1rem;
outline: none;">
<select name="product" required
style="padding: 14px 18px;
border: 2px solid #d1d5db;
border-radius: 10px; font-size: 1rem;
background: white;">
<option value="">Выберите товар</option>
<option>Лавандовый вечер — 890₽</option>
<option>Цитрусовый рай — 990₽</option>
<option>Ванильное облако — 790₽</option>
<option>Набор 3 свечи — 2290₽</option>
</select>
<textarea name="comment"
placeholder="Комментарий (необязательно)"
rows="3"
style="padding: 14px 18px;
border: 2px solid #d1d5db;
border-radius: 10px; font-size: 1rem;
resize: vertical; outline: none;">
</textarea>
<button type="submit"
style="background: #059669; color: white;
padding: 16px; border: none;
border-radius: 10px; font-size: 1.1rem;
font-weight: 600; cursor: pointer;">
Отправить заказ
</button>
</form>
</div>
</section>
Как получить Formspree ID: зайдите на formspree.io, зарегистрируйтесь, создайте новую форму — получите ID вида f/xyzabcde. Вставьте его в action. Заявки будут приходить вам на email.
Шаг 9. Отправка заказов в Telegram
9Настройте уведомления в Telegram (продвинутый вариант)
Если хотите получать заказы мгновенно в Telegram — используйте Telegram Bot API. Это бесплатно и без лимитов.
Что нужно сделать:
- Откройте @BotFather в Telegram, создайте бота командой
/newbot - Скопируйте токен бота (длинная строка вида
123456:ABC-DEF) - Напишите боту что угодно, затем откройте
https://api.telegram.org/bot<TOKEN>/getUpdatesи найдите свойchat_id - Добавьте JavaScript для отправки формы:
<script>
document.querySelector('form').addEventListener('submit',
async function(e) {
e.preventDefault();
const form = new FormData(this);
const name = form.get('name');
const phone = form.get('phone');
const product = form.get('product');
const comment = form.get('comment');
const text = `🛒 Новый заказ!\n\n`
+ `👤 ${name}\n📱 ${phone}\n`
+ `📦 ${product}\n💬 ${comment || '—'}`;
const TOKEN = 'ВАШ_ТОКЕН_БОТА';
const CHAT_ID = 'ВАШ_CHAT_ID';
await fetch(
`https://api.telegram.org/bot${TOKEN}/sendMessage`,
{
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({
chat_id: CHAT_ID,
text: text,
parse_mode: 'HTML'
})
}
);
alert('Спасибо! Ваш заказ принят. '
+ 'Мы свяжемся с вами в ближайшее время.');
this.reset();
});
</script>
Важно: токен бота будет виден в исходном коде страницы. Для небольшого магазина это допустимо, но для серьёзного проекта лучше использовать серверный обработчик. На VibeHosting вы можете подключить бота через встроенную интеграцию.
Шаг 10. Футер и юридическая информация
10Добавьте подвал страницы
<footer style="background: #111827; color: #9ca3af;
padding: 40px 20px; text-align: center;">
<div style="max-width: 800px; margin: 0 auto;">
<p style="font-size: 1.2rem; color: white;
margin-bottom: 16px;">🕯️ CandleShop</p>
<p>📧 hello@candleshop.ru |
📱 +7 (999) 123-45-67</p>
<p style="margin-top: 8px;">
<a href="https://t.me/candleshop"
style="color: #10b981;">Telegram</a>
|
<a href="https://instagram.com/candleshop"
style="color: #10b981;">Instagram</a>
</p>
<p style="margin-top: 24px; font-size: 0.85rem;">
ИП Иванова А.А. | ИНН 1234567890 |
ОГРНИП 3211234567890
</p>
<p style="font-size: 0.85rem;">
© 2024 CandleShop.
Все права защищены.
</p>
</div>
</footer>
Шаг 11. Финальные штрихи и оптимизация
Адаптивность
Благодаря CSS Grid с auto-fill наш магазин уже адаптивен. Но добавим пару медиа-запросов для идеальной мобильной версии:
<style>
@media (max-width: 640px) {
h1 { font-size: 1.8rem !important; }
nav { gap: 12px !important; font-size: 0.9rem; }
section { padding: 40px 16px !important; }
}
</style>
Оптимизация изображений
Тяжёлые фотографии — главный враг скорости загрузки. Вот правила:
-
Ширина фото товара — максимум 800px
-
Формат — WebP или сжатый JPEG (качество 80%)
-
Размер файла — до 100-200 КБ
-
Используйте
loading="lazy"для отложенной загрузки<img src="images/product-1.webp" alt="Свеча Лавандовый вечер" loading="lazy" width="400" height="400">
Мета-теги для соцсетей (Open Graph)
<!-- В <head> -->
<meta property="og:title"
content="CandleShop — свечи ручной работы">
<meta property="og:description"
content="Ароматические свечи из натурального воска">
<meta property="og:image"
content="https://ваш-сайт/images/og-image.jpg">
<meta property="og:type" content="website">
Благодаря этим тегам при отправке ссылки в мессенджер или соцсеть будет красивое превью с картинкой.
Шаг 12. Публикация на VibeHosting
12Загрузите магазин в интернет за 1 минуту
Ваш магазин готов — осталось его опубликовать. Для этого не нужен собственный сервер, домен или знание DevOps.
Вот что нужно сделать:
- Соберите файлы в ZIP — выделите
index.htmlи папкуimages, нажмите «Сжать» (на Mac) или «Отправить в > Сжатая ZIP-папка» (на Windows) - Зайдите наhostingvibe.ru
- Зарегистрируйтесь — email и пароль, подтверждение не нужно
- Загрузите ZIP — перетащите файл в область загрузки
- Выберите slug — например,
candleshop - Готово! Ваш магазин доступен по адресу
candleshop.hostingvibe.ru
Бесплатный план на VibeHosting
1 сайт, 50 МБ, 30 дней хостинга — этого достаточно для старта. Загрузите свой магазин прямо сейчас!
Загрузить магазин на VibeHosting →
Полезные дополнения для вашего магазина
Счётчик Яндекс.Метрики
Чтобы видеть, сколько людей заходят на ваш магазин и какие товары смотрят, подключите бесплатную Яндекс.Метрику. Зарегистрируйтесь на metrika.yandex.ru, создайте счётчик и вставьте код перед закрывающим </body>.
Виджет WhatsApp / Telegram
Добавьте плавающую кнопку мессенджера в угол экрана. Клиентам проще написать в мессенджер, чем заполнять форму:
<a href="https://wa.me/79991234567"
target="_blank"
style="position: fixed; bottom: 24px; right: 24px;
background: #25d366; color: white;
width: 60px; height: 60px; border-radius: 50%;
display: flex; align-items: center;
justify-content: center; font-size: 1.8rem;
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
text-decoration: none; z-index: 1000;">
💬
</a>
Favicon
Иконка во вкладке браузера — мелочь, но добавляет профессионализма. Создайте иконку на favicon.io и добавьте в <head>:
<link rel="icon" href="favicon.ico"
type="image/x-icon">
Примеры одностраничных магазинов для вдохновения
Вот несколько типов одностраничных магазинов, которые отлично работают:
- Кондитерская — торты и десерты на заказ, фото-каталог, форма заказа с выбором даты
- Мерч — футболки, худи, стикеры; минималистичный дизайн, крупные фото
- Фермерские продукты — наборы овощей/фруктов, подписка на еженедельную доставку
- Цветочная мастерская — букеты с ценами, форма для предзаказа
- Курс/вебинар — одностраничник с описанием, программой и кнопкой оплаты
Чек-лист перед запуском
Прежде чем отправлять ссылку клиентам, проверьте:
- ☐ Все фото загружаются (нет «сломанных» картинок)
- ☐ Форма отправляет заказы (проверьте тестовой заявкой)
- ☐ Сайт выглядит хорошо на телефоне (откройте через DevTools или реальный телефон)
- ☐ Указаны правильные цены
- ☐ Есть контактная информация (телефон, мессенджеры)
- ☐ Ссылки на соцсети работают
- ☐ Мета-теги заполнены (title, description, og:image)
- ☐ Нет орфографических ошибок
Итоги
Вы только что научились создавать полноценный одностраничный интернет-магазин с нуля. Давайте подведём итоги:
- Одностраничный магазин — отличный формат для малого бизнеса, тестирования ниши и старта продаж
- Для создания достаточно HTML и CSS — никаких фреймворков и баз данных
- Заказы можно получать через Formspree (email), Telegram Bot или Google Forms
- CSS Grid автоматически делает магазин адаптивным
- Публикация на VibeHosting — ZIP-архив → сайт за 1 минуту
Не ждите, пока «всё будет идеально». Начните с простого варианта, покажите его первым клиентам, соберите обратную связь — и улучшайте. Лучший магазин — тот, который уже работает.
Готовы запустить свой магазин?
Загрузите ZIP с вашим магазином на VibeHosting и получите ссылку вида ваш-магазин.hostingvibe.ru за минуту. Бесплатно!